Late ran ラテラン は、ウェブクリエイターのためのキュレーションマガジン

Windows10のアップグレード開始とともにあのブラウザが登場しました。
そう、Microsoft Edge。
Windows10に合わせた最新ブラウザですね。
タッチパネル方式にも対応したブラウザになっており、多様なデバイスでの活躍が期待されそうです。
しかし！　われわれエンジニアが一番気になるのはそこではないですね。
われわれが一番知りたいところ、それは、そう――

CSS関連のバグはどうなったの？

これではないでしょうか。

名前も中身もInternet Explorerとは違うぞ、
という空気を漂わせていますが、開発元は同じです。
従来のInternet Explorerでは各バージョンで様々なバグに悩まされてきました。また、CSS3への対応が他ブラウザよりも遅く、様々な対策が必要でした。

Edgeではそこが改善されているのか、気になりますね。

さて、Edgeが出た後もInternet Explorerは存在し続けます。
制作に携わる皆さんはまだまだInternet Exploreの厄介な特徴とお付き合いする必要がありそうです。
あらためてInternet Explorer向けCSS、バグ対策をまとめてみました。

● opacityプロパティが効かない！

Firefox、Google chromeで確認して、さぁ、Internet Explorerだ！
とブラウザを開いたら、opacityが効いていなかった……。
そんなことはありませんか？
そんな時は以下のように記述してみましょう。

ポイントはこのままの順番で書くことです。

見事にopacityが適用されます。

またこんな書き方もあります。

 

● CSS3のようなスタイルをInternet ExplorerでもCSSで適用したい！

なぜかCSS3への対応が遅れているInternet Explorer。
だけどなんとかCSS3の効果を適用したい。

そんな方にお勧めのInternet Explorer向けのCSSスニペットを紹介している記事があります。

＜IEでCSS3の効果を出せる。クロスブラウザ対応 CSSスニペット＞

http://kojika17.com/2011/02/css3-for-ie.html

どうしても画像処理したくない箇所などがあるときに重宝しますね！

ただし、この効果はあくまでも「CSS3のような」効果です。
全く同じ見た目にはならないこともあるので、実際に実装してみて、外観をよく吟味しましょう。

Box shadowに類似した効果を適用した時は、
影が濃すぎる、
影に段がついているように見える（滑らかなグラデーションではない）
といった現象がみられることがあります。

また、かの有名な
CSS3 PIE（http://css3pie.com/）
を使う方法もあります。

CSS3 PIEで実装できるCSS3のスタイルは以下の通りです。

・border-radius
・box-shadow
・border-image
・multiple background images
・linear-gradient as background image

ただし、使用時には注意も必要です。

CSS3 PIEはもともと存在するHTMLに、スタイル用のHTMLの記述を追加することでCSS3のスタイル適用を実現します。

もともとのHTML構造が変化することにより、
思わぬスタイル崩れ
マークアップ構造の崩れ
が起きる可能性があるのです。

ご利用の際にはデベロッパーツールによるDOMの内容確認と外観の確認をされることをお勧めします。

上記2つ以外にはjQueryを利用してCSS3に近いスタイルを実装する方法が豊富にあります。
「IE　CSS3　 jQuery」で検索するとたくさん出てくるので一度試してみてください。
そして自分がよく使うものをあらかじめダウンロードしておくとよいでしょう。

筆者はbackground-size: cover; をよく使うため、こちらを愛用しています。

＜jquery.backgroundSize＞

http://louisremi.github.io/jquery.backgroundSize.js/demo/

● オーマイガッ！　画像が消えた！？

Internet Explorerを開いて、
imgタグで設置した画像が消えている、もしくは線状になっていることがある、
このようなことで驚いたことはありませんか？

そんなときはimgタグのwidth、heightを見直してください。

これらにきちんと整数値が設定されていないと、Internet Explorerは値＝0とみなしてしまいます。
width、height、どちらも0だと画像が表示されず、どちらかが0だと画像が線のように表示されてしまうのです。

Internet Explorerではwidth、heightをきちんと整数値で設定し、値をauto、%にしたいときはCSSで設定しましょう。

● 透過画像の縁が黒いのですが…

ズバリpng画像を使用しているからです。
他の画像ファイル形式に変更すると解消されます（透過まで解消されますが……）。
この問題はInternet Explorer6～8で起きるようです。

●jQueryのslideUp()、slideDown()、slideToggle()使用時にInternet Explorer8でmarginが消失！？　する恐怖のバグ対策

アコーディオンコンテンツ、スライドメニューを実装した時によく見られるのではないでしょうか。
例えばこんな構造のアコーディオンコンテンツがあったとします。

 

Internet Explorer8では上記のmargin-top: 20px;が現れたり消えたりします。

 

この問題の解決方法は簡単で、2つあります。

① marginをpaddingに変えてみましょう
② marginを設定している要素の親要素に「overflow: hidden」を設定しましょう。

対策はどちらか一方を適用すれば大丈夫です。
ちなみに筆者が経験したアコーディオン関連のトラブルは9割方これでした。

● 何をやってもCSSが効かない、なぜ！　そんなときの最終手段・CSSハック

CSSハックとは、各ブラウザ間でのサイトの表示を可能な限り同じにするためのCSSコーディング技術です。

これに関しては多数の素晴らしいまとめサイトがあります。
その中でもInternet Explorer6以上をまるっと対象にしているこちらの記事をご紹介します。

＜IE用CSSハックの簡単な書き方とIE10以上への対応＞

http://web-codery.com/html/24

モダンブラウザ向けハックはメディアクエリを使用しているのもが多いですね。
Internet Explorer11向けハックも例にもれずメディアクエリの形をとっています。
便利ですね、メディアクエリ。

「著者あとがき」

ここまで根気強く読んでくださった方、ありがとうございます。
若干げんなりしたのではないでしょうか。
どうしてInternet Explorerはこんなにトラブルが多いのか……。
可能ならこのブラウザの開発者にこの現状についてインタビューをしてみたいくらいです。
制作の現場にいると、どうしてもクライアントの要望でInternet Explorer対策をしなければいけない事態に直面します。

この記事がそういった試練に立ち向かう際の一助になればとてもうれしいです。

また今後のEdgeの動向に関しても注意深く情報を集めていかなければならないでしょう。