CSSのfloatプロパティを使ったメニュー配置の方法の一つを紹介します。
floatプロパティは、左、あるいは右に浮動させ、その側面に内容を回り込ませることが可能です。この特性を利用して、メニューなどのコンテナを並べる、という方法です。
考え方としては、コンテンツの入った箱を左上から順番に敷き詰めていく、という感じをイメージするとわかりやすいかもしれません。
まずはHTMLソースを記述します。
<body> <h1>サイト名</h1> <h2>メニュー1</h2> <ul> <li>リスト1</li> <li>リスト2</li> <li>リスト3</li> <li>リスト4</li> <li>リスト5</li> <li>リスト6</li> <li>リスト7</li> <li>リスト8</li> <li>リスト9</li> </ul> <h2>メニュー2</h2> <ul> <li>リスト10</li> <li>リスト11</li> <li>リスト12</li> <li>リスト13</li> <li>リスト14</li> </ul> <h2>メニュー3</h2> <h3>サブタイトル1</h3> <ul> <li>リスト15</li> <li>リスト16</li> <li>リスト17</li> </ul> <h2>コメント</h2> <p>文字列</p> </body>
見出しとリストで1セットなので、これをdiv要素でマーク付けしてコンテナとし、class属性を与えてそれぞれのコンテナに意味を与えます（注意すべきことは、class名には構造に関係する名称を与えるようにすることです。「右側に置くからclass="right"」などといった名付け方だと位置を変えるたびに変更しなければならなくなります。同様に、「大きくするからclass="large"」「青にするからclass="blue"」なども避けたほうがいいでしょう。）。
<body> <h1>サイト名</h1> <div class="mainmenu"> <h2>メニュー1</h2> <ul> <li>リスト1</li> <li>リスト2</li> <li>リスト3</li> <li>リスト4</li> <li>リスト5</li> <li>リスト6</li> <li>リスト7</li> <li>リスト8</li> <li>リスト9</li> </ul> </div> <div class="menu"> <h2>メニュー2</h2> <ul> <li>リスト10</li> <li>リスト11</li> <li>リスト12</li> <li>リスト13</li> <li>リスト14</li> </ul> </div> <div class="submenu"> <h2>メニュー3</h2> <h3>サブタイトル1</h3> <ul> <li>リスト15</li> <li>リスト16</li> <li>リスト17</li> </ul> </div> <div class="comment"> <h2>コメント</h2> <p>文字列</p> </div> </body>
例ではわかりやすくするためにdiv要素の周りに点線をつけています。
メニュー1（ここではclass="mainmenu"）は、それほど幅が必要ないので30%にします。メニュー2（ここではclass="menu"）メニュー3（ここではclass="submenu"）も、さほど幅が必要ないのでそれぞれ25%とします。コメント（ここではclass="comment"）は、いろいろ書くので幅を50%とします。
.mainmenu {
width : 30%;
}
.menu, .submenu {
width : 25%;
}
.comment {
width : 50%;
}
メニュー1は縦長なので、左に配置します。メニュー2メニュー3は縦もさほど長くないのでその右に回り込ませます。コメントは、その下に潜り込む形にします。
.mainmenu, .menu, .submenu, .comment {
float : left;
}
これでは、それぞれのコンテナがきっちりで窮屈になってしまうので、それぞれ左と上に1emのマージンを与えます。
.mainmenu, .menu, .submenu, .comment {
float : left;
margin-left : 1em;
margin-top : 1em;
}
h1 {
text-align : center;
}
h2, h3 {
padding-left : .5em;
border-bottom : solid 3px green;
}
h2 {
background : yellow;
color : red;
}
ul li {
list-style-type : square;
}
注意するポイントとしましては、floatプロパティを用いた場合、幅の指定が必要であるということです。
余談ですが、
.menu {
clear : left;
}
とした場合、メニュー2のコンテナが右に回りこまず、メニュー1のコンテナの下に配置されます。が、ブラウザによる実装が違うために、見た目が変わってしまいます。
IE6での表示例
NN7での表示例
IE6ではメニュー3がメニュー1のfloat : left;を受けて、右に回りこんでいます。しかし、NN7はメニュー2でメニュー1のfloat : left;が解除されていると解釈しているために、メニュー3はメニュー2のfloat : left;を受けて、メニュー2の右側に回りこんでいます。
あるボックスが左に浮動し、ソース文書内でそれ以前に出現する要素が左浮動ボックスを生成する時、後に出現する左浮動ボックスの外左辺が、前に出現する左浮動ボックスの外右辺より右でなければならない。そうでなければ、後に出現する左浮動ボックスの外上辺が、前に出現する左浮動ボックスの外下辺より下でなければならない。右浮動ボックスも同様の規則に従う。
9.5.1 浮動体を配置する（Positioning the float: the 'float' property）
と仕様書にあるように、NN7の方が解釈が正しいと言うことになります。
2004.2.10