一覧を置く場所を用意する

置き場所の作り方は、もう知っている形でいい。帯と入れ物の二段がまえだよ。

• 外の箱 … 画面の左端から右端までの帯。背景色を持つ
• 内の箱 … 中身を並べる入れ物。幅を決めてまん中に置く

このレッスンでは新しい指定は出てこない。覚えた指定を組み合わせて土台にするのが練習だよ。

外の帯には背景色と上下の余白。左右の余白は 0 にしておく——左右の位置は内の箱が決めるからだよ。

前のレッスンでやった2値の書き方がそのまま役に立つね。

内の入れ物には幅と margin: 0 auto;。幅を決めないと auto は効かないから、この2行はいつもセットだよ。

ここでのコツは、.container のルールを帯ごとに書き分けないこと。同じ入れ物を全部の帯で使い回すと、どの帯でも中身の左右がぴったりそろう。

見出しも中身のひとつだから、container の中に入れる。外の帯に直接置くと左端にはりついてしまう。

入れ物の中の見出しだけを整えたいときは、.container h2 のようにスペースでつないで狙えばいい。カードを並べる前に、ここまでを組んでみよう。