さて、アナウンスしていたようにIEでposition: fixed;を実現する手法について簡単にまとめておきます。まぁこのテクニックもIE7が出るまでのつなぎです。やり方は大まかには2通りあって、純粋にCSS(スタイルシート)のみで指定する方法とJavaScript(正確にはMS独自のDynamic property ダイナミックプロパティーと呼ばれるもの)を使うやり方です。
まず、1.CSSのみの方法から
1.基本的な考え方は、HTML(あるいはBODY)タグのスクロールバーを非表示にして、かわりにDIVタグ(HTMLならBODYタグ)のスクロールバーを表示させる方法です。具体的な記述は以下のようになります。
html {
overflow: hidden;
}
body {
height: 100%;
overflow: auto;
}
次に、固定表示したいDIVタグ(タグは何でも良いが)ですが、IE以外のモダンなブラウザであれば、例えば<div id="fixme">を固定したいなら
div#fixme {
position: fixed;
}
とするところを、IEでは絶対座標にしてあげればいいです。
position: absolute;
基本的にはこれで事足ります。具体的なデモを見てみましょう。
なお、ソースを見てもらえれば分かりますが、最初に通常のスタイルシートを指定して、後からIEだけが認識するコメント構文を用いて、IE7未満のIEブラウザだけがこのコメント部分のCSSを解釈するようにしています。ちなみに[if lt IE 7]のltは less than ですね。
<!--[if lt IE 7]>
このコメント部分はバージョン7未満のIEしか解釈しない
<![endif]-->
実際には外部ファイルとしてCSSを用意して、この条件コメント構文で読み込ませるのがメンテナンス的にも良いでしょう。
では、次はダイナミックプロパティーを用いたやり方を紹介します。
2.Dynamic propertyはマイクロソフトの独自拡張なので、まぁ眉唾っぽいところもありますが、IE限定と割り切れば便利なものです。expression というやつを利用します。上のデモと同じことをするには、やはり条件コメント文の中で以下のようにします。
<!--[if lt IE 7]>
<style type="text/css">
#fixed {
position: absolute;
top: expression(eval(document.documentElement.scrollTop+50));
left: 100px;
}
</style>
<![endif]-->
では、まずはこれだけ指定したデモを見てみましょう。
デモを(IEで)見ると何だか固定しているはずのDIVがスクロール毎にガタガタとちらつきますね。これは格好悪いです。同じ現象は、例えばJavaScriptを駆使してsetTimeoutで固定座標(フロートメニュー)を実現するスクリプトでも見られます(まぁこれはタイムラグがその要因ですが)。これは回避したいです。でちゃんと方法があります。次のようにします。
body {
background: url(null) fixed;
}
このように、ただBODYタグの背景画像を固定表示するだけでOKです。ここでは画像ファイルは指定していませんが、お好きな画像を指定しても良いです。ポイントは fixed を指定することです。では、これも指定したデモを見てみましょう。
今度はうまく「きっちりと」固定してくれていると思います。
いかがでしょうか? 2通りの方法を示しましたが、ポイントはIEだけに別のスタイルシートを指定するということです。ここでは条件コメント文を用いてIEだけを分岐させました。他にもIEだけ認識すれば良いという部分では、有名なテクニックとしてはアンダースコアハックGというものがありますが、これは同じスタイルシートに場違いな指定が入り乱れるのでおススメしません。大元のスタイルシートは標準に沿って書いておき、CSS2をきちんとサポートしたIE7が出てきたらこのコメント部分を削除する、というのがスマートではないでしょうか。
1. OJIN — 2006/03/19@03:29:59
早速、自分のページに使わせて頂いたのですが、、IEではまったく固定されてくれません。、、こりゃなんか間違えたかな?と、martin先生のデモページを映してみると、、キチンと固定されている、、。
ーーーということは、、ブラウザの問題ではなくて、ページに何か問題があるのか??
ということで、3日ほどあれこれいじくり回してみましたが、状態は変わりません。ーーーNNではちゃんと固定されます。
お忙しいとは存じますが、ウェブサイト欄に入れましたのがその実験ページのURLです。ご検分をいただけますと真に幸甚であります。
CSSを外部ファイルにしてありますが、その内容は如下です。
<style type="text/css">
* {margin:0;padding:0;}
#fixed {
position:fixed;
top:0px;left:0px;
width:100%;height:21px;
padding:0px;
background-color: yellow;
color: #333;
font: 800 15pt Verdana;
}
#scroll p {margin: 0em 0 0em 0px;}
</style>
<!--[if lt IE 7]>
<style type="text/css">
html {
overflow: hidden;
}
body {
height: 100%;
overflow: auto;
}
#fixed {
position:absolute;
}
</style>
<![endif]-->
よろしくお願い申し上げます。