ホームページ作成講座 STEP6　CSSのボックスレイアウト（たまちゃんHTMLのおうち）

CSSを使ってボックスレイアウトを作る

■STEP6　　CSSのボックスレイアウトサンプルを表示

ヘッダー、フッター、サイドバーをCSSで構築する方法です。

★ボックスを指定しないレイアウト

ボックスレイアウトを全く考えない場合は、ブラウザの画面幅いっぱいの表示となります。

ソースコード（HTML)

<body>
ボックスを指定しない場合ボックスを指定しない場合ボックスを指定しない場合ボックスを指定しない場合ボックスを指定しない場合ボックスを指定しない場合ボックスを指定しない場合ボックスを指定しない場合ボックスを指定しない場合ボックスを指定しない場合ボックスを指定しない場合ボックスを指定しない場合ボックスを指定しない場合ボックスを指定しない場合ボックスを指定しない場合ボックスを指定しない場合ボックスを指定しない場合ボックスを指定しない場合ボックスを指定しない場合ボックスを指定しない場合ボックスを指定しない場合ボックスを指定しない場合ボックスを指定しない場合ボックスを指定しない場合ボックスを指定しない場合ボックスを指定しない場合ボックスを指定しない場合ボックスを指定しない場合ボックスを指定しない場合ボックスを指定しない場合ボックスを指定しない場合ボックスを指定しない場合ボックスを指定しない場合ボックスを指定しない場合ボックスを指定しない場合ボックスを指定しない場合ボックスを指定しない場合ボックスを指定しない場合ボックスを指定しない場合ボックスを指定しない場合ボックスを指定しない場合ボックスを指定しない場合ボックスを指定しない場合ボックスを指定しない場合
</body>

表示

サンプル

このページのトップ

★幅固定の1ボックスレイアウト

メインボックスとして１つdiv要素としてボックスを指定します。
メインボックス専用のdiv要素として「main_box」と名前を付けています。
幅を固定するには、「width: 700px;」と絶対値で横幅を指定します。
中央配置するには、「margin: 0 auto;」と指定します（上下のマージンが0、左右がauto）。
指定しなければ左寄せになり、右寄せにしたい場合は、「margin: 0 0 0 auto;」と指定します（上右下のマージンが0、左がauto）。明示的に左寄せにしたい場合は、「margin: 0 auto 0 0;」と指定します（上右下のマージンが0、左がauto）。

ソースコード（CSSファイル）

div#main_box {
width: 700px; /* 幅 */
background: #33FF66; /* 背景は明るい緑 */
margin: 0 auto; /* センタリング */
}

ソースコード（HTML)

<body>
　　<div id = "main_box">
幅固定の1ボックスの場合幅固定の1ボックスの場合幅固定の1ボックスの場合幅固定の1ボックスの場合幅固定の1ボックスの場合幅固定の1ボックスの場合幅固定の1ボックスの場合幅固定の1ボックスの場合幅固定の1ボックスの場合幅固定の1ボックスの場合幅固定の1ボックスの場合幅固定の1ボックスの場合幅固定の1ボックスの場合幅固定の1ボックスの場合幅固定の1ボックスの場合幅固定の1ボックスの場合幅固定の1ボックスの場合幅固定の1ボックスの場合幅固定の1ボックスの場合幅固定の1ボックスの場合幅固定の1ボックスの場合幅固定の1ボックスの場合幅固定の1ボックスの場合幅固定の1ボックスの場合幅固定の1ボックスの場合幅固定の1ボックスの場合幅固定の1ボックスの場合幅固定の1ボックスの場合幅固定の1ボックスの場合幅固定の1ボックスの場合幅固定の1ボックスの場合幅固定の1ボックスの場合幅固定の1ボックスの場合幅固定の1ボックスの場合幅固定の1ボックスの場合幅固定の1ボックスの場合幅固定の1ボックスの場合幅固定の1ボックスの場合幅固定の1ボックスの場合幅固定の1ボックスの場合幅固定の1ボックスの場合幅固定の1ボックスの場合幅固定の1ボックスの場合幅固定の1ボックスの場合
　　</div>
</body>

表示

サンプル

このページのトップ

★幅可変の1ボックスレイアウト

幅を可変にするには、「width: 70%;」と相対値で横幅を指定します。
最小値「min-width: 300px;」を指定することにより、幅が狭くなりすぎることを防ぎます。ブラウザのウィンドウがこれより小さくなった場合はスクロールバーが表示されます。
HTMLファイルは幅固定のときと変わりません。

ソースコード（CSSファイル）

div#main_box {
width: 70%; /* 幅 */
min-width: 400px; /* 幅（最小値） */
background: #33FF66; /* 背景は明るい緑 */
margin: 0 auto; /* センタリング */
}

ソースコード（HTML)

<body>
　　<div id = "main_box">
幅可変の1ボックスの場合幅可変の1ボックスの場合幅可変の1ボックスの場合幅可変の1ボックスの場合幅可変の1ボックスの場合幅可変の1ボックスの場合幅可変の1ボックスの場合幅可変の1ボックスの場合幅可変の1ボックスの場合幅可変の1ボックスの場合幅可変の1ボックスの場合幅可変の1ボックスの場合幅可変の1ボックスの場合幅可変の1ボックスの場合幅可変の1ボックスの場合幅可変の1ボックスの場合幅可変の1ボックスの場合幅可変の1ボックスの場合幅可変の1ボックスの場合幅可変の1ボックスの場合幅可変の1ボックスの場合幅可変の1ボックスの場合幅可変の1ボックスの場合幅可変の1ボックスの場合幅可変の1ボックスの場合幅可変の1ボックスの場合幅可変の1ボックスの場合幅可変の1ボックスの場合幅可変の1ボックスの場合幅可変の1ボックスの場合幅可変の1ボックスの場合幅可変の1ボックスの場合幅可変の1ボックスの場合幅可変の1ボックスの場合幅可変の1ボックスの場合幅可変の1ボックスの場合幅可変の1ボックスの場合幅可変の1ボックスの場合幅可変の1ボックスの場合幅可変の1ボックスの場合幅可変の1ボックスの場合幅可変の1ボックスの場合幅可変の1ボックスの場合幅可変の1ボックスの場合
　　</div>
</body>

表示

サンプル

このページのトップ

★ヘッダーとフッターの3ボックのスレイアウト

ヘッダーとフッターを加えると、ボックスが３つになります。
この３ボックスを含む全体のボックスを最初に指定します。
この全体のボックスは、ここでは「container」という名前を付けます。ヘッダー、フッターは「heder」、「footer」とし「main_box」を入れて４つのボックスを div要素で定義します。ここでは幅固定で説明します。可変にする場合は、「container」を可変（width: 70%; とか）で指定します。
ヘッダー、フッター、メインボックスの「width: 100%;」は、親要素、つまり全体（container）と同じ幅ということです。
同じ幅のものを三つ同じ幅の箱に順番に配置する、問題ないですね。

ソースコード（CSSファイル）

div#container { /* 全体 */
width: 700px; /* 幅 */
background: #9900FF;/* 背景は紫 */
margin: 0 auto; /* センタリング */
}

div#heder { /* ヘッダー */
width: 100%; /* 幅 */
background: #FFCC66;/* 背景はオレンジ */
}

div#main_box { /* メインボックス*/
width: 100%; /* 幅 */
background: #33FF66;/* 背景は明るい緑 */
}

div#footer { /* フッター */
width: 100%; /* 幅 */
background: #FF66FF;/* 背景はピンク */
}

ソースコード（HTML)

<body>
<div id = "container">
<div id = "heder">
ヘッダーヘッダーヘッダーヘッダーヘッダーヘッダーヘッダーヘッダーヘッダーヘッダーヘッダーヘッダーヘッダーヘッダーヘッダーヘッダーヘッダーヘッダーヘッダーヘッダーヘッダーヘッダーヘッダーヘッダーヘッダーヘッダーヘッダーヘッダーヘッダーヘッダー
</div>
<div id = "main_box">
メインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックス
</div>
<div id = "footer">
フッターフッターフッターフッターフッターフッターフッターフッターフッターフッターフッターフッターフッターフッターフッターフッターフッターフッターフッターフッターフッターフッターフッターフッターフッターフッターフッターフッターフッターフッター
</div>
</div>
</body>

表示

サンプル

このページのトップ

★幅固定の2カラムのボックスレイアウト

幅固定の横2ボックスとヘッダーとフッターを加えると、全4ボックスのレイアウトです。
メインボックスを左右に分割し、左側を「main_box」の名前をそのまま引き継ぎ、右側をサイドバーと想定しますが「right_box」という名前にしましょう。
この全体のボックス「container」、ヘッダー「heder」、フッター「footer」は、変わりません。
物理的に、「main_box」の幅と「right_box」の幅を足した値が「container」の幅になれば良いことは想像付きますが、横に並べるにはどうすればよいのでしょうか。
スタイルシートのfloat属性を使います。
「float: left;」と指定すれば、その要素は左寄せで配置され、その後の要素がその右側に回り込みます。
回り込みを解除するには、「clear: left;」とし、回り込みを解除します。「clear: left;」を指定した要素はこの要素自体の回り込みが解除され、その後の要素の回り込みも行わないことになります。
また、右側の要素を「float: right;」と右寄せで指定していませんが、幅がちょうどであれば結果は同じです。この場合、回り込みを解除は左右両方を行わなければならないので、解除要素には「clear: all;」と指定すればよいでしょう。
ただ、「float: left;」と「float: right;」を混在させると、複雑なレイアウトになれば訳がわからなくなってしまう可能性があります。素直に左に順番に並べるよう統一したほうがよいように思えます。
clearプロパティにはマイナーなバグがいくつかあるようですが、この「自分自身の回り込み」と「その後の回り込み」の２局面があるため理解が難しく、結果的にわけのわからないレイアウトになってしまったりするのではないのでしょうか。
これを避けるには、positionプロパティを用いるレイアウトがあります。これについては別途記載しますが、複雑なレイアウトをデザインする場合は、こちらも検討したほうが良さそうです。

ソースコード（CSSファイル）

div#container { /* 全体 */
width: 700px; /* 幅 */
background: #9900FF;/* 背景は紫 */
margin: 0 auto; /* センタリング */
}

div#heder { /* ヘッダー */
width: 700px; /* 幅 */
background: #FFCC66;/* 背景はオレンジ */
}

div#main_box { /* メインボックス*/
width: 550px; /* 幅 */
background: #33FF66;/* 背景は明るい緑 */
float: left; /* フローティング */
}

div#right_box { /* 右サイド*/
width: 150px; /* 幅 */
background: #33FFFF;/* 背景は水色 */
float: left; /* フローティング */
}

div#footer { /* フッター */
width: 700px; /* 幅 */
background: #FF66FF;/* 背景はピンク */
clear: left; /* フローティング解除 */
}

ソースコード（HTML)

<body>
<div id = "container">
<div id = "heder">
ヘッダーヘッダーヘッダーヘッダーヘッダーヘッダーヘッダーヘッダーヘッダーヘッダーヘッダーヘッダーヘッダーヘッダーヘッダーヘッダーヘッダーヘッダーヘッダーヘッダーヘッダーヘッダーヘッダーヘッダーヘッダーヘッダーヘッダーヘッダーヘッダーヘッダー
</div>
<div id = "main_box">
メインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックス
</div>
<div id = "right_box">
右サイド右サイド右サイド右サイド右サイド右サイド右サイド右サイド右サイド右サイド右サイド右サイド右サイド右サイド右サイド右サイド右サイド右サイド右サイド右サイド右サイド右サイド右サイド右サイド右サイド右サイド右サイド右サイド右サイド右サイド
</div>
<div id = "footer">
フッターフッターフッターフッターフッターフッターフッターフッターフッターフッターフッターフッターフッターフッターフッターフッターフッターフッターフッターフッターフッターフッターフッターフッターフッターフッターフッターフッターフッターフッター
</div>
</div>
</body>

表示

サンプル

このページのトップ

★幅可変の2カラムのボックスレイアウト

幅を可変にしたの横2ボックスとヘッダーとフッター、全4ボックスのレイアウトです。
「main_box」と「right_box」の両方の幅が可変の場合です。
HTMLソースコードは、両方固定のときと同じです。
ここで、「main_box」の幅＋「right_box」の幅を、80%＋20% としていますが、内部計算によりこの値が100%を超えてしまう場合があるようです。これを防止するためには、80%＋19% などとして、誤差に対する余裕を持たせるようにします。このとき「right_box」が「float: left;」により左寄せにしている場合は右側の境界線がそろわなくなります。これを嫌う場合は、「right_box」を「float: right;」にして右寄せにして1%のすきまは「main_box」と「right_box」に置くようにします。

ソースコード（CSSファイル）

div#container { /* 全体 */
width: 100%; /* 幅 */
background: #9900FF;/* 背景は紫 */
margin: 0 auto; /* センタリング */
}

div#heder { /* ヘッダー */
width: 100%; /* 幅 */
background: #FFCC66;/* 背景はオレンジ */
}

div#main_box { /* メインボックス*/
width: 80%; /* 幅 */
background: #33FF66;/* 背景は明るい緑 */
float: left; /* フローティング */
}

div#right_box { /* 右サイド*/
width: 20%; /* 幅 */
background: #33FFFF;/* 背景は水色 */
float: left; /* フローティング */
}

div#footer { /* フッター */
width: 100%; /* 幅 */
background: #FF66FF;/* 背景はピンク */
clear: left; /* フローティング解除 */
}

表示

サンプル

このページのトップ

★サイドバー幅固定、メイン幅可変の2カラムのボックスレイアウト

サイドバー幅は固定、メイン幅を可変にしたの横2ボックスとヘッダーとフッター、全4ボックスのレイアウトです。
「main_box」の幅が可変で、「right_box」の幅が固定の場合です。
「main_box」の可変の幅は、直接指定できないので、幅100%のダミーのボックス「dummy_main_box」を用意し、これを親要素として、右側をmargin-rightでサイドバー分空けることにより本当（実際）のメインボックスを作成します。

ソースコード（CSSファイル）

div#container { /* 全体 */
width: 100%; /* 幅 */
background: #9900FF;/* 背景は紫 */
margin: 0 auto; /* センタリング */
}

div#heder { /* ヘッダー */
width: 100%; /* 幅 */
background: #FFCC66;/* 背景はオレンジ */
}

div#dummy_main_box { /* ダミーメインボックス（土台）*/
width: 100%; /* 幅 */
margin-right: -150px;/* ネガティブマージンで右側を空ける */
background: #CCCCFF;/* 背景はグレー */
float: left; /* フローティング */
}

div#main_box { /* 本当のメインボックス */
margin-right: 150px; /* マージンで右側を空ける */
background: #33FF66;/* 背景は明るい緑 */
}

div#right_box { /* 右サイド*/
width: 150px; /* 幅 */
background: #33FFFF;/* 背景は水色 */
float: left; /* フローティング */
}

div#footer { /* フッター */
width: 100%; /* 幅 */
background: #FF66FF;/* 背景はピンク */
clear: left; /* フローティング解除 */
}

ソースコード（HTML)

<body>
<div id = "container">
<div id = "heder">
ヘッダーヘッダーヘッダーヘッダーヘッダーヘッダーヘッダーヘッダーヘッダーヘッダーヘッダーヘッダーヘッダーヘッダーヘッダーヘッダーヘッダーヘッダーヘッダーヘッダーヘッダーヘッダーヘッダーヘッダーヘッダーヘッダーヘッダーヘッダーヘッダーヘッダー
</div>
<div id = "dummy_main_box">
<div id = "main_box">
メインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックス
</div>
</div>
<div id = "right_box">
右サイド右サイド右サイド右サイド右サイド右サイド右サイド右サイド右サイド右サイド右サイド右サイド右サイド右サイド右サイド右サイド右サイド右サイド右サイド右サイド右サイド右サイド右サイド右サイド右サイド右サイド右サイド右サイド右サイド右サイド
</div>
<div id = "footer">
フッターフッターフッターフッターフッターフッターフッターフッターフッターフッターフッターフッターフッターフッターフッターフッターフッターフッターフッターフッターフッターフッターフッターフッターフッターフッターフッターフッターフッターフッター
</div>
</div>
</body>

表示

サンプル

このページのトップ

★幅固定の3カラムのボックスレイアウト

幅固定の横3ボックスとヘッダーとフッターを加えると、全5ボックスのレイアウトです。
幅固定の横2ボックスと同様で、左側もサイドバーと想定し「left_box」という名前にしましょう。
全体のボックス「container」、ヘッダー「heder」、フッター「footer」は、変わりません。
あとは、「main_box」の幅と「right_box」と「left_box」の幅を足した値が「container」の幅になれば良いです。
やはり「float: left;」と指定してやって横に並べるのも同じです。

ソースコード（CSSファイル）

div#container { /* 全体 */
width: 700px; /* 幅 */
background: #9900FF;/* 背景は紫 */
margin: 0 auto; /* センタリング */
}

div#heder { /* ヘッダー */
width: 700px; /* 幅 */
background: #FFCC66;/* 背景はオレンジ */
}

div#left_box { /* 左サイド*/
width: 150px; /* 幅 */
background: #CCCCCC;/* 背景は灰色 */
float: left; /* フローティング */
}

div#main_box { /* メインボックス*/
width: 400px; /* 幅 */
background: #33FF66;/* 背景は明るい緑 */
float: left; /* フローティング */
}

div#right_box { /* 右サイド*/
width: 150px; /* 幅 */
background: #33FFFF;/* 背景は水色 */
float: left; /* フローティング */
}

div#footer { /* フッター */
width: 700px; /* 幅 */
background: #FF66FF;/* 背景はピンク */
clear: left; /* フローティング解除 */
}

ソースコード（HTML)

<body>
<div id = "container">
<div id = "heder">
ヘッダーヘッダーヘッダーヘッダーヘッダーヘッダーヘッダーヘッダーヘッダーヘッダーヘッダーヘッダーヘッダーヘッダーヘッダーヘッダーヘッダーヘッダーヘッダーヘッダーヘッダーヘッダーヘッダーヘッダーヘッダーヘッダーヘッダーヘッダーヘッダーヘッダー
</div>
<div id = "left_box">
左サイド左サイド左サイド左サイド左サイド左サイド左サイド左サイド左サイド左サイド左サイド左サイド左サイド左サイド左サイド左サイド左サイド左サイド左サイド左サイド左サイド左サイド左サイド左サイド左サイド左サイド左サイド
</div>
<div id = "main_box">
メインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックス
</div>
<div id = "right_box">
右サイド右サイド右サイド右サイド右サイド右サイド右サイド右サイド右サイド右サイド右サイド右サイド右サイド右サイド右サイド右サイド右サイド右サイド右サイド右サイド右サイド右サイド右サイド右サイド右サイド右サイド右サイド右サイド右サイド右サイド
</div>
<div id = "footer">
フッターフッターフッターフッターフッターフッターフッターフッターフッターフッターフッターフッターフッターフッターフッターフッターフッターフッターフッターフッターフッターフッターフッターフッターフッターフッターフッターフッターフッターフッター
</div>
</div>
</body>

表示

サンプル

このページのトップ

★両サイド幅固定、メイン幅可変の3カラムのボックスレイアウト

両サイド幅固定、メイン幅可変の横3ボックスとヘッダーとフッターを加えると、全5ボックスのレイアウトです。
サイドバー幅固定、メイン幅可変の2カラムの重ね合わせで、実現します。
メインボックスを、さらに左サイドバーと本当のメインボックスに分けています。

ソースコード（CSSファイル）

div#container { /* 全体 */
width: 100%; /* 幅 */
background: #9900FF;/* 背景は紫 */
margin: 0 auto; /* センタリング */
}

div#heder { /* ヘッダー */
width: 100%; /* 幅 */
background: #FFCC66;/* 背景はオレンジ */
}

div#left_box { /* 左サイド*/
width: 150px; /* 幅 */
background: #CCCCCC;/* 背景は灰色 */
float: left; /* フローティング */
}

div#main_box { /* 左サイドを持ったメインボックス */
margin-right: 150px;/* マージンで右側を空ける */
background: #000000;/* 背景は黒 */
float: left; /* フローティング */
}

div#main_main_box { /* 本当のメインボックス */
margin-left: 150px; /* マージンで左側を空ける */
background: #33FF66;/* 背景は明るい緑 */
}

div#right_box { /* 右サイド*/
width: 150px; /* 幅 */
background: #33FFFF;/* 背景は水色 */
float: left; /* フローティング */
}

div#footer { /* フッター */
width: 100%; /* 幅 */
background: #FF66FF;/* 背景はピンク */
clear: left; /* フローティング解除 */
}

ソースコード（HTML)

<body>
<div id = "container">
<div id = "heder">
ヘッダーヘッダーヘッダーヘッダーヘッダーヘッダーヘッダーヘッダーヘッダーヘッダーヘッダーヘッダーヘッダーヘッダーヘッダーヘッダーヘッダーヘッダーヘッダーヘッダーヘッダーヘッダーヘッダーヘッダーヘッダーヘッダーヘッダーヘッダーヘッダーヘッダー
</div>
<div id = "dummy_main_box">
<div id = "main_box">
<div id = "left_box">
左サイド左サイド左サイド左サイド左サイド左サイド左サイド左サイド左サイド左サイド左サイド左サイド左サイド左サイド左サイド左サイド左サイド左サイド左サイド左サイド左サイド左サイド左サイド左サイド左サイド左サイド左サイド
</div>
<div id = "main_main_box">
メインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックスメインボックス
</div>
</div>
</div>
<div id = "right_box">
右サイド右サイド右サイド右サイド右サイド右サイド右サイド右サイド右サイド右サイド右サイド右サイド右サイド右サイド右サイド右サイド右サイド右サイド右サイド右サイド右サイド右サイド右サイド右サイド右サイド右サイド右サイド右サイド右サイド右サイド
</div>
<div id = "footer">
フッターフッターフッターフッターフッターフッターフッターフッターフッターフッターフッターフッターフッターフッターフッターフッターフッターフッターフッターフッターフッターフッターフッターフッターフッターフッターフッターフッターフッターフッター
</div>
</div>
</body>

表示

サンプル

このページのトップ

CSSによる段組（マルチカラム）レイアウト講座さんを参考にさせていただきました。
こちらでのメイン幅可変の3カラムのボックスレイアウトは、ここで紹介している方法とは若干違います。
ちなみにこのサイトの大部分はレイアウト講座さんの方法で書いています。一部ここで紹介している方法で書いているページもあります。ちなみに、もともとここで紹介している方法をレイアウト講座さんの方法で書き換えたのですが、こちらで紹介している方法の方が思いがけないレイアウトの崩れが少ないように思えます。

サンプル６スタイルシート６

ステップ６で学んだ内容だけでホームページを作りました。ボタンをクリックしてください。スタイルシートは、一度保存してからかまたは直接見てください。

▼STEP7へ

このページのトップ

ホームページ作成講座 STEP6 CSSのボックスレイアウト

CSSを使ってボックスレイアウトを作る

ホームページ作成講座　　　STEP6　CSSのボックスレイアウト