デザイン＆レイアウト 1-01
メディアクエリによるレスポンシブWebデザイン

メディアクエリを使って、PC、タブレット、スマートフォンなどでそれぞれの画面サイズに応じた表示の切り替えを行い、レスポンシブWebデザインを実現する方法について解説する。

制作・文／山本圭助（株式会社ラナデザインアソシエイツ）

BROWSER IE…7over　Firefox…7over　Safari…5over　Chrome…15over

01

レスポンシブWebデザインとは、Webサイトを閲覧する環境にあわせて最適なレイアウトを表現するためのデザイン手法だ。

実現するにはさまざまな方法があるが今回はコーディングの際にメディアクエリを使い、画面サイズに応じたスタイルを適用させることで、一つのソースで多くのデバイスに対応させる方法について解説する。

メディアクエリとは、link 要素とstyle要素のmedia属性で、表示対象となるメディアの種類を特定することを可能にする仕組みのことである。

media 属性の値には、媒体型と媒体特性についてキーワードを使用して指定する【1-1】【1-2】。

【1-1】キーワードを配列する際はカンマ（OR 検索）、and、not」が使える。

【1-2】画面幅360px 以下の指定を行う場合の記述例。

02

今回は画面幅が、921px以上／920px～361px ／360px以下、の3種類に表示分けを行う【2-1】。なお、ベースになるHTML は【2-2】となる。

まず、レイアウトによってサイズ変更などがない共通のスタイル指定を記述する【2-3】。

【2-1】画面幅921px 以上(左)。画面幅920px～ 361px(中)。画面幅360px 以下(右)。

【2-2】

【2-3】

03

次に、画面サイズごとのスタイル設定を加えていく。

画面幅が921px 以上（＝最小画面幅が921px）の場合、min-width で最小画面幅を指定する【3-1】。

【3-1】画面幅921px 以上(左)。画面幅920px～ 361px(中)。画面幅360px 以下(右)。

04

画面幅が920px ～361px（＝最大画面幅が920pxで最小画面幅が361px）の場合、min-width で最小画面幅を、max-width で最大画面幅を指定する【4-1】。

【4-1】

05

画面幅が360px 以下（＝最大画面幅が360px）の場合、max-width で最大画面幅を指定する【5-1】。

これで画面幅に応じたスタイルを定義することができた。

【5-1】

06

メディアクエリは、閲覧環境を特定できる機能だが、IE8以下ではメディアタイプまでしか対応していない。これはメディアクエリの前身で、記述方法は同じだが、指定できるキーワードは媒体型のみだ【6-1】。

そこでIE の場合には、IE 用のスタイルシートを作成し、コンディショナルコメントでスタイルを読み込むようにする。

コンディショナルコメントとは、HTMLファイルのコメント記述におけるIEの独自拡張で、条件にあったバージョンのみ処理を実行することができる。たとえばIEのバージョンによって処理する内容を指定する記述例は【6-2】、指定方法の組み合わせは【6-3】となる。

また、IE以外のブラウザに適用したい場合は【6-4】のどちらかで処理内容を囲む。

【6-1】メディアタイプによる、デバイスがプリンタまたはテレビの場合のスタイル指定。カンマ区切りで複数指定は可能。

【6-2】

【6-3】IEのバージョン指定方法の組み合わせ。数値はバージョンで小数点以下はマイナーバージョンあつかいとなる。たとえば「IE→全バージョン」、「IE6→IE6のみ(6.0という指定も可)」、「lte IE 7→IE7以下」、「gte IE 8→ IE8以上」となる。

【6-4】上か下のどちらかで、右例のように処理を囲む。こうすれば間の処理はIE に適用されなくなる。

07

それぞれの画面幅ごとのスタイル設定をファイル単位（large.css、middle.css、small.css）に分ける。

次に、それらをlink要素で読み込むようにする【7-1】。

IE7 ～8は画面幅921px以上と同じ指定を、IE6は画面幅920px ～361pxと同じ指定を行いたい場合は、【7-2】のように記述する。

【7-1】

【7-2】

このようにメディアクエリを使うことによって、一つのソースで多様な閲覧環境に対応することが可能である。

[目次に戻る]

【本記事について】
2013年1月29日発売のweb creators特別号「いますぐ悩みが解決する! Webデザイン仕事で役立つ54のアイデア」から、毎週記事をピックアップしてご紹介! 近年さかんに目にするパララックス効果やMasonryを利用したレイアウトをはじめ、見やすくて使いやすいナビゲーション、フォームや製品紹介ページのユーザビリティを向上するインタラクション、表現の可能性を広げるHTML5+CSS3の機能、制作効率を向上するフレームワークの紹介、スマートフォンサイト制作のポイントとTipsなど、Web制作の仕事に役立つ54のアイデアが満載です。

※本記事はweb creators特別号『新世代Web制作テクニック総特集』からの転載です。この記事は誌面でも読むことができます。