「css3-mediaqueries-js」で古い Internet Explorer(IE8 以下)にメディアクエリ(Media Queries)を対応させることにしました

Internet Explorer 8 以下は CSS3 に未対応

古い Internet Explorer(IE8 以下)では CSS3 の新機能メディアクエリが適用されないので、だれにでも自由に利用できる「css3-mediaqueries-js」を導入することにしました。

以下、その手順などです。

メディアクエリについて

レスポンシブ Web デザインに「メディアクエリ」が必要

レスポンシブ Web デザインの基本技術として

  • メディアクエリ(Media Queries)
  • フルードグリッド(Fluid Grid)
  • フルードイメージ(Fluid Image)

がありますが、CSS3 の新機能であるメディアクエリは、古い Internet Explorer(IE8 以下)では使えません。HTML5 と同じく CSS3 もまた、IE8 以下は未対応だからです。

メディアクエリは「ウインドウの幅」「画像の解像度」「デバイスの向き」などを条件にして、HTML に適用するデザインを切り替える CSS3 の新機能です。

その具体例として、海外のサイト「Media Queries」では多くの優れたデザインのサイトを紹介しています。こちらでいろいろ見てみるとおもしろいと思います。

Media Queries 公式サイト

Media Queries

メディアクエリの使い方

メディアクエリの構文は以下のようになります。

一般的には、「メディアタイプ」に画面サイズの横幅、「条件」のところに切り替え点であるブレイクポイントを記述します。たとえば、当ブログでいえば、

  • 画面サイズが767px以下の場合:モバイル端末
  • 画面サイズが768px以上の場合:PC 表示(小)
  • 画面サイズが1024px以上の場合:PC 表示(大)

のように設定しました。レスポンシブ Web デザインの設計手順は、いわゆるモバイルファーストの思想に基いていて、まず小さい画面表示のデザインを中心に構成してコンテンツを配置し、次に大きな画面のデザインを変更していく手続きになります。

スタイルシートにはモバイル端末(767px以下)用の指定を先に書き、それからメディアクエリを使って、PC 表示(小)、PC 表示(大)という順番でデザインを調整していくことになります。こんな感じです。

ご覧のように全てのデバイスに適用されるスタイルシートの指示を、ひとつのファイル(style.css)にまとめています。スタイルシートをひとつにして外部参照のファイル数を減らすメリットがある一方で、ファイルサイズが大きくなってしまうデメリットがあります。

参考

サイトの目的と運営方法によってさまざまなので、これがベストの方法だとはいえません。当たり前のことになりますが、製作前に「このサイトでは何をしたいのか?」を明確にしておく必要があります。場合によっては、レスポンシブ Web デザインのほうがダメなときもあるはずですし。

以下の記事を参考にどうぞ。

レスポンシブ・ウェブデザインは上位表示に有利ではない、デメリットもある | 海外SEO情報ブログ

レスポンシブWEBデザインに期待しすぎるなー! | モバイルラボ | マルチデバイスを考え続ける人のための情報サイト

Google ではレスポンシブ Web デザインを推奨しています。

Google ウェブマスター向け公式ブログ: Google がお勧めするスマートフォンに最適化されたウェブサイトの構築方法

ウェブマスター向けモバイルガイド – Google Developers

当ブログはプロの制作ではなく、素人が勉強を兼ねて作っている程度のレベルなので、基本的には「自分の好みのデザインのふつうのブログ」として作っています。

「css3-mediaqueries-js」で IE8 以下に対応させる方法

スタイルシートが適用されないときの表示

国内で利用されている主要ブラウザの最新版であれば、モバイル端末も含めて、基本的には問題なく表示されるのですが、古い Internet Explorer(IE8 以下)ではスタイルシートの指定が機能しません。

当ブログもこんな感じになっていました。

CSSが適用されない当ブログの表示

利用手順

そこで「css3-mediaqueries-js」を利用します。こちらのページにホスティングされていました。

css3 mediaqueries js css3 mediaqueries.js make CSS3 Media Queries work in all browsers JavaScript library Google Project Hosting

css3-mediaqueries-js – css3-mediaqueries.js: make CSS3 Media Queries work in all browsers (JavaScript library) – Google Project Hosting

直接リンクを貼って適用することもできますが、今回はダウンロードして使うことにします。「GitHub」のページからファイルをダウンロードしてください。

livingston css3 mediaqueries js · GitHub

livingston/css3-mediaqueries-js · GitHub

画面右下にある「Download ZIP」というボタンをクリックしてダウンロードします。次にダウンロードしたファイルを、FTP クライアントソフトなどを使ってサーバーにアップロードしてください。

あとは、</body>閉じタグの前などに記述するよう指示されています。

相対パスはサイトに合わせて変更してください。

なお、このファイルは「heml5shiv.js」と一緒に利用されることが多いので、<head>…</head>内に以下のように書かれることも多いです。

使用上の注意点

いくつか注意点があります。公式ページにも書かれていました。

Note: Doesn’t work on @import’ed stylesheets (which you shouldn’t use anyway for performance reasons). Also won’t listen to the media attribute of the <link> and <style> elements.

  • @import で読み込まないこと
  • スタイルシートを複数に分けて<link>のmedia属性で読み込ませないこと

ほかにも、

  • メディアクエリの構文「@media メディアタイプ and (条件) { }」を正しく記述する
  • スタイルシートの「@charset」の宣言で機能しない場合もある

など、いろいろ必要な条件があるようです。

さいごに

「css3-mediaqueries-js」でメディアクエリなどの CSS3 の新機能を反映することができるようになりました。

当ブログでは、毎日ほんの数%ですが、IE8 でアクセスされています。その方々に不便を感じさせないようにするために今回対応してみました。ただし、おそらく近い将来、IE8 以下を使うことはなくなりますので、いずれこの設定はやめにすると思います。

 

IE に限らず、古いバージョンのブラウザを使うことは推奨されません。CSS3 の新機能が使えないだけでなく、セキュリティ上の問題もあります。できれば、この機会に IE 最新版をインストールされてはいかがでしょうか?

Internet Explorer のダウンロード – ブラウザー – Windows

 

CSS3 については以下の書籍が参考になります。

レスポンシブ Web デザインについては以下の書籍がおすすめです。

関連記事

Google Chrome デベロッパーツール「要素の検証」を利用した HTML と CSS の学び方(素人向き)

素人による学び方 HTMLやCSSを学ぶ方法はいろいろあるとおもいますが、基本的なサイト作成の教科書を読んだあと、わたしは中級レベルの本をじっくり読むようなことはしていません。わたしがやったのは以下の方法です。 興味を持ったサイトのデザイン…

WordPress のテーマを自作してみる

レスポンシブWebデザインを勉強して自作のWordPressテーマを作っています。 1月に『作りながら学ぶHTML/CSSデザインの教科書』を読んで、なんとなくHTML5とCSS3の初歩を理解しました。次に『WordPress レッスンブッ…

Google の「モバイル フレンドリー テスト(Mobile-Friendly Test)」に合格して検索結果に「スマホ対応」ラベルを表示させよう

Google Chrome の検索結果に「スマホ対応」のラベルが付くようになった このところ Google はモバイル向けのツールを多く提供してきています。またモバイル端末で Google 検索をすると、タイトルの下に灰色の文字で小さく「ス…