• 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

コメント

コメントを残す