0%

Designデザインワークショップ

Posted:2015.12.23

ウェブサイト制作時のIE対応まとめ(プラグイン)

日本ではトップのシェアを誇るMicrosoft社のウェブブラウザ「Internet Explorer」ですが、Google ChromeやFirefox、Safariなど他のブラウザと挙動が異なる部分もあり、ウェブ制作をしている方は悩むケースもあるかと思います。

 

今回はウェブサイトをInternet Explorer(IE)でも問題なく表示させるためのテクニックをまとめていきたいと思います。

 

目次

  1. 1. 古いバージョンのIEについて
  2. 2. 古いバージョンのIEで起こる表示上の問題点
  3. 3. HTML5とCSS3への対応状況
  4. 4. 古いバージョンのIEへの対策テクニック
  5. 5. プラグインを使用する

 

古いバージョンのIEについて

最近ではだいぶシェアが少なくなってきた古いバージョンのIEですが、環境によってはまだまだ現役のウェブブラウザでもあります。

 

【WindowsのOSごとの利用できるIEのバージョン】

Windows XP IE6、IE7、IE8
Windows Vista IE7、IE8、IE9
Windows 7 IE8、IE9、IE10、IE11
Windows 8 IE10
Windows 8.1 IE10、IE11
Windows 10 IE11、Edge

 

WindowsXPのサポートはすでに終了しましたがユーザーも多く、特にIE8なんかは案件によって対応が必要なところもあるかと思います。しかし困ったことに、古いバージョンのIEでは一部のHTML5やCSS3の機能に対応していません。

 

そのため、レイアウトが崩れたりデザインが変わってしまったり、さらにはページが正常に表示されないといった問題が出てきます。そこで、javascriptのプラグインやCSSハックと呼ばれるテクニックを使って対応していきます。

 

古いバージョンのIEで起こる表示上の問題点

IEではバージョン別に異なる表示上の問題点(バグ)があります。細かなものを含めるとかなりの数があるようですが、、ここでは代表的なものを挙げていきます。

 

【floatとmarginを併用時にmarginの値が2倍になる】(IE6)

→ display: inline ; を追加します

・floatと同じ方向に設定したmarginの値が2倍になる

 

【IE7以前のCSSレイアウトズレ(hasLayout)】(〜IE7)

→ zoom: 100% ; を追加します

・IE7以前の仕様であるhasLayoutというプロパティによるバグ

 

【z-indexの重なり順がおかしくなる】(〜IE8)

→ 親要素にもz-indexで重なり順を指定する

・positionプロパティのabsoluteもしくはrelativeを設定した場合はz-indexがリセットされてしまう

 

【@importルールの制限によるパフォーマンス低下】(〜IE9)

→ @importの使用を控え、linkタグで対応

・@import使用時に読み込み順がランダムになったり、制限を超えるファイルは読み込まれないなどがあります

 

HTML5とCSS3への対応状況

近年のウェブ制作においては欠かすことのできないHTML5とCSS3ですが、古いバージョンのIEでは全ての機能が対応していません。バージョンごとの対応状況はこちらのサイトで確認ができます。

 

【findmebyIP】

http://fmbip.com/litmus/

 

re_fmbip.com

 

古いバージョンのIEへの対策テクニック

 

これらを踏まえて、古いバージョンのIEでもウェブサイトを綺麗に表示できるよう対策をしていきます。具体的に大きく分けると次の3種類が挙げられます。

 

  1. 1. プラグインを使用する(javascript)
  2. 2. 条件付きコメントを使用・ドキュメントタイプを定義(HTML)
  3. 3. CSSハックを使用する(CSS)

 

プラグインを使用する

未対応のHTMLタグ要素やCSSプロパティに対応させるための各種プラグインを導入します。

 

HTML5追加タグを使えるようにする【html5shiv.js】

https://code.google.com/p/html5shiv-printshiv/

 

html5shiv

 

IE8以下のブラウザにHTML5で新たに追加された要素を、きちんと認識させるためのライブラリです。これでheaderタグやsectionタグなどが使えるようになります。

 

 

IE6・IE7・IE8のバージョンをIE9の仕様に近づける【IE9.js】

https://code.google.com/p/ie7-js/

 

IE9

 

IE9以下のバージョンをIE9の仕様に近づけることにより、古いバージョンのIE特有のバグを防ぐことができ、IE9と同じ方法でコーディングができるようになります。

 

 

IE8以下でメディアクエリーを使用できる【Respond.js】や【css3-mediaqueries-js】

https://github.com/scottjehl/Respond

 

Respond

 

https://code.google.com/p/css3-mediaqueries-js/

 

css3-mediaqueries

 

IE8以下ではメディアクエリーが使えないためレスポンシブデザインが実装できません。これらのプラグインでメディアクエリーを有効化させます。

 

 

IE8以下でCSS3の未対応セレクタを使用できる【Selectivizr.js】

http://selectivizr.com/

 

Selectivizr

 

last-childやnth-childなどIE8以下になるとほとんどのセレクタが対応していません。これらのセレクタが使えることでより効率的にコーディングをすることができます。

 

 

CSS3で新たに追加されたプロパティを使用できる【PIE.js】

http://css3pie.com/

 

CSS3PIE

 

CSS3ではいろんな機能が実装できるプロパティが新たにたくさん追加されました。しかしIE9では対応しているものに限りがあり、IE8以下になるとほとんど未対応なのが現状です。このプラグインを使うことでそれらのプロパティも同じように使えるようになります。また同等の機能でhtcファイルバージョンのPIE.htcなるものも存在します。

 

 

IE8以下で透過PNGを扱えるようにする【jQuery.belatedPNG】

https://github.com/wakuworks/jquery.belatedPNG/

 

jQuery.belatedPNG

 

昨今のデザインでは欠かすことのできない透過のPNGですが、IEの古いバージョンになりますとアルファチャンネルがきちんと処理されず、透過部分がグレーや黒くなって表示されてしまいます。

 

 

完全には難しいですがプラグインを使うことで、古いバージョンのIEをより新しい仕様と同じように扱えるようになります。もちろん全て必要というわけではなく、ファイルサイズも考える必要がありますのでケースによって必要最低限のものを使うのがベターだと言えます。

 

次回は引き続き、条件付きコメントをやCSSハックを使った方法をまとめていきたいと思います。

 

 

author
この記事を書いた人オガワ シンヤ
FacebookTwitter

DesignSupply.代表 / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

制作のご依頼やお問い合わせ・パートナー業務提携のご相談はこちら

デザインやウェブ制作についてのご依頼やご相談、その他お問い合わせなどもお気軽にご連絡ください。フットワークの軽さやレスポンスの早さ、また豊富な経験や知識、技術を活かした対応力といったフリーランスクリエイターの強みでクライアント様、パートナー企業様のお力になります。デザインからコーディングやWordPress実装といったウェブサイト構築はもちろん、写真撮影や動画編集、コンテンツ制作からサイト運用サポートまで一括してお任せください。

ホームページ制作のご検討やウェブ運用でお悩みの経営者様や企業のウェブ担当者様をはじめ、個人で店舗を営んでいらっしゃるオーナー様、フリーで活動されているビジネスオーナー様はもちろんのこと、リソース不足でお困りの制作会社様、またクリエイターをお探しの代理店様も大歓迎です。

コンタクトをご希望の方はお手数ですが、下記よりお問い合わせフォームのページへアクセスしていただき、必要事項を入力の上メッセージを送信してください。確認でき次第すぐに折り返しご連絡致します。

こんな記事も読まれています

コメントもお気軽にどうぞ

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。また、* が付いている欄は必須項目となります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA


ページトップへ
大阪市天王寺区のホームページ制作デザイン事務所(SOHO)DesignSupply.【デザインサプライ】