「フレームセットでいいんでよろしくお願いします。」

ほうほう、フレームセット。
なんと懐かしい響きだろうか。
Web黎明期にはそれこそ便利でみんな使ってたし、自分もいくつか作った。
しかしXHTMLで非推奨になり、検索にも非常に不利な事もあって
ここ最近はこいつを使った覚えはない。
（他社から引き継いだサイトは未だに現役のもあるけど・・・）

んじゃあ久しぶりにフレームセットを・・・と思ったけども。
yuga.jsを使って現在ページをハイライトしたりとかできねえし
モダンブラウザではposition:fixedに対応してるので、同じ事が簡単にできる昨今
もはや去りゆく運命にあるMicrosoft Internet Explorer 6に義理を通さずとも
別にいいんじゃねえのか、と頭をよぎりましたけども
ここは最後っ屁みたいなもんで、CSSでIE6にも対応させましょうと頑張りました。

とりあえず今回の案件は
■左右分割で左側がメニュー
■メニューのコンテンツボックスは縦の真ん中に位置させる
という2重の事をCSSで再現してみるべくトライ。

HTMLはこんな感じ。

?
<!-- Contents -->
<div id="main">
<p>メインコンテンツメインコンテンツ</p>
</div>
 
<!-- Menu -->
<div id="menu">
<div id="menucontents">
<h1><img src="img/logo.gif" alt="logo" width="225" height="120" /></h1>
<div id="navi">
<ul>
    <li><a href="index.html">TOP</a></li>
    <li><a href="about.html">ABOUT</a></li>
    <li><a href="report.html">REPORT</a></li>
</ul>
</div>
<p class="copyrights"><img src="img/footer.gif" alt="Footer" width="263" height="30" /></p>
</div>
</div>
<!-- /Menu -->

そしてCSSは

?
html {
height: 100%;　/*左側メニューの高さの為に100%指定*/
_overflow:hidden;
/*IE6対策、#mainの右側にスクロールバーを出さないため*/
}
 
body {
height: 100%;　/*左側メニューの高さの為に100%指定*/
_overflow:hidden;
/*IE6対策、#mainの右側にスクロールバーを出さないため*/
}
 
#menu {
position: fixed;　/*モダンブラウザはこれだけで疑似フレーム完成*/
left: 0;
top: 0;
width: 380px;
height: 100%;
min-height: 100%;
display: table; /*親ボックスをテーブル形式に（縦中央揃えのため）*/
}
 
#menucontents {　/*入れ子のメニュー*/
width: 380px;
display: table-cell; /*テーブルセル形式にして*/
vertical-align: middle;　/*縦中央揃え*/
}
 
*html #menucontents {　/*縦中央揃えのIE6専用記述*/
width: 380px;
position:absolute;
height: expression( document.getElementById("menucontents").offsetHeight+"px");
top: 50%;
margin-top: expression( "-"+document.getElementById("menucontents").offsetHeight/2+"px");
}
 
*:first-child+html div#menucontents {　/*縦中央揃えのIE7専用記述*/
width: 380px;
position:absolute;
height: expression( this.clientHeight+"px");
top: 50%;
left:0;
margin-top: expression( "-"+this.clientHeight/2+"px");
}
 
#main {
height: 100%;
min-height: 100%;
/*上方向に40px、メニュー分の380px+10pxを右方向に*/
padding: 40px 0 0 390px;
}
 
*html #main {
overflow: auto;　/*IE6用の記述（これがないとスクロールバーが出ない）　*/
}

という感じで無事に実装できました。

上下揃えで使ったdisplay:table-cellが、IE6だけでなくIE7までが非対応なのが
ちょっと困りましたけども、expressionでクライアントの高さを出して
それの50%の高さにボックスを配置するという方法で実現させました。
（6と7で記述方法が違うってのもなかなか困る・・・ブツブツ・・・）

さーて、これ他でも使う・・・・かなあ。。
一応こうして書いておけば自分も、そして誰かの役に立つのかもしれない・・・！
と思う。たぶん。