帯と中身の二段がまえ

01 / 05

色は端まで、文字は真ん中

見てきたサイトを思い出してみよう。背景の色は画面のはしからはしまで伸びているのに、文字は真ん中のせまい範囲にだけ並んでいる。

あの形は、箱を二重にして作るんだ。

02 / 05

外側の div には幅を決めない。ブロックは横いっぱいに広がるから、背景色を置くだけで端まで届く帯になる。

余白は上下だけ。padding: 48px 0; は「上下 48px・左右 0」という意味だよ。

.band {  background-color: #f6efe0;  padding: 48px 0;}

03 / 05

内側の div には幅を決めて margin: 0 auto。文字や画像はこの中にだけ入れる。

帯が変わっても内側の幅は同じにしておくと、上から下まで文字の左端がそろうよ。

.inner {  width: 600px;  margin: 0 auto;}

04 / 05

div の中に div。外が色、内が中身という役割分担になっている。

同じ形を上から順に積んでいくのが、ページを組む基本の手順だよ。

<div class="band">  <div class="inner">    <h2>今週の定食</h2>  </div></div>

05 / 05

帯ごとに色を変えると、どこまでが1つの話題かが見て分かるようになる。

この回の演習では、.page という外枠だけ先に用意してある。帯と中身のペアを自分で組み立ててみよう。