IEで固定座標を指定する方法

category-icon

さて、アナウンスしていたように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-fixed-position1.htmlLink

 なお、ソースを見てもらえれば分かりますが、最初に通常のスタイルシートを指定して、後からIEだけが認識するコメント構文を用いて、IE7未満のIEブラウザだけがこのコメント部分のCSSを解釈するようにしています。ちなみに[if lt IE 7]ltless 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-fixed-position2.htmlLink

デモを(IEで)見ると何だか固定しているはずのDIVがスクロール毎にガタガタとちらつきますね。これは格好悪いです。同じ現象は、例えばJavaScriptを駆使してsetTimeoutで固定座標(フロートメニュー)を実現するスクリプトでも見られます(まぁこれはタイムラグがその要因ですが)。これは回避したいです。でちゃんと方法があります。次のようにします。

body {
  background: url(null) fixed;
}

このように、ただBODYタグの背景画像を固定表示するだけでOKです。ここでは画像ファイルは指定していませんが、お好きな画像を指定しても良いです。ポイントは fixed を指定することです。では、これも指定したデモを見てみましょう。

   →ie-fixed-position3.htmlLink

今度はうまく「きっちりと」固定してくれていると思います。

 いかがでしょうか? 2通りの方法を示しましたが、ポイントはIEだけに別のスタイルシートを指定するということです。ここでは条件コメント文を用いてIEだけを分岐させました。他にもIEだけ認識すれば良いという部分では、有名なテクニックとしてはアンダースコアハックGというものがありますが、これは同じスタイルシートに場違いな指定が入り乱れるのでおススメしません。大元のスタイルシートは標準に沿って書いておき、CSS2をきちんとサポートしたIE7が出てきたらこのコメント部分を削除する、というのがスマートではないでしょうか。

— posted by martin at 11:39 pm   commentComment [10]  pingTrackBack [4]

この記事に対するコメント・トラックバック [14件]

scrollUp1. OJIN Website — 2006/03/19@03:29:59

「IEで固定座標を指定する方法」は、目から鱗の斬新な考え方で、大変勉になりました。がさて、
早速、自分のページに使わせて頂いたのですが、、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]-->

よろしくお願い申し上げます。

2. OJIN Website — 2006/03/20@11:07:37

すみません、お騒がせいたしました、、、。
ーーー解決しました。
一番上の1行を消してはいけなかったんですね、、。
ありがとうございました!

3. Hip-Lyc Website — 2006/07/16@23:01:55

構想から一週間以上かかりましたが、やっとこリニューアル終了しました。 と言っても
続き »

4. PukiWiki (PukiWiki/TrackBack 0.3) Website — 2006/07/18@15:22:07

treemenu javascript † http://jeanne.wankuma.com/tips/Link http://jeanne.wankuma.com/scripts/treemenu.jsLink ↑popup † Rag.d project (url だいたいこんなかんじ) - http://www.ragd.netLink pukiwiki plus のポップアップ制御 - http://pukiwiki.cafelou...Link
続き »

5. jin — 2006/08/31@16:37:07

DOCTYPE宣言についてですが、宣言なしではうまく表示されない理由がいまいち分かりません。
もしよろしければ教えていただきたく思います。

scrollUpOwner Comment martin Website  2006/09/01@05:48:46

これは、「IE !DOCTYPE  宣言 スイッチ」あたりでGoogleを検索すると、良いかと思います。これはIEだけに限らないのですが、DOCTYPEの種類によって、標準・互換モードを切り替えたりする仕様のブラウザが多いです。
こことか参照Link
IEに関しては、
IE6研究会Link
 や
ボックスモデルと DOCTYPE スイッチLink
などがまとまっているかも。
 

7. mimi — 2006/09/18@03:37:04

こんにちは。
横にスクロールさせた場合の固定は不可能でしょうか?
上記の方法で縦スクロール時は固定できたのですが横がどうしても。。。
:(

8. mimi — 2006/09/18@06:58:02

すいません、自己解決しました。
こんな感じで。

<!-- http://devnull.tagsoup.com/quirksmodeLink -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">Link
<html xmlns="http://www.w3.org/1999/xhtml"Link xml:lang="ja" lang="ja">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-jp" />
<meta http-equiv="content-style-type" content="text/css" />

<style type="text/css" media="screen">

body { margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; overflow-y: hidden; }

div#sidebar { position: absolute; top: 100px; left: 300px; }

div#content { overflow-y: hidden; overflow-x: scroll; }

@media screen{
body>div#sidebar { position: fixed; }
}

</style>

<!--[if lt IE 7]>
<style type="text/css" media="screen">

div#content
{
width: 100%; height: 100%; overflow-y: hidden; overflow-x: scroll;
}

</style>
<![endif]-->

</head>

<body>

<div id="content">
<img src="img.jpg" width="1000" height="1000"></div>

<div id="sidebar">
<img src="img.jpg" width="222" height="45">
</div>

</body>
</html>


とても参考になりました。。。。:)

9. Journal InTime Website — 2006/09/28@11:21:26

なるほどねえ。
続き »

10. fag — 2006/12/10@02:51:48

はじめまして!:D
とっても参考になりました!ありがとうございます!
一つ質問ですが,ウインドウ下に固定させるにはどうしたらよいでしょうか?

scrollUp11. hasegawahiroshi Website — 2007/10/20@19:44:46

IE6での固定方法、探してました。
「1」の方法は知っていたんですが、他で実現したい表現とぶつかってしまって、「2」にしたところ動きました。
ありがとうございます!

Owner Comment martin Website  2007/10/20@22:03:31

どうもです。デモのリンクが切れていたので復活させました。

13. sarutaros Website — 2008/02/16@02:45:40

(TT)
firefoxが読まないはずの部分を
読んでるような;;
またきます;;

14. Holiday Webmaster Blog Website — 2008/04/12@00:46:19

Amazon Review Searchでは、検索結果ページと個別商品ページを2カラムでレイアウトしており、メインカラムは幅可変、サイドバーは幅固定としています。 何故、メインカラムを幅可変にしてサイドバーを幅固定にしているかというと、大きな声では言...
続き »

この記事に対する TrackBack URL:

設定によりTB元のページに、こちらの記事への言及(この記事へのリンク)がなければ、TB受付不可となりますのであらかじめご了承下さい。

コメントをどうぞ。 名前(ペンネーム)と画像認証のひらがな4文字は必須で、ウェブサイトURLはオプションです。

ウェブサイト (U):

タグは使えません。http://・・・ は自動的にリンク表示となります

:) :D 8-) ;-) :P :E :o :( (TT) ):T (--) (++!) ?;w) (-o-) (**!) ;v) f(--; :B l_P~

     
T: Y: ALL: Online:
Created in 0.0209 sec.
prev
2005.9
next
        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