章末仕上げ カードの土台完成

この章で手に入れたもの

要素を箱として組み立てる道具が、ひととおりそろいました。

• 4 つの層で考える content・padding・border・margin
• 箱の中を広げる padding と、箱どうしを離す margin
• 余った幅を半分ずつ分けて中央に寄せる margin auto
• 線を引く border と、角を丸める border-radius
• 読みやすい幅で止める max-width と、親に合わせる 100%
• 幅の数え方をそろえる box-sizing の border-box

section は白いカードになり、写真は丸くなり、表とフォームも形になりました。次の章では、ホバーや影でこのカードを仕上げていきます。

最後に残っている場所

メニューと趣味には、まだ行頭の点が残っています。フッターのリンクは点に加えて左の余白も残っています。この三つのリストを整えて、この章を終わりにしましょう。

ここで list-style を学びます。これはリストの行頭記号を決めるプロパティで、none にすると点を表示しません。余白は別なので、既習の margin と padding で調整します。

.book-list {
  list-style: none; /* 書籍一覧の行頭の点を表示しない */
  padding-left: 0;
}

書けたら、ページ全体をひととおり眺めてみてください。余白がそろっているか、枠線の太さがちぐはぐでないか。目で見て気持ちよく感じられたら合格です。

1. 準備済みの .site-nav ul と .hobby-list のルールに list-style の none を追加して行頭の点を消す
2. .footer-links のルールを書き、list-style を none にする
3. .footer-links の margin を上だけ 8px、左右と下は 0 にし、padding を 0 にする