2018.06.23Hacksスポンサーリンク現在、A!@attripさん発で話題になっている「たった2行でIE5.5~IE8をモダンブラウザの挙動にする魔法のJS」という記事。Webデザイン界隈では当たり前のものですが、実はもうひとつ追加しておくといいかもしれないjsがあったりします。pollakIE8以前のブラウザはどうにもこうにも開発者泣かせなわけですが、ie9.jsとcss3-mediaqueries.jsを突っ込むことで、モダンブラウザと同じ挙動にすることができちゃいます。透過PNGに対応opacityに対応といったことが可能になります。要はCSS3に対応していないIE5.5〜IE8に、一部のセレクタやプロパティを対応させることをメインとしたjavascriptなんですね。次にcss3-mediaqueries.jsですが、こっちもどういう働きをするかカンタンに説明しておきましょう。Typeというものががあります。Queryというやつです。/>って、記述がされているのを見かけたことないでしょうかね。IE8以前ではこのコードも使えないため、これを使えるようにするためのjavascriptがcss3-mediaqueries.jsなんですね。レスポンシブデザインを実装するなら必須と言えるjavascriptなわけです。ここまではいいわけですが、うっかりとしたひとつの盲点が出てきます。HTML5への対応ですね。IE8以前のブラウザは言うまでもなくHTML5に未対応です。ie9.js、css3-mediaqueries.jsは、いずれも未対応のCSS3に対応するためのjavascriptですから、これだけではHTML5に対応させることができません。そこで利用したいのが、html5shiv.jsです。HTML5から登場したタグを、未対応ブラウザでも認識させることができるようになります。Hostingから当該zipファイルをダウンロードしてきて解凍したら、html5shiv.jsをサーバーの任意のディレクトリにアップロードします。アップロードしたら、<head>タグ内に条件分岐コメントを使って、読みこむように設定しましょう。<![endif]-->この3つのjavascriptを読み込むようにすればOK。これでIE8以前のブラウザでも、HTML5とCSS3に対応しつつ、レスポンシブデザインにも対応させることができます。いうわけで、HTML5でWebデザインを組んでいる場合は、html5shiv.jsの読み込みを忘れずにやっておくことをおすすめしますよ。カズキフリーランスのウェブディレクター。