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 [24]  pingTrackBack [4]

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

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カラムでレイアウトしており、メインカラムは幅可変、サイドバーは幅固定としています。 何故、メインカラムを幅可変にしてサイドバーを幅固定にしているかというと、大きな声では言...
続き »

15. スーパーコピー時計直営店 Website — 2017/03/07@12:18:59

唯一の正しいURL:JpSuperGreat7.CoM_スーパーコピー時計,レプリカ腕時計販売[日本人気店]JpSuperGreat7「15% OFFセール開催中!」。スーパーコピー時計直営店.会員登録頂くだけで2000ポイント 取得できます!
唯一の正しいURL:www.jpsupergreat7.com/
レプリカ時計 http://www.jpsupergreat7.com/Link

scrollUp16. ロレックススーパーコピー腕時計 Website — 2017/03/08@14:55:48

ロレックススーパーコピー腕時計_レプリカロレックス(N級) JPwatch365.CoM 責任者:山田!当店は【1~8万円】スーパーコピー全商品一覧ロレックスのみを取り扱っていますので、品質も2年間保証しています!
ロレックスコピー http://www.jpwatch365.com/iowares/watches-io1/Link
ロレックス エクスプローラー http://www.jpwatch365.com/iowares/watches-small-io3/Link

17. スーパーコピー Website — 2017/03/09@14:08:53

唯一の正しいURL:www.JPwatch365.CoM!!スーパーコピー時計,人気ロレックスコピー時計大特価通販JPwatch365.CoM!!!ロレックススーパーコピー時計,Hublotコピーなどのスーパーコピー品を扱っております。世界のブランド腕時計スーパーコピーが大特価!
スーパーコピー http://www.jpwatch365.com/Link
ロレックススーパーコピー http://www.jpwatch365.com/iowares/watches-io1/Link

18. スーパーコピーパネライ Website — 2017/03/10@14:32:57

パネライスーパーコピー腕時計_レプリカパネライ(N級) JPwatch365.CoM
スーパーコピーパネライ http://www.jpwatch365.com/iowares/watches-io2/Link

19. スーパーコピー全商品一覧ウブロ Website — 2017/03/11@18:16:17

ウブロスーパーコピー腕時計_レプリカウブロ(N級),責任者:山田!当店は【1~8万円】スーパーコピー全商品一覧ウブロのみを取り扱っていますので、品質も2年間保証しています!
スーパーコピーウブロ http://www.jpwatch365.com/iowares/watches-io4/Link

20. ロレックススーパーコピー Website — 2017/03/13@14:36:05

スーパーコピーロレックス代引き専売店NO.1!
ロレックススーパーコピー http://www.keepgoing365.com/tokei/b1/Link
ロレックス サブマリーナ http://www.keepgoing365.com/tokei/s5/Link

scrollUp21. スーパーコピー代引き専売店NO.1 Website — 2017/03/14@17:51:05

スーパーコピー時計,スーパーコピー代引き専売店NO.1!
偽物時計 http://www.keepgoing365.com/Link

22. パネライコピー品の販売専門 Website — 2017/03/16@11:35:06

スーパーコピーパネライ代引き専売店NO.1!世界大人気 激安パネライスーパーコピーの新作品を探していますか。パネライコピー品の販売専門ショップです.
パネライコピー http://www.keepgoing365.com/tokei/b2/Link
時計コピー http://www.keepgoing365.com/Link

23. スーパーコピーガガミラノ Website — 2017/03/16@15:51:41

スーパーコピーガガミラノ代引き専売店NO.1!.
スーパーコピーガガミラノ http://www.keepgoing365.com/tokei/b11/Link

24. スーパーコピーロレックス Website — 2017/03/17@16:59:30

ロレックススーパーコピー腕時計_レプリカロレックス(N級) JPwatch365.CoM 責任者:山田!当店は【1~8万円】スーパーコピー全商品一覧ロレックスのみを取り扱っていますので、品質も2年間保証しています!
スーパーコピーロレックス http://www.jpwatch365.com/iowares/watches-io1/Link

25. スーパーコピーロレックス Website — 2017/03/17@17:10:40

ロレックススーパーコピー腕時計_レプリカロレックス(N級) JPwatch365.CoM 責任者:山田!当店は【1~8万円】スーパーコピー全商品一覧ロレックスのみを取り扱っていますので、品質も2年間保証しています!
スーパーコピーロレックス http://www.jpwatch365.com/iowares/watches-io1/Link

scrollUp26. レプリカ腕時計販売 Website — 2017/03/20@18:39:37

スーパーコピー時計,レプリカ腕時計販売[日本人気店]JpSuperGreat7
スーパーコピー http://www.jpsupergreat7.com/Link
ロレックスコピー販売 http://www.jpsupergreat7.com/pewares/watches-pe1/Link

27. 人気スーパーコピーブランド時計 Website — 2017/03/22@11:44:54

スーパーコピー時計通販、人気スーパーコピーブランド時計一覧! 世界大人気激安時計スーパーコピーの新作品を探していますか。ブランド時計コピー品の販売専門ショップです
レプリカ時計 http://www.always777.com/Link

28. 代引き専売店 Website — 2017/03/24@12:41:25

スーパーコピー時計,スーパーコピー代引き専売店NO.1! 世界大人気 激安時計スーパーコピーの新作品を探していますか。ブランド時計コピーの販売専門ショップです スーパーコピー時計
http://www.keepgoing365.com/Link

この記事に対する 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.0219 sec.
prev
2017.7
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 31