• RSS

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

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

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;
}  

続いてHTML 側の記述例は以下の通りです。
<body>
<div id="container">

<div id="main">  
<div id="contents">  
	<div class="section">  
    右コンテンツ部
	</div>  
</div>  
        
<div id="sidebar1">  
    左サイドメニュー
</div>  
</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;
}  

続いてHTML 側の記述例は以下の通りです。
<body>
<div id="container">

<div id="main">  
<div id="contents">  
	<div class="section">  
    左コンテンツ部
	</div>  
</div>  
        
<div id="sidebar2">  
    右サイドメニュー
</div>  
</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;
}

続いて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>
左右のサイドメニュー(#sidebar1、#sidebar2)は180px の幅で、中央コンテンツ部の中身(.section)には左右それぞれ + 10px の余白を含めた200px のマージンを設けています。

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



  • このエントリーをはてなブックマークに追加
  • follow us in feedly

コメント

コメントを残す