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