このページは Cloud Translation API によって翻訳されました。

レスポンシブデザイン

この Codelab は、Google Developers トレーニングチームが開発した「プログレッシブウェブアプリの開発」トレーニングコースの一部です。Codelab を順番に進めると、このコースを最大限に活用できます。

コースの詳細については、プログレッシブウェブアプリの開発の概要をご覧ください。

はじめに

このラボでは、ウェブサイトのコンテンツをレスポンシブにする方法について説明します。

学習内容

複数のフォームファクタでアプリが適切に動作するようにスタイルを設定する方法
Flexbox を使用してコンテンツを簡単に列に整理する方法
メディアクエリを使用して画面サイズに基づいてコンテンツを再編成する方法

必要な予備知識

基本的な HTML と CSS

必要なもの

ターミナル/シェルにアクセスできるパソコン
インターネット接続
テキストエディタ

GitHub から pwa-training-labs リポジトリをダウンロードするか、クローンを作成し、必要に応じて Node.js の LTS バージョンをインストールします。

ローカル開発サーバーがない場合は、Node.js http-server パッケージをインストールします。

npm install http-server -g

responsive-design-lab/app/ ディレクトリに移動して、サーバーを起動します。

cd responsive-design-lab/app
http-server -p 8080 -a localhost -c 0

サーバーは Ctrl-c でいつでも終了できます。

ブラウザを開き、localhost:8080/ に移動します。

注: ラボに干渉しないように、Service Worker の登録を解除し、localhost の Service Worker キャッシュをすべてクリアします。Chrome DevTools でこれを行うには、[アプリケーション] タブの [ストレージを消去] セクションで [サイトデータを消去] をクリックします。

プロジェクトを開くことができるテキストエディタがある場合は、responsive-design-lab/app/ フォルダを開きます。こうしておけば、情報を常に整理整頓しておくのも容易になります。それ以外の場合は、パソコンのファイルシステムでフォルダを開きます。app/ フォルダは、ラボを構築する場所です。

このフォルダには次のものが含まれています。

index.html は、サンプルサイト/アプリケーションのメインの HTML ページです。
modernizr-custom.js は、Flexbox のサポートのテストを簡素化する機能検出ツールです。
styles/main.css は、サンプルサイトのカスケードスタイルシートです。

ブラウザでアプリに戻ります。ウィンドウの幅を 500 ピクセル未満に縮小すると、コンテンツが適切にレスポンシブにならないことがわかります。

ブラウザでデベロッパーツールを開き、デバイスモードを有効にします。このモードでは、モバイルデバイスでのアプリの動作をシミュレートします。固定幅のコンテンツが画面に収まるように、ページが縮小表示されています。ほとんどのユーザーにとってコンテンツが小さすぎるため、ズームやパンをしなければならず、ユーザーエクスペリエンスが低下します。

index.html の TODO 3 を次のタグに置き換えます。

<meta name="viewport" content="width=device-width, initial-scale=1">

ファイルを保存します。ブラウザでページを更新し、デバイスモードでページを確認します。ページが縮小されなくなり、コンテンツのスケールがパソコンのスケールと一致していることがわかります。デバイスエミュレータでコンテンツが予期しない動作をする場合は、デバイスモードをオン / オフしてリセットします。

注: デバイスエミュレーションでは、モバイルデバイスでサイトがどのように表示されるかをほぼ正確に把握できますが、全体像を把握するには、実際のデバイスでサイトをテストする必要があります。Chrome と Firefox での Android デバイスのデバッグについて詳しくは、それぞれのリンクをご覧ください。

説明

meta viewport タグは、ページのサイズやスケーリングをどう制御するかをブラウザに伝えます。width プロパティは、ビューポートのサイズを制御します。特定のピクセル数（width=500 など）または特別な値 device-width,（100% のスケールでの CSS ピクセル単位の画面の幅）に設定できます。（対応する height 値と device-height 値もあります。これらは、ビューポートの高さに基づいてサイズや位置が変化する要素を含むページで役立ちます）。

initial-scale プロパティは、ページが最初に読み込まれるときのズームレベルを制御します。初期スケールを設定するとエクスペリエンスは向上しますが、コンテンツは画面の端を超えてオーバーフローします。これは次のステップで修正します。

詳細情報

ビューポートを設定する - レスポンシブウェブデザインの基礎
ビューポートメタタグを使用してモバイルブラウザのレイアウトを制御する - MDN

styles/main.css の TODO 4 を次のコードに置き換えます。

@media screen and (max-width: 48rem) {
  .container .col {
    width: 95%;
  }
}

ファイルを保存します。ブラウザでデバイスモードを無効にして、ページを更新します。ウィンドウの幅を縮小してみてください。指定した幅でコンテンツが 1 列のレイアウトに切り替わります。デバイスモードを再度有効にして、コンテンツがデバイスの幅に合わせて表示されることを確認します。

説明

テキストを読みやすくするために、ブラウザの幅が 48rem（ブラウザのデフォルトのフォントサイズで 768 ピクセル、またはユーザーのブラウザのデフォルトのフォントサイズの 48 倍）になったときにメディアクエリを使用します。相対単位に rem を使用する理由については、em と rem の使い分けをご覧ください。メディアクエリがトリガーされると、3 つの div のそれぞれの width を変更してページ全体を埋めることで、レイアウトが 3 列から 1 列に変更されます。

フレキシブルボックスレイアウトモジュール（Flexbox）は、コンテンツをレスポンシブにするための便利で使いやすいツールです。Flexbox を使用すると、前の手順と同じ結果が得られますが、間隔の計算は自動的に行われ、コンテンツの構造化にすぐに使用できる CSS プロパティが多数用意されています。

CSS の既存のルールをコメントアウトする

styles/main.css 内のすべてのルールを /* と */ で囲んでコメントアウトします。Flexbox がサポートされていない場合のフォールバックルールは、Flexbox のプログレッシブエンハンスメントのセクションで説明します。

Flexbox レイアウトを追加する

styles/main.css の TODO 5.2 を次のコードに置き換えます。

.container {
  display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6 */
  display: -ms-flexbox;  /* TWEENER - IE 10 */
  display: flex;         /* NEW, Spec - Firefox, Chrome, Opera */
  background: #eee;  
  overflow: auto;
}

.container .col {
  flex: 1;
  padding: 1rem;
}

コードを保存して、ブラウザで index.html を更新します。ブラウザでデバイスモードを無効にして、ページを更新します。ブラウザウィンドウを狭くすると、列が細くなり、最終的に 1 列だけが表示されるようになります。次の演習でメディアクエリを使用して修正します。

説明

最初のルールでは、container div をフレキシブルコンテナとして定義しています。これにより、すべての子要素に Flex コンテキストが適用されます。Flexbox を含めるために、古い構文と新しい構文を組み合わせて、より幅広いサポートを実現しています（詳しくは、詳細をご覧ください）。

2 つ目のルールでは、.col クラスを使用して、幅が等しいフレックスの子を作成します。クラス col のすべての div の flex プロパティの最初の引数を 1 に設定すると、残りのスペースが均等に分割されます。これは、相対的な幅を自分で計算して設定するよりも便利です。

詳細情報

A Complete Guide to Flexbox - CSS Tricks
CSS Flexible Box Layout Module Level 1 - W3C
どの CSS にプレフィックスを付けるか？
Using Flexbox - CSS Tricks

省略可: 異なる相対幅を設定する

nth-child 疑似クラスを使用して、最初の 2 つの列の相対幅を 1 に、3 番目の列の相対幅を 1.5 に設定します。flex プロパティを使用して、各列の相対的な幅を設定する必要があります。たとえば、最初の列のセレクタは次のようになります。

.container .col:nth-child(1)

Flexbox でメディアクエリを使用する

styles/main.css の TODO 5.4 を次のコードに置き換えます。

@media screen and (max-width: 48rem) {
  .container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-flow: column;
  }
}

コードを保存して、ブラウザで index.html を更新します。ブラウザの幅を縮小すると、コンテンツが 1 列に再編成されます。

説明

メディアクエリがトリガーされると、flex-flow プロパティを column に設定することで、レイアウトが 3 列から 1 列に変更されます。これにより、ステップ 5 で追加したメディアクエリと同じ結果が得られます。Flexbox には、flex-flow などの他のプロパティも多数用意されています。これらのプロパティを使用すると、コンテンツを簡単に構造化、並べ替え、配置して、あらゆるコンテキストで適切にレスポンスするようにできます。

Flexbox は比較的新しいテクノロジーであるため、CSS にフォールバックを含める必要があります。

Modernizr を追加する

Modernizr は、Flexbox のサポートのテストを簡素化する機能検出ツールです。

index.html の TODO 6.1 を、カスタムの Modernizr ビルドを含めるコードに置き換えます。

<script src="modernizr-custom.js"></script>

説明

index.html の先頭に Modernizr ビルドを含めて、Flexbox のサポートをテストします。これにより、ページ読み込み時にテストが実行され、ブラウザが Flexbox をサポートしている場合は、<html> 要素に flexbox クラスが追加されます。それ以外の場合は、<html> 要素に no-flexbox クラスを追加します。次のセクションでは、これらのクラスを CSS に追加します。

注: Flexbox の flex-wrap プロパティを使用する場合は、この機能専用の Modernizr 検出器を別途追加する必要があります。一部のブラウザの古いバージョンでは Flexbox が部分的にサポートされていますが、この機能は含まれていません。

Flexbox を段階的に使用する

CSS で flexbox クラスと no-flexbox クラスを使用して、Flexbox がサポートされていない場合のフォールバックルールを指定しましょう。

次に、styles/main.css で、コメントアウトした各ルールの前に .no-flexbox を追加します。

.no-flexbox .container {
  background: #eee;
  overflow: auto;
}

.no-flexbox .container .col {
    width: 27%;
    padding: 30px 3.15% 0;
    float: left;
}

@media screen and (max-width: 48rem) {
  .no-flexbox .container .col {
    width: 95%;
  }
}

同じファイルで、残りのルールの前に .flexbox を追加します。

.flexbox .container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background: #eee;
  overflow: auto;
}

.flexbox .container .col {
  flex: 1;
  padding: 1rem;
}

@media screen and (max-width: 48rem) {
    .flexbox .container {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        flex-flow: column;
    }
}

省略可能な手順 5.3 を完了した場合は、個々の列のルールに .flexbox を追加してください。

コードを保存し、ブラウザで index.html を更新します。ページは以前と同じように表示されますが、どのデバイスのどのブラウザでも正しく動作するようになります。Flexbox をサポートしていないブラウザをお使いの場合は、そのブラウザで index.html を開いてフォールバックルールをテストできます。

詳細情報

Flexbox への移行 - Cutting the Mustard
Modernizr のドキュメント

コンテンツのスタイルを設定してレスポンシブにする方法を学びました。メディアクエリを使用すると、ユーザーのデバイスのウィンドウサイズや画面サイズに基づいてコンテンツのレイアウトを変更できます。

学習した内容

ビジュアルビューポートの設定
Flexbox
メディアクエリ

リソース