#9-10 CSS Typography
What I learned today (今日の学びと復習)
CSSでスタイルを作る前に……
htmlファイルの<head></head>に<link>を作っていることを確認！
うっかり忘れていると、スタイルが反映されない！
・CSS Color
CSSでの色の作り方は以下の5種類
1. color name
2. rgb= red green blue = (3 values) = 0 - 255
3. rgba= red green blue alpha/opacity
→add alpha when need filter
4. opacity = 0 - 1 = .9 = 90%
→1の位を入力すると使えない。少数第一位のみ
5. hexcode = #
htmlファイルでスタイルを指定したいelemenがある場合classで括る
ex)
<p class="color">COLOR</p>
<p class="rgb">Red Green Blue</p>
<p class="rgba">Red Green Blue Alpha</p>
<p class="hexcode">HEXCODE</p>
cssファイルのsyntaxはそれぞれ以下の通り
.color{ color: chocolate; }
→色の名前を文字で入力
.rgb{ color: rgb(104, 136, 230); }
→rgbのとれる値は0-255まで。数値を覚えなくても、色が示された□にカーソルを合わせて調整できる。
.rgba{ color: rgba(220, 6, 6, 0.814); }
→abphaは0-1まで。小数第三位まで入力できる。
.hexcode{ color: #9B59B6; }
→hexcodeは覚える必要なし。以下のサイトを参照
・Font Family
色の場合同様、htmlファイルでフォントを指定したいelementのclassを作り、cssファイルで指定。
ex)htmlファイルのsyntax
<p class="serif">SERIF</p>
それに対応するcssファイルのsyntaxは
.serif{ font-family: serif; }
・Font Size
こちらも同じ要領でフォントを指定したいelementのclassを作り、cssファイルで指定。サイズ指定の方法は以下の3通り
1. px-size
2. percent-size
3. em-size : emはemphasisの意。
ex) htmlファイルのsyntax
<p class="px-size">PIXELS</p>
<p class="percent-size>PERCENT</p>
<p class= "em-size>EMPHASIS</p>
それぞれに対応するcssのsyntaxは
.px-size{ font-size: 20px ;}
.percent-size{ font-size: 200% ;}
.em-size{ font-size: 2em ;}
・Font Weight
作り方は上記のスタイル指定の仕方と同様なので例のsyntaxのみ貼っておきます。
htmlファイルのsyntax
<p class="bold">BOLD</p>
<p class="lighter">LIGHTER</p>
<p class="weight-300">Weight 300</p>
<p class="weight-900">Weight 900</p>
対応するcssファイルのsyntax
.bold{ font-weight: bold ;}
.lighter{ font-weight: lighter ;}
.weight-300{ font-weighter: 300;}
.weight-900{ font-weighter: 900;}
・Font Style
作り方は上記のスタイル指定の仕方と同様なので例のsyntaxのみ貼っておきます。font styleはitalicとobliqueの2種類
htmlファイルのsyntax
<p class= "italic">Italic</p>
<p class= "oblique">Oblique</p>
最初のsyntaxに対応するcssファイルのsyntax
.italic{
font-style: italic ;
font-family: sans-serif;
}
もちろん、{ }の中で、font-family等他の種類のスタイルを指定することも可能
・Text-transform
作り方は上記のスタイル指定の仕方と同様。全て大文字or小文字にしたい、単語の最初の文字だけ大文字にしたい時に使えます。
ex) htmlファイルのsyntaxが以下だとすると
<p class="uppercase">uppercase</p>
<p class="lowercase">LOWERCASE</p>
<p class="capitalize">cAPITALIZE per word.</p>
対応するcssファイルのsyntaxは
.uppercase{ text-transformation: uppercase ;}
→htmlでは小文字でuppercaseと書きましたがブラウザ上では大文字になります。
.lowercase { text-transformation: lowercase ;}
→の場合はその反対で大文字で書いたLOWERCASEがブラウザ上では小文字になります。
.capitalization{ text-transformation: capitalize;}
→ブラウザ上ではCAPITALIZE Per Word.と表示されます。
（参考文献の入力時に、手入力だといちいち頭文字を大文字にするのは面倒なのでこういう風に一律でスタイルを指定できたた便利ですね。）
#10 CSS Images
Imageとbackgroundの違い：
Imageは固形物、backgroundは液体のようなイメージ。固形物だとそのままの状態で置くことができるけど、backgroundは液体なので、容器がないとこぼれてしまう。なので、背景のスタイルを指定する時は容器を作ろう。
そのためのsyntaxは次の通り。
background-size: ;
: ;のところにcoverと入力すると画面の100%に、containと入力すると画面の一部に画像全体が表示される。200px 200pxのように数値で指定するのも可能。
background-position: ;
: ;で上下左右の位置を決める。真ん中に配置したければ
background-position: center center;
background-repeat: repeat;
背景を繰り返し表示したい場合。
background-attachment: ;
（fixedでは固定表示、scrollでは画面と一緒にスクロールさせることができる。
スクロールしてもしても表示され続ける広告がありますが、あれらはきっとfixedで固定表示させるコードでできているのかなと思いながら授業を受けていました。）
background-color: lightblue;のように、背景色の指定もできます。
htmlファイルで、cssファイルを指定し、スタイルを指定したいdivを作る。
そのdivに対してcssファイルでスタイルを決めるコードを書きます
この記事が気に入ったらサポートをしてみませんか？