フッターを右と左に振り分ける

01 / 04

右に寄せたいときは float: right

float: left; が「左に寄せて浮かす」なら、float: right; は右に寄せて浮かす。

書き方は値を変えるだけ。ヘッダーで覚えた指定が、そのまま反対側にも使えるよ。

.links {  float: right;}

02 / 04

名前を float: left;、リンクを float: right; にすると、帯の両端に振り分けられる。

フッターでもヘッダーでも、この左右の振り分けはいちばんよく使う形だよ。

.name {  float: left;}.links {  float: right;}

03 / 04

フッターは本文より目立たせないのが定石。濃い背景に、少し落とした文字色を合わせるとまとまるよ。

高さと行の高さをそろえるのは、ヘッダーのときと同じやり方。

.footer {  height: 72px;  background-color: #333333;  color: #dddddd;  line-height: 72px;}

04 / 04

著作権の行は 12px くらいまで小さくしていい。小さい＝重要ではない、と読む人に伝わるからだよ。

CSSは style.css に書く。ここから書いてみよう。

.copyright {  font-size: 12px;}