(ア) ブロックのサイズを指定する

CSSで指定する時に、「ひとつのタグに対してでなくて、ここからここまでひとくくりにして指定したい」といったことがあります。

これを実現するために、<div>というタグを使います。

このタグの効果は、・・・何もありません。
文字を大きくしたりとか、太くしたりとか、段落を表したりとか、しません。
はい。ないんです。

つまり、CSSで効果をつける専用ためだけに生まれてきたタグと思ってもらって構いません。
また、このタグの特徴は、要素を四角く囲うことにあります。

たとえば、

<h1>初めてWeb入門</h1>

とあったとき、

のように、表示されていました。

それが、

<div>
<h1>初めてWeb入門</h1>
</div>

のように記述すると

と、見えない四角（薄い灰色の部分）で囲われているイメージです。

この、見えない四角のことを、ブロックと呼ぶことにします。
そして、このブロックにCSSの効果を与えていくことで、装飾をしていきます。

まず、このブロックの大きさを指定してみましょう。

HTML:
<div id="header">
<h1>初めてWeb入門</h1>
</div>

※ヘッダーはひとつしかないので、id属性を使いました。

CSS:
#header {
    height: 300px;
}

このheight:300px;がブロックの高さを決めます。

保存して、反映させてみてください。余白が生まれたでしょう？
これは、見えない四角（ブロック）の高さが300pxになったということです。

あなたも、サポートメールに参加しませんか？

『初めてWeb入門』に取り組んでくださっている方にサポートメールをお送りしています。
ここでは、『初めてWeb入門』では紹介し切れなかったウェブデザインの知恵を配信しています。
名前とメールアドレスだけで参加出来ますので、興味のある方は、ぜひご参加くださいね＾＾

※サポートメールは、いつでも解除できます。詳しくはサポートメールのページをご確認ください。