01 / 04
ページを組み立てる
INPUT · スライド
ヘッダーの中の位置をそろえる
02 / 04
行の高さを箱の高さに合わせる
line-height は1行ぶんの高さを決めるプロパティ。
文字は行の真ん中に置かれるから、行の高さを箱の高さと同じにすると、結果として上下の真ん中にくるんだ。
.header { height: 64px;}.logo { line-height: 64px;}03 / 04
メニューにも同じ手が使える
横に並べた li にも同じ値を指定すれば、ロゴとメニューの高さがそろう。
帯の高さと同じ数字を書くのがコツだよ。数字がずれると、そのぶん上下にずれる。
.menu li { float: left; line-height: 64px;}04 / 04
本文では倍率で書く
line-height は単位なしの数字でも書ける。その場合は文字サイズの何倍かという意味になる。
font-size: 16px に line-height: 2 なら、行の高さは 32px。文章を読みやすくするときはこの書き方をよく使うよ。ここから書いてみよう。
.text { font-size: 16px; line-height: 2;}