文字の装飾
大きさで順位をつくる
font-size は文字の大きさを決めるプロパティで、px という単位で指定します。px は画面の点の数のことです。ブラウザは h1 を大きく h3 を小さく表示してくれますが、その差は自分で決めなおせます。
大きさの差は、読む人にとっての順位になります。名前の h1 を 40px、セクション見出しの h2 を 24px、作品名の h3 を 18px、本文を 16px と段をつけると、どこから読めばよいかが一目で伝わります。
太さと行間
font-weight は文字の太さです。bold で太く、normal でふつうの太さになります。数値の 400 や 700 でも書けます。
line-height は行と行のあいだの高さです。単位を付けずに 1.8 と書くと、文字の大きさの 1.8 倍という意味になります。日本語は文字がぎっしり詰まって見えやすいので、1.7 から 1.9 くらいをとると、ぐっと読みやすくなります。
p {
font-size: 16px;
line-height: 1.8;
}
li {
line-height: 1.9;
}趣味や経歴のリストは 1 行が短いので、段落より少しだけ広めにとると窮屈さが消えます。
書き足す場所
前回までに h1 や p のルールはもうあります。新しくルールをつくるのではなく、そのかたまりの中に行を足していきましょう。同じセレクタのルールが 2 つに分かれていると、あとで読むときに混乱します。
課題
- h1 に font-size と font-weight を足して、名前を大きく太くする
- h2 と h3 にも font-size を足して、見出しの大きさに段をつける
- p に font-size と line-height、li に line-height を書いて行間を広げる