ハナモゲラボ / 試行錯誤の実験人生

日々、PCや各種デバイス、楽器等に翻弄されながら電脳の森をさまよう男の日常と様々な実験をさらりと記しております。

CSSでフレームセットを~去りゆくIE6、僕はお前を見捨てない

March 18 2012

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

ほうほう、フレームセット。
なんと懐かしい響きだろうか。
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で記述方法が違うってのもなかなか困る・・・ブツブツ・・・)

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

| Posted in CSS | Comments (0)

Post a Comment

※メールアドレス、URLは任意入力です。メールアドレスは入力しても公開されません。

« May 2017 June 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30