こんにちは！
UPSTARTSのSベンです！
今回は「フォント関連」のスタイルについての内容です。
こちらのhtmlにスタイルをあてていきます。
|
1 2 3 4 |
<body> <p id="font">ONE PIECE</p> <p>ONE PIECE</p> </body> |
color
まずはcolorですが、こちらは「文字色」の指定になります。
|
1 2 3 |
#font { color: red; } |
このように色名を指定して書く事もできますし、#で指定することもできます。
font-size
次にfont-sizeですが、こちらは「文字サイズ」の指定になります。
pxかem、％などで指定することができます。
|
1 2 3 |
#font { font-size: 20px; } |
このようにpxを指定すると、文字をその通りのサイズにすることができます。
font-weight
次にfont-weightですが、こちらは「文字の太さ」の指定になります。
値は数値で指定するか、キーワードで指定するかのどちらかになります。
数値ですと100～100ごとに900までが指定でき、数値が大きいほど文字が太くできます。
キーワードですと、nomal, bold, lighter, bolderを指定できます。
nomalが標準で数値だと400と同じ、boldが一般的な太さで数値だと700と同じになります。
lighterが相対的に一段階細くでbolderが相対的に一段階太くになります。
今回はよく使われるboldを指定します。
|
1 2 3 |
#font { font-weight: bold; } |
こうすると、文字が太く表示されます。
font-family
次にfont-familyですが、こちらは「字体」の指定になります。
今回は「Times New Roman」という字体にしてみます。
|
1 2 3 |
#font { font-family: 'Times New Roman'; } |
いかした字体になったかと思います。
字体の種類はたくさん用意されていますので、
お好みの字体を使ってみるのもいいかもしれません。
今回はフォント関連についてやっていきました。
次回は「ボックスモデル」になります。
ではまた次回！
