忘れもしないあれはいつだったか（by麺通団）。
このサイトのデザインをMovableTypeお仕着せのものでなく、自作CSSで段組レイアウトしようと思った時があった。その際はいろんなサイトを参考にした挙句にpositionを使うかfloatを使うかで迷いに迷ったが、結局はfloatで組む方向で落ち着くこととなった。
で、今日久しぶりに思い返してみたら、あれほど迷ったのにも関わらず「positionを使わずにfloatを使うことになった理由」をすっかり忘れてしまっていた。なんだか無性に悔しかったので、今日は思い出しがてら自分用にメモっておくことにする。
以後、使うHTMLソースはこんな感じ。
全体構成としてはヘッダ部分(header)・メイン部分(main)・フッタ部分(footer)の3箇所に分かれ、さらにメイン部分が右コンテンツ部分(contents)と左メニュー部分(menu)に分かれるという、いたってノーマルな2段組スタイル。
<div id="header">
<h1>タイトル</h1>
</div>
<div id="main">
<div id="contents">
コンテンツ
<!--contents--></div>
<div id="menu">
メヌー
<!--menu--></div>
<!--main--></div>
<div id="footer">
ふったー
<!--footer--></div>
</body>
このHTMLソースを用いて段組レイアウトを実現するには、下記のどちらかのCSSを適用すればいい。
■floatで組む場合のCSS■
div#header, div#main, div#footer {
width: 800px;
}
div#contents {
width: 600px;
float: right;
}
div#menu {
width: 200px;
float: left;
}
div#footer {
clear: both;
}
■positionで組む場合のCSS■
div#header, div#main, div#footer {
width: 800px;
}
div#main {
position: relative;
}
div#contents {
width: 600px;
margin-left: 200px;
}
div#menu {
width: 200px;
position: absolute;
top: 0px;
left: 0px;
}
当然、上記にあるどちらの手法を使っても同じようなものができる。じゃあどっち使ってもいいじゃないかと思いたいのはヤマヤマなのだが、実はどちらも一長一短がある。で、色々実験してみて当方が出した結論は「floatとpositionで迷ったら、フッタの有無で決めちゃえ」というものだ。
なぜこういう結論に至ったかというと、floatを用いた場合は狙った箇所にフッタを配置することができるのだが、positionを用いた場合は狙った箇所にフッタを配置できるとは限らないからだ。
細かく説明すると、floatの場合はfooter要素にclear: both; を指定しさえすれば、確実にmain要素の直下にfooter要素を配置することができる。main要素のheightはcontents要素、もしくはmenu要素のどちらか長いほうにあわせられるため、その真下にfooter要素がくるイメージだ。これは理解しやすい。
対してpositionの場合は、position: absolute;が指定された要素(menu要素)は絶対配置されるため、結果としてmain要素のheightは内包しているcontents要素のheightにあわせられることになる。つまり、contents要素よりmenu要素の方が長い場合でも、main要素のheightは短い方のcontents要素にあわせられる、ということになる。
結果として、contents要素よりmenu要素の方が長い場合、menu要素にfooter要素が重なって表示されてしまうのだ。ややこしいな。
これを踏まえた上で色々考えた結果、コンテンツ部分がメニュー部分より長くなる、なんて断言はできっこなかったので、当方のサイトでは結局floatを用いることになったのであった。
最後にfloatとpositionのメリット・デメリットをまとめてみると、
■float■
メリット：フッタが狙ったトコに入れられて便利
デメリット：コンテンツの最中に<br clear="all" />とか< ～ style="clear: both">とかが入るとレイアウトが崩れる（ただしMac版ブラウザのみ、らしい。環境がないので未確認）
■absolute■
メリット：絶対指定した箇所は崩れようがない
デメリット：フッタが絶対指定したモノと重なるおそれがある。また<body>を親要素として絶対指定すると、検索エンジンのキャッシュで表示した際にスゴイことになってしまうので、<body>以外の相対指定(position: relative)された要素の子要素として絶対指定しといたほうが訪問者にとっては親切
あと、これらの手法を使う際はNN4.xでチェックしないほうが精神的によろしいかと思います。泣きたくなるので。
HTMLとCSSってこうやって使うんですね・・・とっても参考になりました。
CSSでの段組は、tableタグでの段組と比べてHTMLソースが非常にスッキリして気持ちがええです。うまく作れるようになれば、レイアウト変更はCSSを変えればいいだけになるのでとってもラクになるかと。
そもそもHTMLは見栄えを記述するものではなく、意味を記述するものです。なので、tableでの段組は見栄えがHTMLに埋め込まれてしまうのでよろしくない、というのが最近の流れです。