Safariでは"-webkit-box"、Firefoxでは"-moz-box"というCSSプロパティが利用できるようになっている。
これらは「ボックスレイアウト」と言われる手法に対応し、簡単に2段組や3段組のレイアウトを実現できる。
ただしプロパティ名の通りwebkitはSafariとChrome、mozはMozilla系（FirefoxやCamino等）のブラウザでしか使えないため当然これらがまともに使えるようになるにはまだまだ数年はかかるだろう。
段組のレイアウトを実現させるにはfloatプロパティとpositionプロパティを使うのが現在の主流だ。
例えば上からヘッダ、コンテンツ、フッタと3つの行があり、コンテンツ部分はサイドバーが左右に、メインのコンテンツが真ん中に分割されたレイアウトがあったとしよう。
ただ単に3段組のレイアウトを実現させるのは簡単だ。
コンテンツ中の3つの段にwidthとfloatプロパティを持たせ、その下のフッタ要素にはclearプロパティを持たせればいい。
ただし、それぞれの段はその中身によって高さが決まってしまう為背景色を設定したときに高さの揃わないみっともないレイアウトになってしまう。
この問題を解決するにはいろいろとやり方があると思うが、ボックスを入れ子にすることで対応できる。
具体的なコードは以下のようになる。
まずはHTMLファイルから
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>CSS_TEST2</title> <link href="sample02.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="wrapper"> <div id="header"> <div id="header-inner"> ヘッダ <!-- end #header-inner --></div> <!-- end #header --></div> <div id="leftwrapper"> <div id="mainwrapper"> <div id="rightwrapper"> <div id="leftcontent"> <div id="leftcontent-inner"> 左サイドバー <!-- end #leftcontent-inner --></div> <!-- end #leftcontent --></div> <div id="maincontent"> <div id="maincontent-inner"> メインコンテンツ <!-- end #maincontent-inner --></div> <!-- end #maincontent --></div> <div id="rightcontent"> <div id="rightcontent-inner"> 右サイドバー <!-- end #rightcontent-inner --></div> <!-- end #rightcontent --></div> <!-- end #rightwrapper --></div> <!-- end #mainwrapper --></div> <!-- end #leftwrapper --></div> <div id="footer"> <div id="footer-inner"> フッタ <!-- end #footer-inner --></div> <!-- end #footer --></div> <!-- end #wrapper --></div> </body> </html>
そしてCSSファイル
* {
margin: 0;
padding: 0;
}
body {
font: 75%/1.7 "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
}
#wrapper,
#header,
#leftwrapper,
#mainwrapper,
#rightwrapper,
#leftcontent,
#maincontent,
#rightcontent {
position: relative;
}
#wrapper {
width: 800px;
margin: 10px auto;
background-color: #85fdff;
overflow: hidden;
}
#header {
height: 80px;
background-color: #ffff7a;
}
#leftwrapper {
background-color: #ff84ff;
}
#mainwrapper {
left: 200px;
background-color: #ff9700;
}
#rightwrapper {
left: 400px;
background-color: #f3cc7c;
width: 800px;
}
#rightwrapper:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
#leftcontent,
#maincontent,
#rightcontent {
left: -600px;
float: left;
}
#leftcontent {
width: 200px;
}
#maincontent {
width: 400px;
}
#rightcontent {
width: 200px;
}
#footer {
text-align: center;
}
#header-inner,
#leftcontent-inner,
#maincontent-inner,
#rightcontent-inner,
#footer-inner {
padding: 10px;
}
こうすればバージョン6以降のIE、その他のモダンブラウザで同様のレイアウトを実現できる。
カテゴリ：
トラックバック(0)
トラックバックURL: http://blog.beanz-net.jp/beanz_mtos/mt-tb.cgi/38
コメントする