【HTML・CSS】3段組み(3カラム)レイアウトの様々なバリエーションでの作成方法について
Webページでよく見られるレイアウトについては、1カラム、2カラム、3カラムのどれかがほとんどです。
とりわけ、情報が多い場合等については3カラムレイアウトがよく用いられます。
こちらのサイトも3カラムレイアウトで作成されております。
メインコンテンツの上部に画像を埋め込み、目立つように工夫しています。
3カラムレイアウトをかなりシンプルに表すと、以下のようなイメージです。

今回は、いくつかのバリエーションを例に3カラムレイアウトを作成してみます。
3カラムレイアウトの作成方法
2カラムレイアウトの繰り返しで作成可能
3カラムレイアウトは、2カラムレイアウトの繰り返しで実現できます。
2カラムレイアウトは、2つの要素にそれぞれ「float:left」、「float:right」で左右で配置します。
2カラムのイメージは以下の通りです。

参考までに、上記のコードは以下の通りです。
<div id="wrapper">
<div id="A">A</div>
<div id="B">B</div>
</div>
#wrapper{
width:500px;
height:500px;
margin:0 auto;
}
#wrapper #A{
/*文字、幅及び高さ、背景色の決定*/
text-align:center;
font-size:18px;
background-color:#ffffdb;
height:100%;
float:left;/*左周り*/
width:75%;
}
#wrapper #B{
/*文字、幅及び高さ、背景色の決定*/
text-align:center;
font-size:18px;
background-color:#aae4ff;
height:100%;
float:right;/*右周り*/
width:25%;
}
3カラムレイアウトの作成
では、実際に3カラムレイアウトを作成していきます。
下準備は、以下の通りです。
- C要素を追加
- AとBをひとまとめにして、名前を付ける。(A+B=Dとします)
これにより、以下のように2カラムレイアウトの繰り返しを行う事が出来ます。
- 「D(A+B)」と「C」の2つの要素を左右に配置
- 「D(A+B)」内のAとBをそれぞれ左右に配置
ではそれぞれのパターンで見ていきます。
パターン1
A⇒75%(中央)
B⇒25%(左)
C⇒25%(右)
レイアウトは以下の通りです。

コードは以下の通りです。
<div id="wrapper">
<div id="D">
<div id="A">A</div>
<div id="B">B</div>
</div>
<div id="C">C</div>
</div>
#wrapper{
width:500px;
height:500px;
margin:0 auto;
}
#D{
height:100%;/*高さの決定*/
float:left;/*左回り*/
width:75%;/*幅の75%をA+B(残りの25%はC)*/
}
#C{
/*文字、幅及び高さ、背景色の決定*/
text-align:center;
font-size:18px;
background-color:#ffe9e2;
height:100%;
float:right;/*右回り*/
width:25%;/*Cの幅=100%-(D分の幅)=25%*/
}
#D #A{
/*文字、幅及び高さ、背景色の決定*/
text-align:center;
font-size:18px;
background-color:#ffffdb;
height:100%;
float:right;/*D内で右周り*/
width:75%;/*Aの幅=親要素Dの幅75%の内75%*/
}
#D #B{
/*文字、幅及び高さ、背景色の決定*/
text-align:center;
font-size:18px;
background-color:#aae4ff;
height:100%;
float:left;/*D内で左周り*/
width:25%;/*Bの幅=親要素Dの幅75%の内25%*/
}
パターン2
A⇒75%(左)
B⇒25%(中央)
C⇒25%(右)
レイアウトは以下の通りです。

コードは以下の通りです。
HTMLに関しては先ほどと同様なので割愛します。
また、CSSについてもそれぞれの要素のfloatの値を変えただけでそれ以外に変更点はありません。
#wrapper{
width:500px;
height:500px;
margin:0 auto;
}
#D{
height:100%;/*高さの決定*/
float:left;/*左回り*/
width:75%;/*幅の75%をA+B(残りの25%はC)*/
}
#C{
/*文字、幅及び高さ、背景色の決定*/
text-align:center;
font-size:18px;
background-color:#ffe9e2;
height:100%;
float:right;/*右回り*/
width:25%;/*Cの幅=100%-(D分の幅)=25%*/
}
#D #A{
/*文字、幅及び高さ、背景色の決定*/
text-align:center;
font-size:18px;
background-color:#ffffdb;
height:100%;
float:left;/*D内で左周り*/
width:75%;/*Aの幅=親要素Dの幅75%の内75%*/
}
#D #B{
/*文字、幅及び高さ、背景色の決定*/
text-align:center;
font-size:18px;
background-color:#aae4ff;
height:100%;
float:right;/*D内で右周り*/
width:25%;/*Bの幅=親要素Dの幅75%の内25%*/
}
パターン3
A⇒75%(右)
B⇒25%(中央)
C⇒25%(左)
レイアウトは以下の通りです。

コードは以下の通りです。先程と同様CSSのみ記載します。
#wrapper{
width:500px;
height:500px;
margin:0 auto;
}
#D{
height:100%;/*高さの決定*/
float:right;/*右回り*/
width:75%;/*幅の75%をA+B(残りの25%はC)*/
}
#C{
/*文字、幅及び高さ、背景色の決定*/
text-align:center;
font-size:18px;
background-color:#ffe9e2;
height:100%;
float:left;/*左回り*/
width:25%;/*Cの幅=100%-(D分の幅)=25%*/
}
#D #A{
/*文字、幅及び高さ、背景色の決定*/
text-align:center;
font-size:18px;
background-color:#ffffdb;
height:100%;
float:right;/*D内で右周り*/
width:75%;/*Aの幅=親要素Dの幅75%の内75%*/
}
#D #B{
/*文字、幅及び高さ、背景色の決定*/
text-align:center;
font-size:18px;
background-color:#aae4ff;
height:100%;
float:left;/*D内で左周り*/
width:25%;/*Bの幅=親要素Dの幅75%の内25%*/
}
終わりに
今回は、大元であるwrapper要素の幅を固定幅の500pxに設定しました。
補足ですが、これを100%に設定すると画面幅の大きさにより可変となります。
ディスカッション
コメント一覧
まだ、コメントがありません