01 / 04
見た目を作り込む
INPUT · スライド
フッターを控えめに仕上げる
02 / 04
新しい指定は出てこない
ここで使うのは、ぜんぶもう知っているものだけ。
border-top… 本文との区切りpadding… 上下にゆとりfont-size… 小さめの文字color… 薄めの文字色text-align: center;… まん中にそろえる
組み合わせ方だけが新しい、という回だよ。
.footer { border-top: 1px solid #cfd8cf; padding: 28px 0; text-align: center;}03 / 04
文字は小さく、色は薄く
本文が 16px なら、フッターは 13px くらい。色も真っ黒ではなく灰色寄りにする。
小さい + 薄いのふたつで「ここは主役じゃない」と伝わるよ。
.footer { font-size: 13px; color: #6a7b6d;}04 / 04
中身はやっぱり二重の箱
背景色をつけるときは、これまでと同じ「帯 + 入れ物」で組む。フッターだけ特別な作りにする必要はない。
ページの上から下まで同じ組み方でそろえるほうが、直すときに迷わないよ。ここから書いてみよう。
<div class="footer"> <div class="container"> <p>みなと工作室</p> </div></div>