ネガティブマージンで、固定幅のマルチカラムをレイアウトを実現する
coliss - ネガティブマージンの理解を深め、活用するテクニック集より。ネガティブマージンを使うことで、
-
- 画面サイズに合わせて伸縮するカラムと、
- 固定幅のカラム
から構成されるマルチカラムレイアウトを実現できるらしい。ということでサンプルを作って試してみました。
- サイトの例をそのまま作ってもアレなので、3ペインにしています。
- 「コンテンツを表示する可変長のカラム」と「サイドバー1(200px)」「サイドバー2(200px)」から構成されます。
- CSSを指定する上でのポイントは、以下の通りです。
- サイドバーカラムの横幅をwidthで固定、コンテンツカラムは「100%」とする。
- 各カラムを「float:left」に設定。
- コンテンツカラム(#main)の「margin-right」で「(固定幅にするサイドバーの width,margin,padding,border の合計値) * -1」を指定して、サイドバーをコンテンツカラムの上に重ねる。
- コンテンツカラムの子要素(#content)でmarginを指定して、サイドバーが重なっている部分にコンテンツを表示しないように抑制する。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <style type="text/css"> /** サイドバー */ #sidebar1, #sidebar2 { width:200px; float:left; padding: 10px; margin-left: 10px; } #sidebar1 {border: 1px solid #dd6666;} #sidebar2 {border: 1px solid #66dd66;} /** コンテンツ部分 */ #main { width:100%; float:left; /** * ネガティブマージンを使用してサイドバーを #main に重ねる。 * 固定幅にするサイドバーの width,margin,padding,border の合計値を引くこと。 */ margin-right:-464px; } #content { border: 1px solid #6666dd; padding: 10px; /** * サイドバーが重なっている部分にコンテンツを表示しないように * marginを指定して押さえる。 */ margin-right:464px; } </style> </head> <body> <div id="main"> <div id="content"> コンテンツ部分です。コンテンツ部分です。コンテンツ部分です。 コンテンツ部分です。コンテンツ部分です。コンテンツ部分です。 コンテンツ部分です。コンテンツ部分です。コンテンツ部分です。 コンテンツ部分です。コンテンツ部分です。コンテンツ部分です。 </div> </div> <div id="sidebar1">サイドバー</div> <div id="sidebar2">サイドバー2</div> </body> </html>
なお、↑ではサイドバーを右に表示していますが、左にしたい場合は、
- 全てのカラムを「float:right」にし、
- コンテンツカラムとその子要素の「margin-right」を「margin-left」に修正
すればOKです。