要素を「箱」としてあつかう

01 / 05

どの要素も四角い領域を持っている

ここまでは文字の見た目を変えてきた。でもHTMLの要素は、じつはそれぞれ四角い領域を持っている。

この領域を箱と呼ぶよ。箱の色や大きさを変えられると、ページの作り方が一気に広がる。

02 / 05

background-color は箱の背景の色を決めるプロパティ。

色をつけると、どこからどこまでがその要素の箱なのかが目で見えるようになるよ。まずはこれで箱の形を確かめよう。

p {  background-color: #ffe9b0;}

03 / 05

width は箱の横幅。px で指定するよ。

段落や見出しの箱は、指定しないと横いっぱいに広がる。width を書くと、そこで止まるようになる。

p {  background-color: #e8f4ff;  width: 200px;}

04 / 05

height は箱のたての長さ。中の文字が1行しかなくても、指定した高さぶんの箱になるよ。

背景色といっしょに指定すると、色のついた四角がはっきり見える。

p {  background-color: #e8f4ff;  width: 200px;  height: 100px;}

05 / 05

background-color width height の3つで、好きな大きさの色つきの四角が作れる。

これがページのパーツ作りの出発点。さっそく箱をならべてみよう。

h1 {  background-color: #2e7d32;  color: white;  width: 300px;  height: 60px;}