最近、メンドクサくて自分のブログを全く触っていません。こんなワダグシが何を言うかって話なんですが、一般には公開していない仕事用のツールデザインなどをメインでやっておりまして、味気ないインターフェイスを作りなおしたりしてますから・・・・カンベンしてください。ｗ
ブログレイアウトは、いわゆる定石な逆L字などに囚われず、自由なレイアウトを構築したいという思いがあるでしょう。そこで問題になってくるのが、 HTML上の構造と、スタイル上の構造のギャップ。例えば、ヘッダにあたる部分は、当然第一に来るべきで、その後本文、メニュー、フッタという感じで、プレーンなHTMLを作成するとします。が、機能面として、2ペイン、3ペインとブロックを分けていくと、出現順序とスタイルにギャップが生じて来て、どうすれば希望の形になるか分からなくなってしまうという事が意外と多いのではないでしょうか。上手くいかなくて、泣く泣くHTMLの順番を入れ替えたりする事もあるでしょう。
逆L字の場合、例えばメニュー部分とコンテンツ部分を左右に分ける時は、たいていの場合、出現順序に関係なくfloat設定を希望の方向にすれば、問題なく表示されるハズです。
では、出現順は上記のようなHTMLでヘッダとサイドメニューを左、コンテンツだけを右という場合はどうすればいいのでしょうか？
まず、ブログの特性について考えましょう。ヘッダは文書のタイトルにあたる部分なので、めったな事で内容量が増えるような事はありません。サイドメニューも、ある程度決まった量だけ増えるだけで、ある一定量からは増えない事が多いでしょう。
一方、コンテンツ部分はpost表示数は限られるかもしれませんが、毎回毎回投稿量は違うはずです。しかも、タイトルやコメント用の部品が付属するので、一回でかなり量を消費します。当然、軌道に乗ってくれば、絶えずコンテンツにいくつかの投稿内容が表示され、かなり長い状態になります。
こういった特性を考慮すると、余程無茶なデザインを考えなければヘッダがコンテンツ量を上回るような事はないでしょう。
一つの例として、具体的なソースを紹介。
<html>
<head>
<title>test</title>
<style>
* { margin:0; padding:0; }
div#wrap { width:600px; }
div#header { width:200px; height:100px; float:left; background:#aaa; }
div#contents { width:400px; background:#ccc; float:right;}
ul { width:200px; background:#888; float:left; list-style:inside; }
div#footer { width:600px; clear:both; background:#eee; }
address { text-align:center; }
</style>
</head>
<body>
<div id="wrap">
<div id="header">
<h1>test</h1>
</div>
<div id="contents">
<p>
ほげほげほげほげほげほげほげほげほげほげほげほげほげ
ほげほげほげほげほげほげほげほげほげほげほげほげほげ
ほげほげほげほげほげほげほげほげほげほげほげほげほげ。
</p>
</div>
<ul>
<li>ほげ</li>
<li>ふが</li>
<li>もふ</li>
</ul>
<div id="footer">
<address>ほげふがほげふが</address>
</div>
</div>
</body>
</html>
手抜きでサーセンｗｗｗって感じですが、この例では欠点を分かりやすくするためにヘッダの高さを大きめにしました。そう、欠点はコンテンツ内容があまりに少ないと、メニューがコンテンツ側に行ってしまう事なのです。
が、たいていの場合は、特性として述べた理由があるので大丈夫でしょう。
モダンブラウザでは、この危険を回避するべく「max-height」を指定しておき、WinIE用にはアンダーバーハックで、ヘッダより大きな数値を充てておき、内容に対して勝手に伸びる特性を利用する手もあります。
今、手元にMacIEがないので何とも言えませんが、もしかするとMacIEの場合は、全体枠に対してfloatを設定しないとレイアウトが崩れるかもしれません。(無責任な・・・ｗ)
確認しました。問題ありませんでした。
そんなわけで、この辺の事もちょっと掘り下げていこうかなと。不定期更新ですが・・・。