2014年4月1日火曜日

[web関連] IE7 での表示崩れ対策 [備忘録]



ずっと、見て見ぬ振りをしていたのですが、
自分のウェブサイト
上のサイト、実はINTERNET EXPLORER 7に対応しておりませんでした。
(ということは、きっとIE6は間違いなく対応していなかったはず)

この間の土日で
とうとうIE7対応〜！ひゃっほ〜！となったので備忘録として

IE7 表示崩れへの対策


をご紹介致します。

今回は、トップのアイキャッチ的なロゴをやたらと派手にしてみましたが
いかがでしょうか。(どうでもええわ)


※以降のご紹介はあくまで一例です。主観を多く含みます※

自分のウェブサイトで表示の確認(=正確に表示されているかどうか)
ができていたブラウザは以下のみでした。
・ブラウザ名 ( OS名 / バージョン)
  • FIRE FOX (mac / 28)
  • GOOGLE CHROME (mac / 33)
  • SAFARI (mac / 6)
  • IE (windows / 11)
悲しいまでに、最近のブラウザばかりです。

WEBデザイン関連のレクチャーが紹介されているブログ等で
よく見かけていた

旧 IE 非対応 = 表示崩れ = 私: そうなん？そんなに崩れるの？

と、完全に無視する体制をとっていたのですが(ひどい)

今後のことを考えると、そんなスタンスじゃ駄目すぎるので
とうとう、せめてIE７だけでもと、対応を決意。

え、「決意」とか言う程のことなん？ってなりそうですが
実家のWINDOWSに入ってるIE7でウッカリ自分のサイト開いたときに
愕然とするほどのレイアウト崩れが起きていまして
あまりの崩れっぷりに

ｿｯ......とブラウザ(IE7)を閉じたほどでした。

WEBデザインの勉強(コーディングとか)の更なる飛躍を求めて
次へ次へ勉強をステップアップしたい状態の私には
あまりにも重すぎる足かせだったんですね〜。

というわけで、

今回IE7対応へ向けて、自分のサイトで修正した箇所のみ

を紹介。

細かいことは後から考えるとして、(頼むから今すぐ確認してください)
一刻も早く、ひとまずマトモに表示させることを最優先しました。

① CSSに *{zoom: 1;} を記述しておく。 [対 hasLayout ]


やや乱暴なやりかたですが、
これをしただけで、ギャンギャンに崩れまくっていたうちの50%以上は
正常になりました。

* (アスタリスク)での指定をすることで全ての要素に zoom: 1; を
適用させているのですが、理由はというと、

IEには「hasLayout」というIE特有の概念(...システム？) があり、
その「hasLayout」というのは "true" か "false"という値を与えられるんですね。

「hasLayout」の値が "false" になっている状態の時に
大幅なレイアウト崩れが起きるそうです。

"true" にするには、いくつか方法はあるのですが、
"false" になっているプロパティの
一つ一つを"true"にするために修正する作業は莫大な時間がかかるので

深く考えずに、とにかくCSSの記述のトップあたりに
*{zoom: 1; }

を記述して、一括で解決してしまえ！
という形をとりました。
(webデザインの状況によってはこれでは駄目なパターンもありそうですが)

"true"にする為のいくつかの方法は
様々なサイトで、詳しく説明をしてくれている方が沢山いらっしゃるので
「hasLayout」で検索してみてください。(このブログが滅びてしまえばいい)

② ダメ！インライン要素の中にブロックレベル要素
　[HTML５ではOKだけどIE7は非対応]

 HTML5.0(まだ勧告はされていませんが)からは、

インライン要素の中にブロックレベル要素がOK！になっているのですが。

ちなみにこういう状態。<a>=インライン要素。<div><li>=ブロック要素。
[誤]
<a><li>アバウトミー</li></a>
<a><li>ブログページ</li></a>

数カ所で調子に乗って上記のように使っていたのですが、
これはなかなか気付かなかったので暫く格闘するハメに。

IE7では、結構なレイアウト崩れを起こす原因となっていました。

ついついブロック要素に対してリンクを貼りたくなるのは、
少しでもクリックしてもらいやすいように、という配慮だと思うのですが、

そんな場合は上記のようなことをせずに
[正]
<li><a style="display: block;">アバウトミー</a></li>
<li><a style="display: block;">ブログページ</a></li>

として、<a>要素をブロックレベルに変えてしまう方法を
取ったほうが無難です。無難というか今後そうします。軽くトラウマです。


③ rgba指定したbackground-colorは
　 IE独自のフィルタを使用。もしくは直前に通常色指定。


rgba、背景だけ透過させて文字は透過無し、とかできるので便利なのですが、
IE8までの旧IEは非対応なんですね〜。

というわけで、以下のIE独自フィルタの使用で解決。

下記例: 背景 "ホワイト" で、透過50%の時。

background-color:rgba(255, 255, 255, 0.5);
filter:progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7fffffff,endcolorstr=#7fffffff,gradienttype=0);
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#7fffffff,endColorstr=#7fffffff)";
zoom:1;

このフィルタを指定せずに、background-colorにrgba(1行目)のみを記述した時は
IE7では背景無しで反映されてしまいました。

ちなみに、もちろん以下でもOK。そのかわり背景は透過しません。

background-color: #fff;
background-color:rgba(255, 255, 255, 0.5);

上記だと、IE8以前では背景が "白(透過なし)"で
モダンブラウザでは背景が "白(50%透過)" で表示されます。

この場合、私のサイトでは透過していなくても問題がないデザインだったので
これは、プログレッシブ・エンハンスメントだ！
と、自分に言い聞かせて「background-color: #fff;」で対応しました。

 ④ 文字サイズや幅でrem指定している場所は、
　  全て直前にpx指定もしておく。 


これ、remを使用するときに、忘れたら駄目だな〜と思ってたのに
ウッカリやっぱり忘れていた項目。

remという単位が個人的には使い勝手が良いと思って以下のように
指定しているのですが、

html{font-size: 62.5%;}
body{font-size: 1.0rem;}
p{font-size: 1.4rem;}
この状態にしておくと、

1rem = 10px を作る為に、html{font-size: 62.5%;} 指定。

上のcssだと、「pのフォントサイズは1.4rem = 14px」
が成り立つんですね。

というわけで、全て以下のように修正。(px指定後remで上書き)
html{font-size: 62.5%;}
body{
     font-size: 10px;
     font-size: 1.0rem;
}
p{
     font-size: 14px;
     font-size: 1.4rem;
}

⑤ デザインだけの問題なら、cssを使用せず
　 いっそ画像を使用する。


これを言っちゃあ・・・ですが。

ここ最近ではJPEGやPNG及びGIF画像を使わなくても
ものによってはCSSでデザインができますが、

やはり「あれ・・ここCSSでできるのに・・」という場所を
画像で補っているサイトは未だ数多く見かけますよね。

画像を使うことで、IE独自の機能によるデザイン崩れは解決します。

が、例えばSEO対策だったり、アクセシビリティの事を考えると
良い解決法だとは思えません。

言い換えると、アクセシビリティやSEO対策に支障が出ない場所は
使ってしまえばいい。と思いました。

例えば以下のような時。(一例)
ボックスや画像に対する角丸

○[IE7非対応] css = border-radius: 10px; (しかし私は多用している)

●[IE7対策①] css = background-image: url(角丸背景の画像);

●[IE7対策②] pie.htcを使用する。
　　以下のサイトが分かりやすく説明しておられます。
　　PIE.htcを使ってIEでもCSS3を有効に！
●[IE7対策③] jQueryのプラグインで対応。
　　以下のサイトが分かりやすく説明しておられますpt.2。
　　IE6 7 8でCSS3風の角丸を実現するjQuery.corner
とまあ、こんな感じで
グラデーションなんかも近い対応が可能ですよね。

ただ、

せっかくCSS3の様な素晴らしい機能を使わずにはいられないし、

だからといってCSSハックだったり上記のrgbaの時のようなIE独自フィルタを
記述しまくっていると、どんどんCSSファイルの行が増えて行く・・・

画像での対応も素材作りが大変だったり、いや、それよりもサイトが重くなるのは 良くない。
(今日びは、画像でサイトが多少重くなっても問題ないと思われがちだが、
そもそもIE6やIE7対策で画像といった場合では
IE6やIE7が入っているマシンは、多少は画像の重さの影響を受けるはずだ。)

となると、徐々にIE6〜8のシェアも減ってくるだろうし(いつかはね)
先ほどの「プログレッシブ・エンハンスメント」の概念は
間違っていないな〜と。
(時と場合とデザインと機能によるが)

ただしどんなにシェアが減ろうとも
使用している方がいる限りは
せめてできる限りの表示はさせないと駄目ですよね。

と言いながら IE6 対応をどうしようか迷っている・・・。
やってみる・・か。


というわけで、IE7対応に関して、
私がとった行動のご紹介でした。



このエントリーをはてなブックマークに追加
投稿者 時刻:
ラベル:

0 件のコメント:

コメントを投稿

登録: コメントの投稿 (Atom)