コーディングメソドロジー

第52回 Media Queriesで読み込むcssを切り替える

スマートフォンがmobile環境シェアにおいて増加している昨今、それらの端末ごとに最適化・構築するケースが増加してきています。それを実現するために、レスポンシブデザインでのサイト構築も併せて増加してきています。これまでのWebサイト制作では、スマートフォン向け・PC向けに最適化されたレイアウトでそれぞれ開発する、もしくはデバイスごとのコンテンツ・レイアウトの最適化は行わず、PC向けレイアウトをそのままスマートフォンに表示させる、といった手法で構築するケースが主流となっていました。

しかし、最適化を行わない場合、データ容量が大きくなりがちなPC向けコンテンツレイアウトを、通信速度によって快適さが大きく異なるスマートフォンで閲覧するにはユーザーにかかる負荷が大きくなるであろうし、スマートフォン向けコンテンツの最適化を行った場合、単純にPCサイト向けレイアウトとスマートフォン向けレイアウトの双方の開発が発生することとなり、またメンテナンスもそれに応じる形で膨らんでいくことも想定されます。
そのような問題を解決する一つの手段として、単一のhtmlソースのみでスマートフォン/PCそれぞれに対応したレイアウト・コンテンツを表示させるレスポンシブデザイン(01参照)があります。レスポンシブデザインを実現するためには、JavaScriptやPHPなど様々な方法がありますが、今回はHTML5から実装された「Media Queries」を用いて実現する方法をご紹介します。

Media Queriesで読み込むcssを切り替える

「Media Queries」の使い方
Media Queriesは、link要素中のmedia属性や、cssの@media規則を用いて、デバイスの表示サイズによって読み込むcssファイルの切り替えが可能になります。切り替えるポイント(ブレイクポイント)は、ウィンドウのサイズを指定することになるのですが、利用できる値には、「width/height (幅の値/高さの値)」「min-width/min-height (最小の幅の値/最小の高さの値)」「max-width/max-height (最大の幅の値/最大の高さの値)」などがあります。
media属性での切り替え方
Html内のlink要素中のmedia属性の書き方は02を参照してください。今回は例として、「min-width」で最小幅が481pxの時(PC/タブレットサイズの時)はlayout_pc.cssを読み込み、「max-width」で最大幅が480pxの時(スマートフォンの時)はlayout_sp.cssを読み込む記述にしています。
@media規則での切り替え方
上記の「media属性での切り替え方」の場合、htmlファイルに記述することになりますが、単独のcssに全てのスタイルを記述した方が望ましいケースも想定されます。そのような場合にはmedia規則での記述方法(03参照)が適しています。Media属性での切り替え方同様に、「width/height」「min-width/min-height」などの値によって、適用するスタイルを切り替えることが可能となります。
HTML5非対応ブラウザへの実装

Media QueriesはHTML5から実装された機能であるため、まだまだ利用者の多いIE6~IE8などには適用できません。これらの非対応ブラウザでMedia Queriesを用いたレスポンシブデザインを実装する場合は、githubから提供されている「respond.js」を読み込ませると良いでしょう(04参照)。

このように、Media Queriesを用いるレスポンシブデザインの実現は、非対応ブラウザへの実装など、事前に解決すべき問題もありますが、jsでの実装に比べると表示(処理)速度という点でのパフォーマンスに優れており、またphpでの実装に比べると開発がフロントエンドで完結できるという点で優れています。

  • 大規模サイト制作のご案内 大規模サイトプロジェクトのポイントやサービス内容をご紹介
  • レスポンシブWebデザインセミナーがDVDになりました。
  • コーディングメソドロジー
  • コーディングファクトリートピックス
  • 受注活動サポートサービス
  • コーディングファクトリーニュース
  • IllustratorでのWebデザイン
  • 求人案内
  • 株式会社モノサス
  • お問い合わせ

    コーディング相談ダイヤル

    お問い合わせ

  • ご相談、お問い合わせフォーム

    ご相談、お問い合わせフォーム