2カラム、3カラムサイトの可変レイアウトのHTMLとCSSまとめ

HTML

2013.06.28

2カラム、3カラムのサイトやブログを作る上で、ブラウザの伸縮に応じてコンテンツ部の幅を「可変」にする方法のまとめです。

左右メニューの幅は固定にして、コンテンツ部の幅だけがブラウザを縮めれば狭くなり、伸ばせば広くなる、という作りです。

2カラム（左メニュー固定・右コンテンツ可変）
2カラム（右メニュー固定・左コンテンツ可変）
3カラム（中央可変）

2カラム（左メニュー固定・右コンテンツ可変）

左メニューを固定させて、右カラムのコンテンツ部をブラウザの伸縮に応じて可変にします。

CSSの記述例は以下の通りです。

body	{
	margin:0;
	padding:0;
	color:#fff
}
#container	{
	width: 100%;
	margin: 0 auto;
}
#main	{
	width: 100%;
	float: left;
	margin-right: -180px;
}
#contents	{
	width: 100%;
	height:600px;
	background:#ddd;
	float: right;
	margin-left: -180px
}  
.section	{
	min-width:100px;
	height:600px;
	background:#333;
	position: relative;
	margin-left:200px;
	padding: 0;
}  
#sidebar1	{
	width: 180px;
	height:600px;
	background:#888;
	float: left;
}

body {

margin:0;

padding:0;

color:#fff

}

#container {

width: 100%;

margin: 0 auto;

}

#main {

width: 100%;

float: left;

margin-right: -180px;

}

#contents {

width: 100%;

height:600px;

background:#ddd;

float: right;

margin-left: -180px

}

.section {

min-width:100px;

height:600px;

background:#333;

position: relative;

margin-left:200px;

padding: 0;

}

#sidebar1 {

width: 180px;

height:600px;

background:#888;

float: left;

}

続いてHTML側の記述例は以下の通りです。

<body>
<div id="container">

<div id="main">  
<div id="contents">  
	<div class="section">  
    右コンテンツ部
	</div>  
</div>  
        
<div id="sidebar1">  
    左サイドメニュー
</div>  
</div>  
   
</div>  
</body>

<body>

右コンテンツ部

</div>

左サイドメニュー

</div>

</body>

左メニュー（#sidebar1）のwidthを180pxにしており、右コンテンツの中身（.section）には+20pxの余白を含めた、200pxの左マージンを当てています。

2カラム（左メニュー固定・右コンテンツ可変）のデモ

2カラム（右メニュー固定・左コンテンツ可変）

右メニューを固定させて、左カラムのコンテンツ部をブラウザの伸縮に応じて可変にします。

CSSの記述例は以下の通りです。

body	{
	margin:0;
	padding:0;
	color:#fff
}
#container	{
	width: 100%;
	margin: 0 auto;
}
#main	{
	width: 100%;
	float: right;
	margin-left: -180px;
}
#contents	{
	width: 100%;
	height:600px;
	background:#ddd;
	float: left;
	margin-right: -180px
}  
.section	{
	min-width:100px;
	height:600px;
	background:#333;
	position: relative;
	margin-right:200px;
	padding: 0;
}  
#sidebar2	{
	width: 180px;
	height:600px;
	background:#888;
	float: right;
}

body {

margin:0;

padding:0;

color:#fff

}

#container {

width: 100%;

margin: 0 auto;

}

#main {

width: 100%;

float: right;

margin-left: -180px;

}

#contents {

width: 100%;

height:600px;

background:#ddd;

float: left;

margin-right: -180px

}

.section {

min-width:100px;

height:600px;

background:#333;

position: relative;

margin-right:200px;

padding: 0;

}

#sidebar2 {

width: 180px;

height:600px;

background:#888;

float: right;

}

続いてHTML側の記述例は以下の通りです。

<body>
<div id="container">

<div id="main">  
<div id="contents">  
	<div class="section">  
    左コンテンツ部
	</div>  
</div>  
        
<div id="sidebar2">  
    右サイドメニュー
</div>  
</div>  
   
</div>  
</body>

<body>

左コンテンツ部

</div>

右サイドメニュー

</div>

</body>

右メニュー（#sidebar2）のwidthを180pxにして、左コンテンツの中身（.section）には+20pxの余白を含めた、200pxの右マージンを当てています。

左メニュー固定時とは逆の指定になります。

2カラム（右メニュー固定・左コンテンツ可変）のデモ

3カラム（中央可変）

左右のメニューを固定させて、中央のコンテンツ部をブラウザの伸縮に応じて可変にします。

CSSの記述例は以下の通りです。

body	{
	margin:0;
	padding:0;
	color:#fff
}
#container	{
	width: 100%;
    min-width:700px;
	margin: 0 auto;
}
#main	{
	width: 100%;
	float: left;
	margin-right: -180px;
}
#contents	{
	width: 100%;
	height:600px;
	background:#ddd;
	float: right;
	margin-left: -180px
}  
.section	{
	min-width:100px;
	height:600px;
	background:#333;
	position: relative;
	margin: 0 200px;
	padding: 0;
}  
#sidebar1	{
	width: 180px;
	height:600px;
	background:#888;
	float: left;
}  
#sidebar2	{
	width: 180px;
	height:600px;
	background:#111;
	float: right;
}

body {

margin:0;

padding:0;

color:#fff

}

#container {

width: 100%;

min-width:700px;

margin: 0 auto;

}

#main {

width: 100%;

float: left;

margin-right: -180px;

}

#contents {

width: 100%;

height:600px;

background:#ddd;

float: right;

margin-left: -180px

}

.section {

min-width:100px;

height:600px;

background:#333;

position: relative;

margin: 0 200px;

padding: 0;

}

#sidebar1 {

width: 180px;

height:600px;

background:#888;

float: left;

}

#sidebar2 {

width: 180px;

height:600px;

background:#111;

float: right;

}

続いてHTML側の記述例は以下の通りです。

<body>
<div id="container">

<div id="main">  
<div id="contents">  
	<div class="section">  
    コンテンツ部
	</div>  
</div>  
        
<div id="sidebar1">  
    左サイドメニュー
</div>  
</div>  
   
<div id="sidebar2">  
    右サイドメニュー
</div>  

</div>  
</body>

<body>

コンテンツ部

</div>

左サイドメニュー

</div>

右サイドメニュー

</div>

</body>

左右のサイドメニュー（#sidebar1、#sidebar2）は180pxの幅で、中央コンテンツ部の中身（.section）には左右それぞれ+10pxの余白を含めた200pxのマージンを設けています。

あとは必要に応じて、ブラウザを縮め過ぎた場合のレイアウト崩壊を防ぐ為に min-widthでサイトの最低幅を指定しておくと良いと思います。

3カラム（中央可変）のデモ