CSSにできること―レイアウト概念編

CSSにできること第六弾。
今回は、これからWebサイトをレイアウトしていくにあたって必要になってくる概念や考え方を書いていきます。
前作：CSSにできること―レイアウト基礎の基礎編

CSSを使ってレイアウトをするにあたって、知っておいてほしい概念が２つほどあります。

まずは、divタグの紹介です。
divというのは、HTMLで用いるタグなのですが、h1（見出し1）やp（段落）のように、明確に文章の構造を指し示すものではありません。
div=division=区別する、つまり、コンテンツ同士を区分けするためのタグです。

たとえばこのブログを例に説明すると、

一番上のタイトル画像がある部分がひとつのdiv、
左のプロフィールなどが表示されている部分がdiv、
真ん中のこの文章が表示されている部分がdiv、
右のカレンダーなどが表示されている部分がdiv、
一番下のコピーライトが表示されている部分がdiv。

というふうに、コンテンツを５つのdivで区切って作られています。

どうして区切るのかというと、通常、CSSがない状態のHTMLはこのサイトのように、横に段組を組むことができません。
これを、CSSによってdivに幅や高さ、配置などを指定することによって、横の３段組レイアウトを実現しているのです。
この段組を実現するため、この３つの部分をそれぞれ違うボックスとして囲む必要があります。
この囲むためのタグがdivなのです。

Webサイトをレイアウトしていくにあたって、このdivタグはとっても重要な要素になってきます。

この「Web制作の基礎」関連の記事では、ではこれからレイアウトについて書く際に、「ボックス」という言葉を使いますが、ボックスとは、このdivタグを用いて囲んだ部分を指すと思ってください。

そして、もうひとつ大事なのはブロック要素、インライン要素という概念です。

HTMLには、ブロック要素とインライン要素という二つの要素があります。
ブロック要素の中には、ブロック要素、インライン要素、データ（文字）の３つが入りますが、
インライン要素にはインライン要素、データ（文字）のみ入れることができます。

これ、説明が非常に難しいんですが、ブロック要素はダンボール箱、インライン要素はビニール袋、データはおもちゃという感じで考えてみてください。

ダンボールボール箱には、小さいダンボール箱を入れることができますし、ビニール袋に入ったおもちゃも入ります。大きい人形だったら袋に入れずそのままダンボールに入れることもあるかもしれません。

ビニール袋にはおもちゃや人形を入れるかもしれませんが、ダンボール箱は入りませんし、いれませんよね。

と、こんなぐあいです。

この概念を使用することが多いのは、ボタンを作るときです。

aタグはインライン要素なので、幅と高さを指定しても、文字の部分しかリンクの範囲になりません。
ここがリンクです。

しかし、これをCSSでブロック要素として表示することが可能なので、
ここがリンクです。
このようにボタンっぽくすることができます。

以上、レイアウト概念編でした。
次回は、フロートレイアウト編です。