01 / 05
大きさを決める font-size
ページを組み立てる
INPUT · スライド
01 / 05
文字の大きさは font-size プロパティで決める。単位は px(ピクセル)をよく使うよ。
px は画面の点の数。数字が大きいほど文字も大きくなる。
p { font-size: 20px;}02 / 05
20 px のように間にスペースを入れると効かない。20px とくっつけて書くよ。
単位を書き忘れた font-size: 20; も無効。数字だけでは大きさが決まらないからだよ。
h2 { font-size: 28px;}03 / 05
<h1> は最初から大きく出るけれど、あれはブラウザが決めた初期の大きさ。CSSで指定すれば上書きできる。
小さくすることもできるよ。タグは意味を、大きさはCSSが決める——という分担がここでもはっきりする。
h1 { font-size: 24px;}04 / 05
文字の形(書体)は font-family で変える。まずは3種類の大きな分類を覚えよう。
sans-serif … 線の太さがそろった書体serif … 線の端に飾りのある書体monospace … 1文字ずつの幅が同じ書体p { font-family: serif;}05 / 05
大きさも書体も色も、変えるのは全部 style.css の中だけ。index.html は1文字も直さない。
中身を作り直さずに見た目を変えられる。ここがCSSのいちばんありがたいところだよ。さっそく書いてみよう。
h1 { font-size: 36px; font-family: serif; color: #6d4c41;}