01 / 06
右に寄せたいときは float: right
ページを組み立てる
INPUT · スライド
01 / 06
float: left; が「左に寄せて浮かす」なら、float: right; は右に寄せて浮かす。
書き方は値を変えるだけ。ヘッダーで覚えた指定が、そのまま反対側にも使えるよ。
.links { float: right;}02 / 06
名前を float: left;、リンクを float: right; にすると、帯の両端に振り分けられる。
フッターでもヘッダーでも、この左右の振り分けはいちばんよく使う形だよ。
.name { float: left;}.links { float: right;}03 / 06
フッターは本文より目立たせないのが定石。濃い背景に、少し落とした文字色を合わせるとまとまるよ。
高さと行の高さをそろえるのは、ヘッダーのときと同じやり方。
.footer { height: 72px; background-color: #333333; color: #dddddd; line-height: 72px;}04 / 06
著作権の行は 12px くらいまで小さくしていい。小さい=重要ではない、と読む人に伝わるからだよ。
CSSは style.css に書く。ここから書いてみよう。
.copyright { font-size: 12px;}05 / 06
フッターの中身を全部 float にすると、実は困ったことが起きる。親(.footer)が中身の高さを見失って、ぺしゃんこになってしまうんだ。
float は「浮かせて」文字の周りに回りこませる指定なので、親から見ると「中に何も無い」のと同じ扱いになってしまうよ。
06 / 06
この章では .footer に height(高さ)を直接指定しているから、その心配はいらない。帯の高さを自分で決めておけば、中身が float でも帯そのものは崩れない。
高さを決めずに中身を全部 float だけで組みたいときは、後の章で習う Flexbox を使うほうが素直に書けるよ。