フルCSSレイアウトで段組にチャレンジ！（その1）
ブログなどではすっかりおなじみになっているフルCSSレイアウトですが、一からHTMLを書く場合には表を使ったレイアウトを使っている方も多いかと思います。
フルCSSレイアウトをするに当たっての壁は、段組です。それをクリアできれば、フルCSSレイアウトは難しくありません。今回はfloatプロパティを利用した段組にチャレンジします。
今回のチャレンジ内容
チャレンジする前に
DOCTYPEによって、ブラウザでの表示モードが異なります。「DOCTYPEスイッチについて」を参照してください。
CSSで段組レイアウトをする場合、標準モードで表示するようにします。これは、互換モードの場合には幅の解釈がブラウザごとで異なるため、見栄えが大きく異なる原因になります。
また、ブラウザがデフォルトで持つスタイルシートでの余白とパディングが異なるため、配置と関係ある要素についてはリセットする必要があります。これは、CSSで以下のように指定します。
body,h1,h2,h3,p,div,ul,ol,li,dl,dd,dt,table,form,blockquote,pre,address{
margin : 0;
padding : 0;
}なお、今回のターゲットブラウザは、Internet Explorer6以上、Firefox、Opera、Safariとします。従って、ホームページ・ビルダー上でDOCTYPEを変更できないXHTML1.0ではなく、変更できるHTML4.01の方がやりやすいです。
DOCTYPEを変更するための画面は、ツール→オプションのファイルタブにあります。変更してください。今回のサンプルでは、HTML4.01 Transitonal DTD（システム識別子あり）を使います。
今回紹介するCSSのサンプルを外部ファイルを使って適用する場合、V11の場合はCSSエディタでコピー&ペーストして保存の後、スタイルシートマネージャーでCSSファイルを適用するのがもっとも手っ取り早いです。
V10までの場合は、スタイルシートマネージャーで適用していきます。効率を求めるのであれば、テキストエディタでCSSファイルを作成してから、スタイルシートマネージャーでCSSファイルを適用します。
floatプロパティに関する注意
本編の「第5章：画像を入れてみる」で画像に対する回り込みでfloatプロパティを利用しました。このときはインライン要素であるimg要素に幅が指定されていましたね。
ブロック要素に対してもfloatを適用することができますが、回り込みを指定する部分に対する幅指定は必須です。
スタイルシートマネージャーでの幅指定の方法
スタイルシートマネージャーを起動し、「追加」ボタンをクリックします。指定する対象（HTMLタグ/クラス/ID）を入力して、「位置」タブを選択します。
幅の部分に数値と単位を入れます。先に単位を指定してから数値を入れます。たとえば、150pxとしたい場合、「ピクセル」を選択後、「150」と入力です。
入力が終わったら、「OK」ボタンをクリックします。
CSSでの指定は、 width : 指定した数値と単位; となります。
ちなみに高さを指定する場合は、高さの部分に数値と単位を入れます。
CSSでの指定は、 height : 指定した数値と単位;
2段組のレイアウト（その1・メニュー先記述）
左メニュー
右メニュー
HTMLの構造（body要素内）
<body>
<div class="header">
ヘッダ部分です
</div>
<div class="main">
<div class="sidemenu">
メニュー部分です。
</div>
<div class="contents">
コンテンツ部分です。
</div>
</div>
<div class="footer">
フッタ部分です。
</div>
</body>な感じでマークアップしましょう。各部分の内容はそれぞれ適切なマークアップを施してください。
左メニュー（ページ幅700px固定）の場合のCSS
body,h1,h2,h3,p,div,ul,ol,li,dl,dd,dt,table,form,blockquote,pre,address{
margin : 0;
padding : 0;
}
body{
width : 100%; /* IEで横スクロールバーが出たときの保険 */
}
.header{
width : 700px;
height : 50px; /* サイトロゴの高さに合わせて調節してください */
}
.main{
width : 700px; /* メニューと本文をひとくくりにするためのクラス */
}
.sidemenu{
width : 150px;
float : left;
}
.contents{
width : 550px;
float : left; /* 指定しないと、FirefoxやOperaで.sidemenuの下に回り込みます */
}
.footer{
width : 700px;
clear : both;
}
.sidemenu ul{
list-style-type : none;
}右メニュー（ページ幅700px固定）の場合のCSS
body,h1,h2,h3,p,div,ul,ol,li,dl,dd,dt,table,form,blockquote,pre,address{
margin : 0;
padding : 0;
}
body{
width : 100%; /* IEで横スクロールバーが出たときの保険 */
}
.header{
width : 700px;
height : 50px;
}
.main{
width : 700px; /* メニューと本文をひとくくりにするためのクラス */
}
.sidemenu{
width : 150px;
float : right;
}
.contents{
width : 550px;
float : right; /* この指定がないとIE6でカラム落ちしてしまいます */
}
.footer{
width : 700px;
clear : both;
}
.sidemenu ul{
list-style-type : none;
}左メニューのみ幅固定の場合のCSS
body,h1,h2,h3,p,div,ul,ol,li,dl,dd,dt,table,form,blockquote,pre,address{
margin : 0;
padding : 0;
}
body{
width : 100%;
}
.header{
width : 100%;
height : 50px;
}
.main{
width : 100%;
}
.sidemenu{
width : 150px;
float : left;
}
.contents{
margin-left : 150px; /* メニュー用に左側に余白をとる */
}
.footer{
width : 100%;
clear : both;
}
.sidemenu ul{
list-style-type : none;
}右メニューのみ幅固定の場合のCSS
body,h1,h2,h3,p,div,ul,ol,li,dl,dd,dt,table,form,blockquote,pre,address{
margin : 0;
padding : 0;
}
body{
width : 100%;
}
.header{
width : 100%;
height : 50px;
}
.main{
width : 100%;
}
.sidemenu{
width : 150px;
float : right;
}
.contents{
margin-right : 150px; /* メニュー用に右側に余白をとる */
}
.footer{
width : 100%;
clear : both;
}
.sidemenu ul{
list-style-type : none;
}2段組のレイアウト（その2・本文先記述）
HTMLの構造（body要素内）
<body>
<div class="header">
ヘッダ部分です
</div>
<div class="main">
<div class="contents">
コンテンツ部分です。
</div>
<div class="sidemenu">
サイドメニュー部分です。
</div>
</div>
<div class="footer">
フッタ部分です。
</div>
</body>な感じでマークアップしましょう。各部分の内容はそれぞれ適切なマークアップを施してください。
左メニュー（ページ幅700px固定）の場合のCSS
.mainで囲まれている部分だけが変わるので、メニュー先記述との差分を示します。
.main{
width : 700px;
}
.contents{
width : 550px;
float : right; /* 本文を右に回り込ませている */
background-color : #eeeeee;
border : solid 0px #eeeeee;
}
.sidemenu{
width : 150px;
float : right; /* この指定がないとIE6でカラムが落ちます */
background-color : #ffff99;
border : solid 0px #ffff99;
}
右メニュー（ページ幅700px固定）の場合のCSS
こちらも.mainで囲まれている部分だけが変わるので、ページ先記述との差分を示します。
.main{
width : 700px;
}
.contents{
width : 550px;
float : left; /* 本文を左に回り込ませている */
background-color : #eeeeee;
border : solid 0px #eeeeee;
}
.sidemenu{
width : 150px;
float : left; /* この部分の指定がないと、FirefoxやOperaで.contentsの下に配置される */
background-color : #ffff99;
border : solid 0px #ffff99;
}
左メニューのみ幅固定の場合のCSS
こちらも.mainで囲まれている部分だけが変わるので、メニュー先記述との差分を示します。
これまでと違うのは、マージンに負の値をとっている（マイナスマージン）をとっていることです。あと、IE6では子孫セレクタのみ対応している関係で、ちょっと小細工が入ります。
.main{
width : 100%;
}
.contents{
width : 100%;
margin-left : -150px; /* 本文部分に左側へメニュー幅分のマイナスマージンをとる */
float : right; /* 右への回り込み */
background-color : #eeeeee;
border : solid 0px #eeeeee;
}
.sidemenu{
width : 150px;
float : right; /* 右への回り込み */
background-color : #ffff99;
border : solid 0px #ffff99;
}
.main .contents h1,.main .contents h2,.main .contents p{
margin-left : 150px; /* 子孫セレクタで指定している関係で、本文部分の子要素にはメニュー幅部分の左マージンをとる */
}
右メニューのみ幅固定の場合のCSS
こちらも.mainで囲まれている部分だけが変わるので、メニュー先記述との差分を示します。
マイナスマージンを利用している部分と、子孫セレクタの関係で小細工が入っているのは同じです。
.main{
width : 100%;
}
.contents{
width : 100%;
margin-right : -150px; /* 本文部分に右側へメニュー幅分のマイナスマージンをとる */
float : left; /* 左への回り込み */
background-color : #eeeeee;
border : solid 0px #eeeeee;
}
.sidemenu{
width : 150px;
float : left; /* 左への回り込み */
background-color : #ffff99;
border : solid 0px #ffff99;
}
.main .contents h1,.main .contents h2,.main .contents p{
margin-right : 150px; /* 子孫セレクタで指定している関係で、本文部分の子要素にはメニュー幅部分の右マージンをとる */
}
3段組のレイアウト
HTMLソース
<body>
<div class="header">
ヘッダ部分です
</div>
<div class="main">
<div class="sidemenu">
メニュー部分です。
</div>
<div class="contents">
コンテンツ部分です。
</div>
<div class="affiriate">
広告用スペースです。</div>
</div>
</div>
<div class="footer">
フッタ部分です。
</div>
</body>ページ幅800pxでセンタリング、メニュー、本文とも幅固定のCSS
body,h1,h2,h3,p,div,ul,ol,li,dl,dd,dt,table,form,blockquote,pre,address{
margin : 0;
padding : 0;
}
body{
width : 100%;
}
.header{
width : 760px;
height : 50px;
margin : auto; /* 標準モードなので、これでセンタリング */
}
.main{
width : 760px; /* メニューと本文と広告部分をひとくくりするためのクラス */
margin : auto;
}
.sidemenu{
width : 150px;
float : left;
}
.contents{
width : 460px;
float : left;
}
.affiriate{
width : 150px;
float : left; /* 指定しないとFirefox,Operaで落ちる可能性があります。 */
}
.footer{
width : 760px;
clear : both;
margin : auto;
}
.sidemenu ul{
list-style-type : none;
}レイアウトチェックをするときの注意
ページ編集画面での表示を当てにすると痛い目に遭います。面倒でもブラウザを起動して確認してください。
OperaやFirefoxもインストールして確認するようにします。というより、先にこれらのブラウザでチェックをしてから、Internet Explorerで確認するようにしてください。Internet ExplorerはCSSの解釈でOperaやFirefoxに劣ります。Internet Explorerで表示させて大丈夫と思っていたら、OperaやFirefoxで崩れているというという失敗は筆者自身何度もやらかしています。
