Movable Typeのインストール方法、Movable Type用のプラグイン、Ajaxを使ったカスタマイズ例などをご紹介しています。「あんなことできないかなぁ」、「こんなことできたらいいなぁ」を形にしていきたいですの。

Movable Type 備忘録

IE6 で min-width、max-width を実装する

Jul142007
Vote:
http://bizcaz.com/archives/2007/07/14-204848.php
Categories: JavaScript
Tags: JavaScript
Social Bookmark

こんにちわ^^

台風4号が猛威を振るってるようですね。マンニィという名前が付いてるみたい (´･д･`)
わたしの住む関東地方も明日の朝方には暴風域に入りそうな気配です（￣∇￣）
気象庁:台風情報

それにしてもでっかい台風だねぇ。
せっかくの連休ですが、おとなしく家でのんびり過ごすしかないですね。
九州、四国および、近隣にお住まいの人は気をつけてください (￣∇￣)

さて、わたしのサイトのテンプレートはご覧の通り、リキッドレイアウトになっております。
リキッドレイアウトはブラウザの横幅に合わせて変化するスタイルですが、解像度の大きいディスプレイでこのサイトを閲覧した場合、当然、ビロォ～ンと横に伸びてしまいます (;￣∇￣A

Firefox、Opera などのモダンブラウザでは、スタイルシートで以下のようにすれば対応することができますね。

#container {
min-width: 600px;/* 横幅最小値 */
max-width: 2048px;/* 横幅最大値 */
}

でも、いつものように問題児がいます。それは 'Internet Explorer 6.x' です。
今回は IE6.x でも横幅を抑制する方法についてのご紹介です。

今回のカスタマイズでは、youmosさんのところで紹介されてる、CSSとJavaScriptでmin-width max-width を実装するを参考にしました (￣∇￣)/

今までにも、IE6.x の横幅を抑制する方法は試してきましたが、こんなにスッキリした方法は知りませんでした。

'expression( 任意のJavaScript )' という IE独自の拡張機能ってのがあるようで、これを使って IE6.x の横幅を抑制してます。

IE6.x の横幅を抑制する

まずは、youmos さんのサンプルを参考に IE6.x 用のスタイルと JavaScript を、テンプレート・モジュールとして保存します。
テンプレート・モジュール
1. <?php
2. $ua = $_SERVER['HTTP_USER_AGENT'];
3. /*
4. * ブラウザが IE6.x かチェックします
5. */
6. if (0 < ereg("MSIE 6.",$ua))
7. {
8. $out = <<< DOC_END
10. <style type="text/css">
11. #container {
12. width: expression(ieXLiquidWidth());
13. }
14. </style>
16. <script type="text/javascript">
17. function ieXLiquidWidth()
18. {
19. if (640 > document.body.clientWidth)
20. {
21. /*
22. * 横幅が最小値(640px)より小さい場合、640px に抑制します
23. */
24. return "640px";
25. }
26. else if (1280 < document.body.clientWidth)
27. {
28. /*
29. * 横幅が最大値(1280px)より大きい場合、1280px に抑制します
30. */
31. return "1280px";
32. }
33. else
34. {
35. /*
36. * それ以外は抑制なしとします
37. * ここはお好みで、各自のテンプレートに合わせて 'auto' としたり、
38. * '100%' としたりします
39. */
40. return "auto";
41. }
42. }
43. </script>;
45. DOC_END;
46. echo $out;
47. }
48. ?>
赤い字の部分で横幅を抑制するスタイルを設定してます。
ieXLiquidWidth() という JavaScript を実行して、その結果を width 属性に設定するようです。

そして、その下にある JavaScript が、現在表示中のブラウザの横幅と比較して抑制します。
各自のサイトに合わせて最小値、最大値の横幅を変更します。

変更したら、テンプレート・モジュールを作成して保存します。
テンプレート・モジュール名称はお好み(たとえば、IEスタイル)でどうぞ。
次に、各テンプレートを変更します。
HTMLヘッダ(<head>～</head>)内に以下を追加します。
1. <$MTInclude module="IEスタイル"$>
追加したら保存して、変更したテンプレートをすべて再構築します。