さて、アナウンスしていたようにIEでposition: fixed; を実現する手法について簡単にまとめておきます。まぁこのテクニックもIE7が出るまでのつなぎです。やり方は大まかには2通りあって、純粋にCSS (スタイルシート)のみで指定する方法とJavaScript (正確にはMS独自のDynamic property ダイナミックプロパティーと呼ばれるもの)を使うやり方です。
まず、1.CSSのみの方法から
１．基本的な考え方は、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-fixed-position1.html
なお、ソースを見てもらえれば分かりますが、最初に通常のスタイルシートを指定して、後からIEだけが認識するコメント構文を用いて、IE7未満のIEブラウザだけがこのコメント部分のCSSを解釈するようにしています。ちなみに
[if lt IE 7] の
lt は
less than ですね。
<!--[if lt IE 7]>
このコメント部分はバージョン7未満のIEしか解釈しない
<![endif]-->
実際には外部ファイルとしてCSSを用意して、この条件コメント構文で読み込ませるのがメンテナンス的にも良いでしょう。
では、次はダイナミックプロパティーを用いたやり方を紹介します。
２．
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-fixed-position2.html
デモを(IEで)見ると何だか固定しているはずのDIVがスクロール毎にガタガタとちらつきますね。これは格好悪いです。同じ現象は、例えばJavaScriptを駆使して
setTimeout で固定座標(フロートメニュー)を実現するスクリプトでも見られます(まぁこれはタイムラグがその要因ですが)。これは回避したいです。でちゃんと方法があります。次のようにします。
body {
background: url(null) fixed;
}
このように、ただBODYタグの背景画像を固定表示するだけでOKです。ここでは画像ファイルは指定していませんが、お好きな画像を指定しても良いです。ポイントは fixed を指定することです。では、これも指定したデモを見てみましょう。
→ie-fixed-position3.html
今度はうまく「きっちりと」固定してくれていると思います。
いかがでしょうか？ ２通りの方法を示しましたが、ポイントはIEだけに別のスタイルシートを指定するということです。ここでは条件コメント文を用いてIEだけを分岐させました。他にもIEだけ認識すれば良いという部分では、有名なテクニックとしてはアンダースコアハック G というものがありますが、これは同じスタイルシートに場違いな指定が入り乱れるのでおススメしません。大元のスタイルシートは標準に沿って書いておき、CSS2をきちんとサポートしたIE7が出てきたらこのコメント部分を削除する、というのがスマートではないでしょうか。
15件のレスポンス [+]
とか）。純正の開発バージョンということらしいですが。インストールの仕方は各ブログを見ていただくとして、なかなかいい感じです。小さいサイズでもきちんとエイリアス処理が効いて(ClearType有効時)、これまでの、情けないくらいギザギザのMS P ゴシックなどよりは、はるかに見やすく、これでマックと肩を並べられるかもです。
→
Y:
ALL:
Comments