CSSレイアウト

CSSレイアウトとは

CSSレイアウト・・・CSSを用いてホームページのレイアウトを行うことです。

CSSレイアウトを理解すれば、頭に思い浮かべたとおりのページを作成できるようになるでしょう。

大切な考え方

CSSレイアウトは、ボックス(箱)を配置していくことだと思います。これは、私の表現方法ですが、ボックスとはブロック要素(特にdiv)を指していると考えてください。読み進めていただければ、なぜ、こんなことを言っているのか、理解していただけるでしょう。

ホームページのレイアウトを考えると、以下のようなものが多いのではないでしょうか。 レイアウトの構造を、薄い灰色の四角(ボックス)を用いて表現してあります。 (ヘッダーとフッターは、どのレイアウトにも含めておきました。)

ヘッダー + メインコンテンツ + フッター
ヘッダー + メインコンテンツ + フッター
あまり手を加えていない、シンプルなレイアウト。
2カラム + ヘッダー + フッター
2カラム
2カラム型です。細い方のカラムはメニューに使われることが多いです。
3カラム + ヘッダー + フッター
3カラム
3カラム型。ブログに多いタイプです。
複雑型
複雑・応用
いろいろと組み合わせた複雑なタイプ。応用型。企業のTOPページに多いかも。

上のサンプルのように、レイアウトはボックスの配置を考えることです。

ボックスをどのように配置していくか・・・これが CSSレイアウト の一番大事な考え方だと思います。