IE6でもスクロールしても動かないボックス
今回はフレームもjavascriptも使わずに、スクロールしても動かないボックスの作り方を紹介します。 実はposition:fixedというプロパティを使えば一発でできるのですが、IE6で使えないためこれを使うのは現実的ではありません。
今回紹介するのは、「height100%のボックス」のテクニックを拡張したIE6でも使える方法です。
テクニック使用後
本文をスクロールしてもメニュー部分が動かないところに注目してください。
やり方
１：HTMLを書く
HTMLはこんな感じになります。
<body>
<div id="sub">
<ul class="sample">
<li><A href="#">トップページ</A></li>
<li><A href="#">初心者の館</A></li>
<li><A href="#">私的デザイン論</A></li>
<li><A href="#">CSSテクニック</A></li>
<li><A href="#">ギャラリー</A></li>
</ul>
</div>
<div id="main">
<h1>IE6でもスクロールしても動かないボックスサンプル</h1>
<p>フレームやjavascriptを使わなくても、スクロールしても動かないボックスを作ることは可能なのです。</p>
<p>しかも、position:fixed;が効かないIE6でも使える方法です。</p>
<p>左のメニュー部分に注目してください。スクロールしても動かないでしょ。</p>
・・・略
</div>
</body>
HTML解説
特に難しいところはありません。ID="sub"にメニュー部分、ID="main"に本文を記述するだけです。
２：スタイルシートを書く
ポイントとなるスタイルシートはこんな感じになります。これ以外はお好みで追加できます。
html{
height:100%;
overflow:hidden;
}
body{
background-image:url(../../../img/back.gif);
height:100%;
width:80%;
margin:0px auto;
}
#sub{
width:104px;
height:100%;
background-color:#7F2D00;
position:absolute;
z-index:100;
}
div#main{
background-image:url(../../../img/sub-back.jpg);
height:100%;
padding-left:104px;
overflow:auto;
}
CSS解説
今回のポイントは、height100%ボックスのテクニックを使ってheight100%の#mainと#sub２つのボックスを作ったところにあります。
まず#subをposition:absolute;で配置。さらにz-index:100;を加えて常に一番上に表示するようにします。
続いて#mainにpadding-left（値は#subのwidthと同じ）を指定してサイドバーに隠れないようにします。 さらに本文が長くなったときスクロールできるようにoverflow:auto;を指定。
overflow:auto;によって出来るスクロールバーは個々のボックスにしか影響を与えないため、今回の場合は#mainだけスクロールするのに、#subはスクロールしないという状況を生み出します。
これによりスクロールしても動かないボックスができあがります。
bodyのwidthを削れば画面全体にページが広がります。その場合はhtmlにoverflow:hidden;を指定してスクロールバーを消してしまうと見栄えが良くなります。
使いこなすための＋α
このテクニックはサイドバーの背景が切れてしまう問題に悩んでいた人にとって１つの解決策になるかもしれません。
残念ながらfirefoxではホイールが使えなくなるという欠点があります。
毎度のことながらIE6,firefox,Opera7.5以外ではどのように見えるかわかりません。