2カラム、3カラムサイトの可変レイアウトのHTMLとCSSまとめ
スポンサード
まずはCSS の記述例は以下の通りです。
続いてHTML 側の記述例は以下の通りです。
2カラム(左メニュー固定・右コンテンツ可変)のデモ
まずはCSS の記述例は以下の通りです。
続いてHTML 側の記述例は以下の通りです。
左メニュー固定時とは逆の指定になります。
2カラム(右メニュー固定・左コンテンツ可変)のデモ
まずはCSS の記述例は以下の通りです。
続いてHTML 側の記述例は以下の通りです。
あとは必要に応じて、ブラウザを縮め過ぎた場合のレイアウト崩壊を防ぐ為に
3カラム(中央可変)のデモ
スポンサード
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カラム(中央可変)のデモ
スポンサード
コメント