左と右に振り分ける

01 / 05

ヘッダーは左と右に分かれている

よく見るヘッダーは、左にロゴ・右にメニューという形が多い。あいだは大きく空いている。

初級編では float: left; で左から詰めて並べたけれど、それだと右端には寄せられなかったね。

02 / 05

float の値には right もある。指定した要素は右に寄って浮くよ。

左のかたまりに left、右のかたまりに right。これだけで両端に振り分けられる。

.logo {  float: left;}.nav {  float: right;}

03 / 05

float: right; を複数の要素につけると、先に書いたものがいちばん右に来る。右から詰めていくからだよ。

並び順が思ったのと逆になったら、これを思い出そう。

.a {  float: right;}.b {  float: right;}

04 / 05

帯の高さを決めて、左右のかたまりに同じ line-height を与えると、文字のたての位置がそろう。初級編でやった手がそのまま使えるよ。

これでヘッダーらしい形になる。

.header {  height: 72px;}.logo {  line-height: 72px;}

05 / 05

text-align: right; は箱の中の文字を右に寄せる指定で、箱そのものは動かない。

箱を右に動かしたいときは float: right;。似ているけれど役目がちがうので、混ぜないようにしよう。ここから書いてみよう。