HTML5で組んでるならこの魔法のjsも入れておけっていう話

スポンサーリンク

現在、A!@attripさん発で話題になっている「たった2行でIE5.5~IE8をモダンブラウザの挙動にする魔法のJS」という記事。

Webデザイン界隈では当たり前のものですが、実はもうひとつ追加しておくといいかもしれないjsがあったりします。

html5
Photo:html5 By michael pollak

IE8以前のブラウザはどうにもこうにも開発者泣かせなわけですが、ie9.jscss3-mediaqueries.jsを突っ込むことで、モダンブラウザと同じ挙動にすることができちゃいます。

もう少し具体的に書くと、ie9.jsを組み込むことで、

  • position:fixed;に対応
  • max-widthmax-heightに対応
  • 属性セレクタ、擬似クラスに対応
  • margin:0 auto;でのセンタリングに対応
  • 透過PNGに対応
  • opacityに対応

といったことが可能になります。要はCSS3に対応していないIE5.5〜IE8に、一部のセレクタやプロパティを対応させることをメインとしたjavascriptなんですね。

次にcss3-mediaqueries.jsですが、こっちもどういう働きをするかカンタンに説明しておきましょう。

もともとCSS2系の仕様で、CSSを適用するメディア(PC、テレビ、プリンタ用紙など)を指定するときに使うMedia Typeというものががあります。
それをCSS3で大幅に拡張したのがMedia Queryというやつです。

最近のレスポンシブデザインのソースで、

<link rel="stylesheet" type="text/css" href="大ウィンドウ用.css" media="screen and (min-height: 600px)" /> <link rel="stylesheet" type="text/css" href="小ウィンドウ用.css" media="screen and (max-height: 599px)" />

って、記述がされているのを見かけたことないでしょうかね。これがいわゆるMedia Query。IE8以前ではこのコードも使えないため、これを使えるようにするためのjavascriptがcss3-mediaqueries.jsなんですね。

レスポンシブデザインを実装するなら必須と言えるjavascriptなわけです。

で、ここまではいいわけですが、うっかりとしたひとつの盲点が出てきます。
そうHTML5への対応ですね。

IE8以前のブラウザは言うまでもなくHTML5に未対応です。
しかし、ie9.jscss3-mediaqueries.jsは、いずれも未対応のCSS3に対応するためのjavascriptですから、これだけではHTML5に対応させることができません。

そこで利用したいのが、html5shiv.jsです。
HTML5から登場したタグを、未対応ブラウザでも認識させることができるようになります。

Google Project Hostingから当該zipファイルをダウンロードしてきて解凍したら、html5shiv.jsをサーバーの任意のディレクトリにアップロードします。
アップロードしたら、<head>タグ内に条件分岐コメントを使って、読みこむように設定しましょう。さっきの2つのjsを使うことを前提にすると、

<!--[if lt IE 9]> <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22%2Fjs%2Fhtml5shiv.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" /> <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22http%3A%2F%2Fie7-js.googlecode.com%2Fsvn%2Fversion%2F2.1(beta4)%2FIE9.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" /> <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22http%3A%2F%2Fcss3-mediaqueries-js.googlecode.com%2Fsvn%2Ftrunk%2Fcss3-mediaqueries.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" /> <![endif]-->

この3つのjavascriptを読み込むようにすればOK。
これでIE8以前のブラウザでも、HTML5とCSS3に対応しつつ、レスポンシブデザインにも対応させることができます。

というわけで、HTML5でWebデザインを組んでいる場合は、html5shiv.jsの読み込みを忘れずにやっておくことをおすすめしますよ。

「Hacks」新着記事

カスタムブロックを追加するなら「Block Lab」プラグインを導入すると幸せかもしれない

Avatar for ホシナ カズキ

ホシナ カズキ

「Password Checkup」がChromeユーザーのセキュリティを守ってくれるかもしれない

Avatar for ホシナ カズキ

ホシナ カズキ

Facebookアプリで3D写真投稿機能をONにするには? 試してみたら本当にできた件

Avatar for ホシナ カズキ

ホシナ カズキ

Twitterアプリに搭載されたデータセーブ機能をONにする方法

Avatar for ホシナ カズキ

ホシナ カズキ

大規模・広範囲にわたるクラッキングによるWordPress改ざん事案が発生中

Avatar for ホシナ カズキ

ホシナ カズキ

もっと見る

モバデビモバイルウェブのネタ、ニュースMaciPhoneなどのApple関連、WordPressのことなど、いろいろ書く雑食系ブログメディア。
ためになるかもしれないし、ならないかもしれない。そこそこ更新してますそこそこ。

このブログについてもっと詳しく