Category[ HTML/CSS ]

ホーム: Home
次のページ: Next

IE6用max-width・min-width

11:35

[！注意！]

この記事の情報は「やってみたらできた」というメモ程度の内容＋古い情報です。Javascriptについての知識もあまり持ち合わせていないため、深い考察などもできていません。ご了承ください。

2010/02/10
さすがにメモ程度の内容で検索の上位に表示されてしまう（なぜ……）のはどうなの、ということで記事の改訂をしようと思ったのですが、既にかなり詳しく解説されているページがありましたのでそちらを紹介させていただきます。
ずっと工事中【IE6のmax-widthとmin-widthと、expressionについての覚え書き [CSS, JavaScript]】

古い情報です。取り扱いにご注意ください。

このエントリーでは、ページ全体の幅を下限・上限有りのリキッドレイアウトとすることを目的としたTipsの紹介をしていきます。

・　・　・

「Nefert」で配布しているテンプレートは、ウィンドウサイズにあわせて幅が変化するリキッドレイアウトを採用しています。

リキッドレイアウトは、表示するウィンドウサイズに合わせて自動的に表示幅が変化するため、画面が大きい環境でも小さい環境でも（それなりに）うまく表示されるというのが利点です。ただし、リキッドレイアウトは「画面幅がどれくらい大きくなるか分からないので、用意する画像も必要以上に大きくなってしまう」という弱点もあります。

その弱点を補い、リキッドレイアウトの利点を生かすために用いられるのが、max-width、min-widthというCSSのプロパティです。

このプロパティは、それぞれ要素の最大幅・最小幅を指定することができます。
max-width、min-widthを指定することで、画面が小さい時には余裕を持たせて表示し、画面が大きいときには大きくなりすぎないように幅を抑制するといった柔軟な表示が可能になります。また、max-widthを指定することで、用意する画像サイズも必要以上に大きくならないようにすることができます。

ただし、max-width、min-widthプロパティは、IE6では対応しておらず、使うことができません。

そこで、IE6に対してはjavascriptのexpressionメソッドを用いて擬似的にmax-width、min-widthプロパティを適用させています。なお、expressionプロパティを導入すると、ブラウザの動作が重くなるという情報もあり、注意が必要です。
→expressionについて（追加情報）

動作を軽くするため、イベントハンドラを使って演算回数を減らすことが推奨されていますが、expressionは一部のイベントハンドラが動作しないといった不透明な仕様になっているため、ここでは確実に動作することを優先し、イベントハンドラの導入を取りやめました。

なお、min-widthだけを指定したいのであれば、expressionを使わずCSSのみで実現可能です。くわしくはこちら。
Lucky bag::blog: IE で min-width を指定する方法

・　・　・

まずHTMLは、<body>直下に<div id="wrapper">という包括要素をおいておきます。

<body>
  <div id="wrapper">
  
  </div>
</body>

IE7やFirefox、Opera、Safariといった、max-width、min-widthに対応しているブラウザに対しては、そのままmax-width、min-widthを指定しています。
ここでは例として、最大幅を900px、最小幅を600pxに設定していくことにします。

#wrapper {
  max-width : 900px;
  min-width : 600px;
}

IE6に対してはスターハック（IE6以下でのみ読み込まれるようにするCSSハック）を用いてexpressionメソッドを使用します。

/* hide from Mac IE \*/
* html #wrapper {
  width : 800px;
  width : expression(
  (document.documentElement.clientWidth > 900)? "900px" :
  (document.documentElement.clientWidth < 600)? "600px" :
  "auto");
  height : 1%;
}
/* end MacIE */

まず、javascriptを使用しないようにされている閲覧者に対しては、表示に問題が生じない幅で固定させてしまいます。
javascriptが使用できる場合は、expressionによってwidthの値を上書きし、幅を可変にします。
処理内容は「表示領域の幅が900px以上だったらwidth : 900px;に、600px以下だったらwidth : 600px;にするよ。それ以外は自動的に変化していいや」という感じです。「height : 1%;」はhasLayout関係でとりあえず記述してます。

「max-width IE6」という風に検索すると、「document.documentElement.clientWidth」ではなく「document.body.clientWidth」で同様の方法を紹介しているページが多数あります。これはIEの互換モード・標準モードの違いのようです（前者が標準モード、後者が互換モード用の記述）。
最初、互換モード用の記述を使ったのですが、画面サイズを変更するとある条件下でブラウザがフリーズするという状況に陥ったので、標準モード用の記述を使うようにしました。互換モードで使用する場合は互換モード用の記述にした方が良いかもしれません。

ちなみに、max-width、min-widthで直接指定している値とexpressionで指定している値が違うのは、IE6は内容にあわせて指定したサイズよりも幅が大きくなってしまうというバグがあることを考慮した結果です。
間違いでした。
「document.documentElement.clientWidth」はブラウザの表示領域の幅を返すため、max-width・min-widthを適用させる要素の親要素にwidth・margin・padding・border、自身にmargin・padding・borderなどが設定されていると、expressionで条件式で使う値と代入する値とを変えなければいけません。ここは面倒ですが、ボックスモデルにしたがって指定する値を算出してください。
たとえば、<body>にpadding-left20px;padding-right:20px;が設定されているときは、次のようにします。

/* hide from Mac IE \*/
* html #wrapper {
  width : 800px;
  width : expression(
  (document.documentElement.clientWidth > 940)? "900px" :
  (document.documentElement.clientWidth < 640)? "600px" :
  "auto");
  height : 1%;
}
/* end MacIE */

参考にしたページは以下の通りです。感謝！
[css][javascript] IE の expression を利用した min-width,max-width の実現とか
CSSとJavaScriptでmin-width max-width を実装する
ブラウザの表示領域のサイズを取得する方法。 - Enjoy*Study
ダイナミックプロパティ expression() のまとめ

[ Close ]

ClearTypeのON/OFFによる表示の差

19:54

ClearTypeはWindows XP以降のOSに採用されているフォントのアンチエイリアシングです。XP以降のOSを使用している方のほとんどがClearTypeをONにしているんじゃないでしょうか。

ClearTypeは英文フォントに対して特に効果を発揮してくれるので、ClearTypeを利用しているとついつい英文フォントを使いたくなったりするのですが、ClearTypeが使える環境での表示に慣れてしまい、その環境でフォントやフォントサイズを選んでしまうと、ClearTypeが利用していない環境では「あれ…なんかフォントかっこわるい…」ということがあったりします。

一応、ClearTypeのON/OFFは設定で変更できるのですが、毎回そんなことをして表示を確かめるのもめんどくさい！

というわけで、この際ClearTypeがON/OFFでの表示の違いをまとめ、参照しやすいようにしてみよう思います。ただ、何だかんだいって面倒なので、調べるフォントは私がよく使う以下のフォントに限定しておきます。
・Arial
・Verdana
・Trebuchet MS
・Lucida Sans Unicode
・Century Gothic

expressionについて（追加情報）

02:24

関連記事：javascriptの荒波に

この記事から引き続きexpressionについて調べていたのですが、オライリーの本でexpressionについて触れてあるのを発見し、早速（Amazonで）購入ー。届くまでの間にもう少し調べたら、Web上でもオライリーの情報が少しのっていて、テストサイトなんかもありました。これはありがたい。

http://www.marlin-arms.com/support/hpws/index7.html
驚きなのは、リンク先にある「CSS expressionを使ったカウンタ」。
expressionが評価されるたびに数が増えていくのですが、増え方ハンパ無さ過ぎ。「増え方すごいよ。ほんとだよ」とは言われていたものの、確かにこりゃ重くなるなと納得の数値です。お試しあれ。
これ見たらますますイベントハンドラの必要性を感じました。

今expression絡みで困ってること。
・expression直下でwindow.onresizeが使えるかどうか
・window.onresizeだけで初表示時はだいじょーぶなのかどうか
悩みがふえた（-ω-；）

expressionについてはこちらも詳しくて参考になります。ありがたやー。
ダイナミックプロパティ expression() のまとめ（Snow-Materiaさん）

Tag List: expression

javascriptの荒波に

01:17

Webサイトの高速化ルール7　CSSのExpression()は使わない!
ここの記事によると、expressionを使うとあらゆるイベントに対して評価が行われ、動作が遅くなってしまうのだそうです。

Nefertのテンプレートではmin-width・max-widthをIE6で適用させるためにexpressionを使っているのですが、この情報を元にイベントハンドラをつかってみよーと思ったのでした。

が、いかんせんjavascriptの知識は皆無に近いもんで(；'-')
あってるのかどうなのかすら分からない状態になってしまいました…(；'-')

expression内のjavascriptの記述はこんな感じです。
意図としては、ウィンドウサイズが変化したときにウィンドウサイズによってwidthを指定するという感じなのですが…

window.onresize = ( 
           (document.documentElement.clientWidth > 1150)? "1150px" :
           (document.documentElement.clientWidth < 600)? "600px" :
           "auto")

javascriptに強い方、これってどーなんでしょうか。
ウィンドウサイズが変化したときだけではなく、ページを最初に読み込んだときにも幅を指定する必要があるので、onloadとかで入れ子？条件分け？したほうがいいのでしょうか。
一応動作確認した段階では問題なさげなのですが…(-ω-;)

問題なければこれを全テンプレートに適用させたいなと思いますー。

ホーム: Home
次のページ: Next

Profile

Author:rimse
ペンギンを愛してやまないペンギン病患者。
LOVEペンギン。

ただいまお仕事でえらいこっちゃしてます。

ブログのテンプレ作ってました。
共有テンプレートのページで、作者「rimse」と検索すると出てきます。
シンプルめのテンプレが多いかも。

Calender

11 | 2023/12 | 01
日	月	火	水	木	金	土
-	-	-	-	-	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	-	-	-	-	-	-

RSSフィード

Search

Credit

スタイル切り替えスクリプト: [stylechange.js] Re:move!
Aquaria: [photo] "Blue Water" / fox_kiyo (Flickr)
Fiore: [photo] "Good night dahlia 2"/tanakawho (flickr)
Silence: [photo] "Noche de luna llena"/*L*u*z*a* (flickr)
Snowdance: [photo] "Snow Magic"/katmere (Flickr)
Fragment: [photo] "In the Streets"/Rodrigo Cayo (I LOVE ANALOG) (Flickr)
Day-out: [photo] "Antarctica: Penguin Hunting"/elisfanclub (Flickr)
Ad-Astra: [photo] "Kilimanjaro"/Stig Nygaard (Flickr)
Fall-time: [photo] "against the white sky"/Ozyman (Flickr); [icon] "Fugue Icons"/pinvoke
Exnihilo: [icon] "Fugue Icons"/pinvoke
Manicstar: [photo] "Elements of Light"/Fort Photo
Lostsky: [photo] "Lost to the Sky"/Drown
Daylight: [photo] "the grass is greener here"/hufse; [photo] "Seeing the Forest for the Trees"/synapse
Suspire: [photo] "Lying Cat"/d'n'c
Amaris: [photo] "Bev & Ryan"/aprillynn77
Herba: [photo] Encyclorecorder
Birdcall
CertaPax
Rera: [photo] ShippoShappo

Nefert : Category [ HTML/CSS ]

新着記事に対して新着マークをつける