章末仕上げ カードの土台完成
この章で手に入れたもの
要素を箱として組み立てる道具が、ひととおりそろいました。
- 4 つの層で考える content・padding・border・margin
- 箱の中を広げる padding と、箱どうしを離す margin
- 余った幅を半分ずつ分けて中央に寄せる margin auto
- 線を引く border と、角を丸める border-radius
- 読みやすい幅で止める max-width と、親に合わせる 100%
- 幅の数え方をそろえる box-sizing の border-box
section は白いカードになり、写真は丸くなり、表とフォームも形になりました。次の章では、ホバーや影でこのカードを仕上げていきます。
最後に残っている場所
実はフッターのリンクだけ、まだ手つかずのままです。ブラウザの初期状態なので黒い点が付いていて、左に大きく寄っています。ほかのリストと同じ形にそろえて、この章を終わりにしましょう。
新しいプロパティは出てきません。点を消す list-style、上に少しだけ空ける margin、そして左の余白をなくす padding を、この章で覚えたとおりに書くだけです。
.footer-links {
list-style: none;
/* ここに余白の指定を書く */
}書けたら、ページ全体をひととおり眺めてみてください。余白がそろっているか、枠線の太さがちぐはぐでないか。目で見て気持ちよく感じられたら合格です。
課題
- .footer-links に list-style の none を指定して、行頭の点を消す
- .footer-links の margin を上だけ 8px、左右と下は 0 にする
- .footer-links の padding を 0 にして、左に寄っている余白をなくす