Archives[ 2008年12月11日 ]

ホーム: Home

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 ]

スポンサーサイト

Exnihiloの構造見直し

01:52

いろいろなテンプレートに幅可変／固定切り替えを導入しようとしたのですが、Exnihiloはちょっと特殊な構造で作っていたのでそのままだとうまくいきませんでした。
ということで、構造をかなり大幅に変更して現在テストを行っています。
もし表示が崩れていたり、おかしいなぁと言うのがありましたら遠慮無く教えてくださいませー！

いろんな部分で多分私にしかわからないであろうこだわりを貫いたところ大がかりな作業に…orz　超疲れた。

Snowdance、Day-out、Blancが登録されましたが、blancがダウンロードされなさ過ぎで笑えました。
さすがにシンプルにしすぎたかもです。自分としてはあれくらいでちょうど良いんですけど。手抜きと思われちゃったかな。「シンプル」って難しいなぁ。
こんなにダウンロードされていないと表示崩れてるのかなとか不安になったりします…。

snowdance

01:30

クリックでテンプレートのプレビューができます。

★ 基本情報

テンプレート名 : snowdance
最新バージョン : 2.4

更新履歴 - Update history

09/10/08 : 2.3→2.4: [Modify] 全記事一覧表示に対応; [Modify] 「前後の記事へのリンク部分」のスタイル変更; [Modify] プラグイン3の出力方法を変更; [Modify] 非常に長い記事の場合に生じるFirefoxのバグに対応; [Modify] 簡易カスタマイズ一部改良; [Modify] pre、hrなどのデフォルトスタイル変更
09/08/01 : 2.23→2.3: [Bug Fix] カラム幅調整用カスタマイズのミス修正
09/07/20 : 2.22→2.23: [Bug Fix] 簡易カスタマイズ項目内のコメントミス修正
（軽微な更新のため、更新通知はしておりません）
09/07/05 : 2.21→2.22: [Modify] 簡易カスタマイズ項目に「プラグインカラムの横並び解除」を追加
（軽微な更新のため、更新通知はしておりません）
09/07/04 : 2.2→2.21: [Bug Fix] 独自クラスのスタイル指定を修正
（軽微な更新のため、更新通知はしておりません）
09/07/02 : 2.1.0→2.2: [Bug Fix] 追記スクリプト仕様変更など。; [Modify] IE8用の微調整; [Modify] 独自クラス追加
09/03/30 : 2.0.0→2.1.0: [Bug Fix] HTMLの記述ミス修正

※フッター部などにバージョン表記がされていないテンプレートは、ver.2.0.0より古いものになっております。

白の季節へ。
画像差し替えでインパクトの強いオリジナルテンプレートになります。
左右カラムの切り替え、幅可変／固定の切り替えのほか、様々なカスタマイズ項目を用意。
プラグイン3はトップページの記事上部に表示されます。
バトン用専用スタイルあり。プラグインON/OFF対応。XHTML 1.0 Transitional。jQuery1.3.2をテンプレート内で使用しています。

Mac版InternetExplorerで閲覧する際には、スタイルを適用しないよう設定されています（snowdance 2.2以降）。ご了承ください。

★ テンプレート更新通知機能つき

更新機能・見本更新があると、ブログのフッタ部分に★マークがつきます。たまに確認していただけるとありがたいです。

★ カスタマイズ情報

カラムの幅の割合を変更する ※ver2.1.0以下
↑プラグインを一列で表示させる方法もこの記事中に載せてあります
タイトル画像をランダムで変更させる

★ 簡易カスタマイズ項目

以下の項目は簡易カスタマイズとしてまとめられています。詳しくはスタイルシート上部を参照してください。
（バージョンによって項目に多少差があります）

フォントの設定（ver.2.4以上）
- 基本となるフォント
- ブログタイトルのフォント
フォントサイズの変更
- 全体の文字サイズ（ver.2.4以上）
- ~~タイトルエリアの文字サイズ~~（ver.2.4で廃止）
- タイトルの文字サイズ（ver.2.4以上）
- ブログ紹介文の文字サイズ（ver.2.4以上）
- メインカラムの文字サイズ
- 記事の本文の文字サイズ
- サブカラムの文字サイズ
文字色の変更
- ~~基本となる文字色~~（ver.2.4で廃止）
- ~~タイトル部分の文字色~~（ver.2.4で廃止）
- 記事の文字色（ver.2.4以上）
- ブログタイトルの文字色（ver.2.4以上）
- ブログ紹介文の文字色（ver.2.4以上）
- サブカラムの文字色
背景色の変更
- メインカラムの背景色
- サブカラムの背景色
カラム幅の変更
プラグインの横並び設定
記事中の画像に枠をつける
タイトル部分の設定
- 画像の差し替え
- 画像の縦幅の調整
- ブログタイトル・ブログ紹介文の表示位置の調整
幅可変／固定の切り替え
カラム配置設定

★ テンプレート独自クラスについて

記事中での使用を想定したいくつかのクラスが用意してあります。

1.要素の回り込み

これまでは回り込みなどを実現するにはいちいちスタイルを直接書き込まなければなりませんでした。しかも、たとえばfloat : left;としただけでは画像と文字が近すぎて、見栄えが良くありません。そこで、テンプレート側で回り込みに関するクラスを用意し、余白などをいちいち設定しなくても良いようにしてみました。

指定方法
テキストを右へ回り込ませたい場合は、「class="f-left"」を、左に回り込ませたい場合は「class="f-right"」を画像等の要素に追加してください。

<img src="画像のurl" class="f-left" />

太字の部分を追加すればOKです。

なお、このクラスは「2.写真風の枠」、または「3.シンプルな枠」と重複して設定することができます。重複して設定する場合は、

<img src="画像のurl" class="f-left photo" />

というように、半角スペースとともにクラス名を追加してください。

2.写真風の枠

画像に対して写真風の枠をつけます。
「1.要素の回り込み」と重複して指定することが可能です。
090109_DSC00477
こんな感じになります。

指定方法
imgタグに「class="photo"」を追加してください。

<img src="画像のurl" class="photo" />

太字の部分を追加すればOKです。

3.シンプルな枠

画像に対してシンプルな枠をつけます。
「1.要素の回り込み」と重複して指定することが可能です。

こんな感じになります。

指定方法
imgタグに「class="imgbox"」を追加してください。

<img src="画像のurl" class="imgbox" />

太字の部分を追加すればOKです。

4.枠をつけない

記事中の任意の要素に枠をつけないようにします。
このクラスは、記事中の画像に枠を表示させるカスタマイズ（スタイルシート上部、簡易カスタマイズ内に項目があります）と組み合わせて利用してください。
「1.要素の回り込み」と重複して指定することが可能です。

指定方法 imgタグに「class="noimgbox"」を追加してください。

<img src="画像のurl" class="noimgbox" />

太字の部分を追加すればOKです。

★ 使用条件・ライセンスについて

このテンプレートは、クリエイティブ・コモンズ・ライセンスの下でライセンスされています。
テンプレート各部分の原著作者・ライセンスは以下の通りです。

タイトル画像: "Snow Magic" / katmere (Flickr)
HTML・CSS: "snowdance" / rimse

[ Close ]

Tag List: FC2ブログ共有テンプレート; snowdance

ホーム: Home

Profile

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

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

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

Calender

11 | 2008/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 : Archives [ 2008年12月11日 ]

IE6用max-width・min-width

[！注意！]

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

Exnihiloの構造見直し

snowdance

★ 基本情報

更新履歴 - Update history

★ テンプレート更新通知機能つき

★ カスタマイズ情報

★ 簡易カスタマイズ項目

★ テンプレート独自クラスについて

1.要素の回り込み

2.写真風の枠

3.シンプルな枠

4.枠をつけない

★ 使用条件・ライセンスについて

Profile

Recent Entries

Recent Comments

Archives

Categories

Calender

RSSフィード

Search

Credit