HTML5は「IE8」以下(「IE9」未満)に対応していない・・・・・・じゃあ、対応させる方法と、その雛形!

Oh no.. IE8 is out!
Oh no.. IE8 is out! / cvander

 意外と知らない、というか、誰かが教えてくれないとなかなか気づかないのだが、HTML5は「IE8」以下、「IE7」、「IE6」・・・には対応していない。
  ※IE・・・Internet Explorerの略、マイクロソフトが開発するWEBブラウザのこと

 もう多くのサイトが「IE6」以下は切り捨てているのだが、まだまだ普及している「Windows XP」は「IE8」までしか使用できないので、どうしてもHTML5でサイトデザインしたい! という人は、「Windows XP」ユーザーのことも配慮して、「IE8」以下にもHTML5デザイン対策を施した方が良いと思う。

 そうしないと、「IE8」以下で閲覧した時にレイアウトが崩れてしまって、あら、こんなサイト見たくないわ、と折角のユーザーが逃げて行ってしまう。私のお母ちゃんも「Windows XP」ユーザーなので見捨てないでほしい。

 あ、巷でよく誤解されているのだが(もしかしたらこのページに来た人もそうかもしれないが)、”「IE8」以下対応”というのは、「IE8」以下で閲覧しても「HTML5的な動きが実現できる」ということではなくて、あくまでも「レイアウト崩れを起こさない防止策」に過ぎない。

 

■まずは「html5shiv.js」のダウンロード

 「IE8」以下では、HTML5で新たに追加された要素(※)を認識することができない為、それらが無視され、レイアウト崩れを引き起こしてしまう。そんな新要素を「IE8」以下でも認識できるようにしてくれるライブラリが、この「html5shiv.js」である。

 まずは以下からダウンロードしてほしい。平成26年2月1日現在のバージョンは「3.7.0」である。

https://code.google.com/p/html5shiv/
4146

 ※article, aside, dialog, figcaption, figure, footer, header, hgroup, main, nav, section

 ダウンロードしたzipファイルを解凍すると、「aFarkas-html5shiv-cec73ffdist」フォルダの中に「html5shiv.js」が見つかるはずだ。

 「aFarkas-html5shiv-cec73ffsrc」フォルダの中にも「html5shiv.js」が見つかると思うが、「src」配下のものは圧縮されていないJSファイルで、「dist」配下のものは圧縮されたJSファイルだ。後者(dist)を使用しよう。

■最小の雛形

 では雛形だ。以下のフォルダ構成を前提としている。

  「hp」フォルダ
   ┗ index.html
   ┗ 「js」フォルダ
      ┗ html5shiv.js

[html firstline=”1″ highlight=”5,6,7″ title=”index.html”]





ここにページのタイトルを記載

ここに本文を書くのだよ。あたいはマテリアル花子。



[/html]

 以上だ。

 古いバージョンの「html5shiv.js」では、HTML5の新要素をこのように認識させただけではデフォルトが「インライン要素」として認識されていたので、レイアウト崩れを防ぐ為にCSSで「ブロック要素」に置き換える必要があったのだが、最新の「3.7.0(平成26年2月1日現在)」では、JS内でスタイル適用しているので、不要である。

 注意というか、当然の話だが、JavaScriptがONになっている環境でしか有効ではない。ちなみに補足だが、「index.html」の5行目 [if lt IE 9] という記述は「IE9未満の場合」という意味だ。これをスペースを忘れて「IE9」などと書いてしまったりするとまったく機能しないので、気を付けよう。

(平成26年2月1日 アシベズヘア@ashibehair_m

━ 関連書籍 ━━━

HTML5+CSS3の新しい教科書 基礎から覚える、深く理解できる。
HTML5+CSS3の「正しい」使い方を知ることで、新しい時代に対応する応用力が身に付きます。はじめて学ぶ人は、サイトの作り方をゼロから習得。すでに覚えた人は、「正しい」方法を復習できる。

━ 関連記事 ━━━

  • HTML5で考えるレイアウト、まずは基本のワンカラムレイアウトを「header」「main」「footer」で!
  • HTML5は「IE8」以下(「IE9」未満)に対応していない・・・じゃあ、対応させる方法と、その雛形!
  • HTML5の書き方(宣言)、最小の雛形、そして、文字化けに意外とハマる!
  • HTML5は「IE8」以下(「IE9」未満)に対応していない・・・・・・じゃあ、対応させる方法と、その雛形!」への2件のフィードバック

    1. ピンバック: HTML5で考えるレイアウト、まずは基本のワンカラムレイアウトを「header」「main」「footer」で! | materialize.jp

    2. ピンバック: HTML5の書き方(宣言)、最小の雛形、そして、文字化けに意外とハマる! | materialize.jp

    コメントを残す

    メールアドレスが公開されることはありません。 * が付いている欄は必須項目です