CSS メディア・クエリーを使ってレスポンシブ Web サイトを作成する

1 つのデザインですべての画面サイズに対応する

現在、幅が固定された静的な Web サイトが、画面サイズに応じて拡大/縮小する柔軟なレスポンシブ・デザインに次々と置き換えられています。レスポンシブ・デザインを使えば、Web サイトにアクセスしている機器の種類や画面サイズによらずに使用可能なインターフェースを表現することができます。また、さまざまな画面サイズのスマートフォンやタブレットが次々に発売されていますが、レスポンシブ・デザインはこれらの多様な画面サイズに対応することで、Web サイトの「将来を保証」します。レスポンシブ・デザインを実現する主な手段として使用されるのは、CSS メディア・クエリーです。この記事を読んで、デスクトップ PC、フィーチャーフォンやスマートフォン、そしてタブレットに対応する Web サイトにメディア・クエリーを使用する方法を学んでください。

Jeff Bail, Mobile Web Developer, Freelance Writer

Photo of Jeff BailJeff Bail は、これまでフォーチュン 500 社、米国政府、そして保険から教育、健康フィットネスに至るまでのさまざまな業界の新興企業のために Web サイトと Web アプリケーションを構築してきました。最近では、iPhone および Android のモバイル Web アプリケーションの作成に取り組み、何百万人ものフィットネス愛好家からなる MapMyFITNESS コミュニティーにモバイル Web アプリケーションの機能を提供しています。



2012年 11月 22日

はじめに

毎日のように新しいフィーチャーフォンやスマートフォン、タブレットが市場に登場しているなか、消費者はありとあらゆるサイズと形の機器を選択できるようになっています。一方、Web サイトの開発者はこうした状況に特有の課題に対処しなければならなくなっています。それは、従来のブラウザーだけでなく、モバイル機器やタブレットのブラウザーでも優れた外観を維持できる Web サイトにすることです。さまざまに異なる画面サイズのすべてで、最高のユーザー・エクスペリエンスを提供するにはどうすればよいのでしょうか?その答えとなるのが「レスポンシブ・デザイン」です。レスポンシブ・デザインは、表示される画面サイズに合わせてデザインを変更しますが、それを実現する主な手段としては、CSS メディア・クエリーを使用します。

この記事では、デスクトップ PC、フィーチャーフォンやスマートフォン、そしてタブレットに対応する Web サイトにメディア・クエリーを使用する方法を探ります。また、メディア・クエリーのサポートを検出して、この手法をまだサポートしていない古いブラウザーにフォールバック・エクスペリエンスを提供する方法についても学びます。

前提条件

記事に記載するサンプル・コードは、CSS メディア・クエリーをサポートしている Web ブラウザーで実行するように作られています。これらの Web ブラウザーには、Mozilla Firefox、Apple Safari、Google Chrome、および Opera が含まれます。デスクトップ・ブラウザーとモバイル・ブラウザーのなかで、CSS3 メディア・クエリーをサポートするブラウザーを網羅したリストについては、「参考文献」を参照してください。


レスポンシブ・デザイン

レスポンシブ・デザインでは、表示される画面のサイズに合わせてデザインを変更します。したがって、レンダリング先となるすべての画面でまったく同じように表示されるわけではありません。レスポンシブ・デザインは、使用可能な画面の特性に応じて最適な UI をレンダリングします。

例えば、Web サイトのレイアウトに画面の幅の 25% を占めるサイドバーがあるとすると、このサイドバーの表示は、画面サイズに大きく左右されます。大きなデスクトップ・モニターでは幅広く表示され、小型のスマートフォンの画面では極めて幅が狭くなります。さらに大きい画面サイズ、あるいはさらに小さい画面サイズでは、サイドバーが UI コンポーネントとして使用できなくなることもあります。

メディア・クエリーを使用すれば、画面サイズに応じて自動的にデザインを変更し、その画面サイズに最適な UI エクスペリエンスを提供する CSS を作成することができます。


メディア・クエリー

CSS ではバージョン 2 から、メディア・タイプという手段でメディア・サポートを使用できるようになっています。印刷用のスタイルシートを作成したことがある人は、メディア・タイプを使用したことがあります。リスト 1 に一例を記載します。

リスト 1. メディア・タイプを使用する
<link rel="stylesheet" type="text/css" href="site.css" media="screen" />
<link rel="stylesheet" type="text/css" href="print.css" media="print" />

リスト 1 の media 属性は、指定したメディアのタイプごとに、使用するスタイルシートを定義しています。

  • screen は、カラーのコンピューター画面用です。
  • print は、印刷プレビュー・モードで表示する場合、またはプリンターで印刷する場合のコンテンツ用です。

CSS バージョン 3 の仕様に含まれるメディア・クエリーは、メディア・タイプの機能を拡張し、さらに正確な表示ルールをスタイルシートで使用できるようにしています。「メディア・クエリー」とは、True または False のいずれかに評価される式です。True に評価されると、式の中に指定されたスタイルが使用されます。False に評価されると、そのスタイルは使用されません。式を使用して強化されたこの単純なロジックにより、特定のデザイン・シナリオに従ったカスタム表示ルールをより柔軟に適用することができます。

メディア・クエリーを構成するのは、1 つのメディア・タイプと、それに続く、特定の条件 (画面の最小幅など) をチェックする 1 つ以上の式です。スタイルシート内でのメディア・クエリーのルールは、リスト 2 のような内容になります。

リスト 2. メディア・クエリーのルール
@media all and (min-width: 800px) { ... }

リスト 2 のマークアップによると、画面の横方向の幅が 800 ピクセル以上のすべてのメディア・タイプ (画面、印刷など) に、以降に続く CSS ルールが適用されることになります。例では、CSS ルールを省略記号で示しています。上記のメディア・クエリーの内容は以下のとおりです。

  • @media all は、メディア・タイプを表しており、この CSS をすべてのメディア・タイプに適用するように指定します。
  • (min-width:800px) は、メディア・クエリーを構成する式です。この式はブラウザーに対し、ブラウザーの画面の表示幅が 800 ピクセル以上の場合にのみ、以降に続く CSS を適用するように指示します。

リスト 2 に示されている alland のキーワードは、省略できることに注意してください。メディア・クエリーをすべてのメディア・タイプに適用する場合には、all を省略することができます。それに続く and もオプションです。省略した構文を使用して作成し直したメディア・クエリーは、リスト 3 のようになります。

リスト 3. 省略した構文
@media (min-width:800px) { ... }

メディア・クエリーには、複合式を含めることもできます。例えば、最小幅が 800 ピクセル、かつ最大幅が 1200 ピクセルの場合にのみ適用するスタイルを作成するとしたら、リスト 4 のルールを使用することができます。

リスト 4. 複合式
@media (min-width:800px) and (max-width:1200px) { ... }

式には、必要なだけ and 条件をいくつでも使用することができます。例えば、特定の画面の向きをチェックするための別の条件を追加するには、and キーワードを追加して、その後に追加の orientation メディア・クエリーを続ければよいのです (リスト 5 を参照)。

リスト 5. and 条件
@media (min-width:800px) and (max-width:1200px) and (orientation:portrait) { ... }

リスト 5 のメディア・クエリーは、最小幅が 800 ピクセル、最大幅が 1200 ピクセル、そして向きが縦方向の場合にのみアクティブになります (通常、向きが意味を持つのは、縦横に簡単に回転できるスマートフォンとタブレットだけです)。これらの条件が 1 つでも False であれば、このメディア・クエリーのルールは適用されません。

and キーワードと反対の意味を持つキーワードは or です。このキーワードは and と同じく、条件をグループにまとめて複合式を作ります。2 つの条件が or で区切られた式は、いずれかの条件が真である場合に True となります (リスト 6 を参照)。

リスト 6. or キーワード
@media (min-width:800px) or (orientation:portrait) { ... }

上記の場合、幅が 800 ピクセル以上であるか、向きが縦方向であれば、このルールが適用されます。

not も、覚えておくと便利なメディア・クエリーのキーワードです。メディア・クエリーの先頭に not を配置すると、結果の否定になります。つまり、クエリーに not キーワードが使われていなかった場合に真になるようであれば、結果は偽になります。リスト 7 に一例を記載します。

リスト 7. not の使用
@media (not min-width:800px) { ... }

平たく言えば、リスト 7 のコードは、最小幅が 800 ピクセルでない限り、以降に続く CSS ルールを適用します。これまでの例では、メディア・クエリー内でピクセルだけを測定単位として使用していますが、測定単位はピクセルに限られるわけではありません。センチメートル (cm)、インチ (in)、ミリメートル (mm) など、CSS で有効な測定単位であれば、何でも使用できます。


便利なメディア・フィーチャー

メディア・クエリーには、幅、色、グリッドなど、使用できるメディア・フィーチャーがいくつもあります。ただし、この記事では、使用できるすべてのメディア・フィーチャーについて説明することはしません。すべてを網羅したリストは、World Wide Web Consortium (W3C) のメディア・クエリーに関する資料に記載されています (「参考文献」を参照)。

レスポンシブ Web サイトをデザインするために最低限知っていなければならないメディア・フィーチャーは、向き (orientation)、幅 (width)、高さ (height) です。向きは単純なメディア・フィーチャーで、その値は portrait または landscape しかありません。この 2 つの値は、ユーザーがフィーチャーフォンやスマートフォン、またはタブレットを持っている方向に対応し、それぞれのフォーム・ファクターに合わせてコンテンツを最適化できるようにします。画面の高さが幅を超えている場合には縦 (portrait) モード、画面の幅が高さを超えている場合には横 (landscape) モードと見なされます。リスト 8 に、orientation メディア・クエリーの使用例を記載します。

リスト 8. orientation メディア・クエリー
@media (orientation:portrait) { ... }

width と height の振る舞いは同様で、どちらも接頭辞に min-max- を使用することができます。リスト 9 に、有効なメディア・クエリーを記載します。

リスト 9. width と height を使用したメディア・クエリー
@media (min-width:800px) and (min-height:400px) { ... }

メディア・フィーチャーの widthheight は、接頭辞の min-max- なしでも使用することができます (リスト 10 を参照)。

リスト 10. 接頭辞の min-max- を使用しない場合
@media (width:800px) and (height:400px) { ... }

リスト 10 のメディア・クエリーは、画面の幅が 800 ピクセルちょうどで、高さも 400 ピクセルちょうどの場合に適合します。けれども実際には、このようなメディア・クエリーは、有効に使用するにはあまりにも限定的です。正確なサイズを検出するというシナリオは、すべてとは言わないまでも、ほとんどの Web サイトの訪問者の場合にはあり得ないことです。通常、レスポンシブ・デザインで画面の検出を行う場合には範囲を使用します。

このセクションでは、サイズの範囲を指定するメディア・クエリーについて説明したので、次のセクションでは、レスポンシブなサイトをデザインする際に役立つ、よく使用されるメディア・クエリーのいくつかを詳しく探ります。


よく使用されるメディア・クエリー

一般消費者向けの製品であるスマートフォンとタブレットで最初に市場を開拓したのは Apple であるため、以下のメディア・クエリーのほとんどは、Apple の機器のサイズがベースとなっています。

横モードのスマートフォン (iPhone) をターゲットにする場合: @media (min-width: 321px) { ... }

縦モードのスマートフォン (iPhone) をターゲットにする場合: @media (max-width: 320px) { ... }

横モードのタブレット (iPad) をターゲットにする場合: @media (orientation: landscape) { ... }

縦モードのタブレット (iPad) をターゲットにする場合: @media (orientation: portrait) { ... }

お気付きかもしれませんが、iPad の場合には orientation メディア・フィーチャーを使用している一方、iPhone の場合には width を使用しています。その理由は、残念なことに iPhone は orientation メディア・フィーチャーをサポートしていないためです。したがって、width を使用して向きが切り替わるポイントをシミュレートしなければなりません。よく使用されるメディア・クエリーについての詳細は、「参考文献」を参照してください。


SASS でのメディア・クエリー

Ruby on Rails での組み込みサポートによって人気を博している SAAS (Syntactically Awesome Style Sheets) が、Web 開発コミュニティーでも盛んに取り上げられています。この記事では SASS についての詳細は説明しませんが、SASS ベースのスタイル・シートでメディア・クエリーを使用する基本的な方法を説明しておきます。SASS の詳細を学ぶには、「参考文献」を参照してください。

メディア・クエリーは、SASS でも通常の CSS とまったく同じように振る舞いますが、1 つだけ例外があります。それは、SASS では、メディア・クエリーを他の CSS ルール内にネストできることです。メディア・クエリーが他の CSS ルール内にネストされる場合、そのメディア・クエリーによって、スタイルシートの最上位にルールが設定されます (リスト 11 を参照)。

リスト 11. ネストされたメディア・クエリー
#header {
  width: 400px;
  @media (min-width: 800px) {
    width: 100%;
  }
}

リスト 11 のサンプル・コードは、リスト 12 のコードにコンパイルされます。

リスト 12. コンパイル結果
#header {
  width: 400px;
}
@media (min-width: 800px) {
  #header {
    width: 100%;
  }
}

メディア・クエリーを構成する

メディア・クエリーの作成方法がわかったところで、次は、メディア・クエリーを論理的かつ体系的な方法で CSS コード・ベースに取り込む方法を考えます。メディア・クエリーをどのように構成するかは、主に個人の好みの問題なので、このセクションでは 2 つの主な手法のそれぞれに伴う利点と欠点を探ります。

手法の 1 つは、画面のサイズごとにまったく異なるスタイルシートを指定する方法です。その利点としては、画面のサイズごとのルールがそれぞれ異なるスタイルシートに保持されるため、表示ロジックがはっきりと分離され、チームがおそらく保守をしやすくなることが挙げられます。また、ソース・コード・ブランチ同士をマージするのが多少容易になる可能性もあります。その一方、この利点は欠点でもあります。メディア・クエリーごとに異なるスタイルシートを作成すると、ある要素のすべてのスタイルを同じファイルの同じ場所にまとめて配置できなくなるためです。ある要素の CSS を変更する際に調べるべき場所が増えるということは、Web サイトの CSS を保守するのがより大変な作業になるということでもあります。

もう 1 つの手法は、既存のスタイルシートで、要素の他のスタイルが定義されている場所のすぐ後ろでメディア・クエリーを使用する方法です。この場合、すべての要素のスタイル設定が 1 箇所にまとめて保持されるという利点があります。この手法では、複数のチームで作業するときにソース・コードのマージ作業が多くなる可能性がありますが、管理しやすく、あらゆるチーム・ベースのソフトウェア開発の共通部分となります。

正しい手法、誤った手法というものはありません。プロジェクトとチームにとって、最も理にかなった手法を選んでください。


ブラウザー・サポート

そろそろ、皆さんは CSS メディア・クエリーが素晴らしいツールであることを確信し、どのブラウザーが CSS メディア・クエリーをサポートしているのか知りたいと思っていることでしょう。これに関しては、嬉しい知らせと悪い知らせがあります。

  • 嬉しい知らせ: 最近のほとんどのブラウザー (スマートフォンのブラウザーを含む) では、CSS メディア・クエリーをサポートしています。
  • 悪い知らせ: Windows Internet Explorer 8 までは、Microsoft のブラウザーではメディア・クエリーがサポートされていません。

    これはほとんどのプロの Web 開発者にとって、Internet Explorer でメディア・クエリーをサポートするためのソリューションが必要となることを意味します。

以下で説明するソリューションは、respond.js という名前の JavaScript によるポリフィルです。

respond.js によるポリフィル

respond.js は、Web ブラウザーを機能強化して、CSS メディア・クエリーをネイティブにサポートしていないブラウザーでも CSS メディア・クエリーを使用できるようにする軽量の JavaScript ライブラリーです。このスクリプトは、ページで参照されているすべての CSS をループ処理して、メディア・クエリーを使用する CSS ルールを構文解析します。次に、ブラウザーの幅の変更をモニターし、変更に応じてメディア・クエリーに相当するスタイルを CSS に追加したり、削除したりします。その結果、ネイティブで CSS メディア・クエリーをサポートしていないブラウザーでも、CSS メディア・クエリーが機能するようになります。

respond.js は JavaScript ベースのソリューションであるため、このスクリプトを機能させるには、ブラウザーで JavaScript を有効にする必要があります。respond.js では、レスポンシブ・デザインを作成するために必要な最小と最大の width のメディア・クエリーをサポートすることだけに焦点が絞られています。したがって、現在使用される可能性のあるあらゆる CSS メディア・クエリーに対応する完全な代替手段にはなりません。このスクリプトの機能と制約事項についての詳細は、「参考文献」を参照してください。

respond.js は、利用できる多数のオープンソース・メディア・クエリー・ポリフィルのうちの 1 つに過ぎません。respond.js では必要を満たさないことがわかった場合は、少し調べるだけで、代わりに使用できるいくつかのポリフィルがすぐに見つかるはずです。


まとめ

CSS メディア・クエリーを使用すれば、どのタイプのブラウザーまたは機器で Web サイトにアクセスするかに関係なく、そのブラウザーや機器の特定の画面サイズを対象とした確かなユーザー・エクスペリエンスを簡単に作成することができます。CSS メディア・クエリーは、新たなモバイル Web デザインおよび開発手法であるレスポンシブ・デザインの中核となっています。Web サイトでメディア・クエリーを試しに使用するのに実質的なコストはかからないので (既存の CSS ファイルを機能強化するだけのことです)、試してみない手はありません。タブレット、フィーチャーフォンやスマートフォン、そして電子書籍リーダーで皆さんの Web サイトをブラウズする訪問者は、きっと感謝することでしょう。

参考文献

学ぶために

  • Can I use CSS3 Media Queries?: CSS メディア・クエリーのブラウザー・サポート状況を示すリストを参照してください。
  • メディア・クエリーに関する W3C 勧告: 使用できるメディア・フィーチャーをすべて網羅しています。
  • Media Queries for Standard Devices: よく使用されているメディア・クエリーについて詳しく説明しています。
  • SASS: SASS の公式サイトで、SASS の使用方法の詳細を調べてください。
  • My developerWorks: developerWorks のエクスペリエンスを自分流にカスタマイズしてください。
  • developerWorks の XML エリア: DTD、スキーマ、XSLT を含め、XML 分野でのスキルを磨くために必要なリソースが揃っています。広範な技術に関する記事とヒント、チュートリアル、標準、そして IBM Redbooks については、XML 技術文書一覧を参照してください。
  • IBM XML 認定: XML や関連技術の IBM 認定技術者になる方法について調べてください。
  • XML 技術文書一覧: 広範な技術に関する記事とヒント、チュートリアル、標準、そして IBM Redbooks については、developerWorks XML ゾーンを参照してください。
  • developerWorks Web architecture ゾーン: さまざまな Web ベースのソリューションを話題にした記事を調べてください。広範な技術に関する記事とヒント、チュートリアル、標準、そして IBM Redbooks については、Web 開発の Technical Library を参照してください。
  • developerWorks の Technical events and webcasts: これらのセッションで最新情報を入手してください。
  • developerWorks オンデマンド・デモ: 初心者向けの製品のインストールおよびセットアップから熟練開発者向けの高度な機能に至るまで、さまざまに揃ったデモを見てください。
  • Twitter での developerWorks: 今すぐ登録して developerWorks のツイートをフォローしてください。

製品や技術を入手するために

  • Respond.js: Github で公式 respond.js プロジェクトにアクセスしてください。
  • IBM 製品の評価版: DB2、Lotus、Rational、Tivoli、および WebSphere のアプリケーション開発ツールとミドルウェア製品を体験するには、評価版をダウンロードするか、IBM SOA Sandbox のオンライン試用版を試してみてください。

議論するために

  • developerWorks コミュニティー: ここでは他の developerWorks ユーザーとのつながりを持てる他、開発者によるブログ、フォーラム、グループ、ウィキを調べることができます。

コメント

developerWorks: サイン・イン

必須フィールドは(*)で示されます。


IBM ID が必要ですか?
IBM IDをお忘れですか?


パスワードをお忘れですか?
パスワードの変更

「送信する」をクリックすることにより、お客様は developerWorks のご使用条件に同意したことになります。 ご使用条件を読む

 


お客様が developerWorks に初めてサインインすると、お客様のプロフィールが作成されます。会社名を非表示とする選択を行わない限り、プロフィール内の情報(名前、国/地域や会社名)は公開され、投稿するコンテンツと一緒に表示されますが、いつでもこれらの情報を更新できます。

送信されたすべての情報は安全です。

ディスプレイ・ネームを選択してください



developerWorks に初めてサインインするとプロフィールが作成されますので、その際にディスプレイ・ネームを選択する必要があります。ディスプレイ・ネームは、お客様が developerWorks に投稿するコンテンツと一緒に表示されます。

ディスプレイ・ネームは、3文字から31文字の範囲で指定し、かつ developerWorks コミュニティーでユニークである必要があります。また、プライバシー上の理由でお客様の電子メール・アドレスは使用しないでください。

必須フィールドは(*)で示されます。

3文字から31文字の範囲で指定し

「送信する」をクリックすることにより、お客様は developerWorks のご使用条件に同意したことになります。 ご使用条件を読む

 


送信されたすべての情報は安全です。


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=60
Zone=Web development
ArticleID=846649
ArticleTitle=CSS メディア・クエリーを使ってレスポンシブ Web サイトを作成する
publish-date=11222012