レスポンシブデザイン

歴史のある時点で、Web サイトを設計するときに次の 2 つの選択肢がありました。

• ブラウザーのウィンドウに合わせて伸縮するリキッド（液状）のサイト
• または、ピクセル単位の固定サイズによる固定幅のサイトを作成できます。

これらの 2 つのアプローチは、サイトを設計する人の画面上では最も見栄えの良い Web サイトをもたらす傾向がありました！ リキッドのサイトは、小さな画面では押しつぶされたデザインになり（下図参照）、大きな画面では読みにくいほど長い行長になります。

固定幅のサイトでは、画面の幅がサイトの幅よりも小さいと水平スクロールバーが発生するリスクがあり（下図参照）、大きな画面ではデザインの端に多くの空白ができます。

モバイル Web が最初の多機能携帯電話で現実のものになり始めたため、モバイルを採用したい企業は通常、異なる URL（多くの場合 m.example.com や example.mobi など）を使用して、サイトの特別なモバイルバージョンを作成しました。 これは、サイトの 2 つの異なるバージョンを開発し、最新の状態に保つ必要があることを意味しました。

さらに、これらのモバイルサイトは、しばしば非常に切り詰められたエクスペリエンスを提供しました。 モバイルデバイスがより強力になり、完全な Web サイトを表示できるようになったため、サイトのモバイルバージョンに閉じ込められ、フル機能のデスクトップバージョンのサイトにあることがわかっている情報にアクセスできないモバイルユーザーにとって、これはいらだたしいことでした。

Web サイトを構築する際のリキッドまたは固定幅の方法の欠点を解決するために、多くのアプローチが開発されました。 2004 年に Cameron Adams は、解像度依存レイアウト（英語）という題名の投稿を書き、さまざまな画面解像度に適応できるデザインを作成する方法を説明しました。 このアプローチでは、画面解像度を検出して正しい CSS をロードするために JavaScript が必要でした。

Zoe Mickley Gillenwater は、フレキシブル（柔軟な）サイトを作成するさまざまな方法の説明と形式化をし、画面を埋めるか、サイズを完全に固定するかの間で妥協点を見つけるために尽力しました。

レスポンシブデザインという用語は、2010 年に Ethan Marcotte によって初めて作られ、3 つのテクニックを組み合わせて使用することを説明しています。

1. 1 つ目は、Gillenwater が既に検討したフルード（流動的な）グリッドのアイデアであり、Marcotte の記事 Fluid Grids（2009 年に A List Apart で公開）で読むことができます。
2. 2 番目のテクニックは、フルード画像のアイデアです。 max-width プロパティを 100% に設定する非常に簡単なテクニックを使用すると、画像が含まれる列が画像の本来のサイズより狭くなった場合、画像は小さく縮小されますが、大きくなることはありません。 これにより、画像はオーバーフローするのではなく、柔軟なサイズの列に収まるように縮小できますが、列が画像よりも広くなった場合には大きくならず、ピクセル化もされません。
3. 3 番目の重要なコンポーネントはメディアクエリーです。 メディアクエリーにより、CSS のみを使用して、Cameron Adams が JavaScript を使用して以前に検討したタイプのレイアウトの切り替えができるようになります。 すべての画面サイズに対して 1 つのレイアウトを使用するのではなく、レイアウトを変更できます。 サイドバーは小さな画面に合わせて位置を変更したり、別のナビゲーションを表示したりできます。

レスポンシブ Web デザインは独立した技術ではないことを理解することが重要です。 レスポンシブ Web デザインは、コンテンツの表示に使用されているデバイスに対応できるレイアウトを作成するために使用される、Web デザインへのアプローチまたはベストプラクティスのセットを説明する用語です。 Marcotte の最初の検討では、これは柔軟なグリッド（フロートを使用）とメディアクエリーを意味していましたが、その記事が書かれてからほぼ 10 年で、レスポンシブに動作することがデフォルトになりました。 最新の CSS レイアウトの方法は本質的にレスポンシブであり、レスポンシブサイトの設計を容易にするために Web プラットフォームに新しいものが組み込まれています。

この記事の残りの部分では、レスポンシブサイトを作成するときに使用できるさまざまな Web プラットフォーム機能について説明します。

レスポンシブデザインは、メディアクエリー（media query）によってのみ出現できました。 Media Queries Level 3 仕様は 2009 年に勧告候補になりました。 つまり、ブラウザーでの実装の準備が整ったとみなされました。 メディアクエリーを使用すると、一連のテスト（例えば、ユーザーの画面が特定の幅または特定の解像度より大きいかどうか）を実行し、CSS を選択的に適用して、ユーザーのニーズに合わせて適切にページをスタイルできます。

例えば、次のメディアクエリーは、現在の Web ページが画面メディア（したがって印刷ドキュメントではない）として表示され、ビューポートの幅が少なくとも 800 ピクセルであるかどうかをテストします。 .container セレクターの CSS は、これら 2 つのことが当てはまる場合にのみ適用されます。

@media screen and (min-width: 800px) {
  .container {
    margin: 1em 2em;
  }
}

スタイルシート内に複数のメディアクエリーを追加して、レイアウト全体またはその一部をさまざまな画面サイズに最適に調整できます。 メディアクエリーが導入され、レイアウトが変更されるポイントは、ブレークポイント（breakpoints）と呼ばれます。

メディアクエリーを使用する場合の一般的なアプローチは、狭い画面のデバイス（携帯電話など）用に単純な単一列レイアウトを作成し、次に、より大きな画面かチェックして複数列レイアウトを処理するのに十分な画面幅があることがわかったら、複数列レイアウトを実装することです。 これは多くの場合、モバイルファーストデザインと呼ばれます。

詳細については、メディアクエリーの MDN ドキュメントをご覧ください。

レスポンシブサイトは、ブレークポイント間でレイアウトを変更するだけでなく、柔軟なグリッド上に構築されます。 柔軟なグリッドは、存在する可能性のあるすべてのデバイスサイズを対象にする必要がなく、ピクセルパーフェクトレイアウトを構築する必要がないことを意味します。 膨大な数の異なるサイズのデバイスが存在し、少なくともデスクトップでは常にブラウザーのウィンドウが最大化されているわけではないという事実を考えると、ピクセルパーフェクトレイアウトのアプローチは不可能です。

柔軟なグリッドを使用することで、ブレークポイントを追加し、コンテンツの見た目が悪くなり始めた時点でデザインを変更するだけで済みます。 例えば、画面サイズが大きくなると行長が読みにくい長さになり、ボックスが狭くなるにつれて各行に 2 つの単語が押しつぶされるようになります。

レスポンシブデザインの初期には、レイアウトを実行するための唯一の選択肢はフロートを使用することでした。 柔軟なフロートレイアウトは、各要素に幅をパーセントで指定し、レイアウト全体で合計が 100% を超えないようにすることで実現します。 フルードグリッドに関する元の作品で、Marcotte はピクセルを使用して設計されたレイアウトを取得し、それをパーセントに変換するための公式を詳しく説明しました。

対象 / コンテキスト = 結果

例えば、対象の列のサイズが 60 ピクセルで、コンテキスト（またはコンテナ）が 960 ピクセルの場合、60 を 960 で割って、小数点を右に 2 桁移動した後、CSS で使用できる値を得られます。

.col {
  width: 6.25%; /* 60 / 960 = 0.0625 */
}

このアプローチは、今日の Web の多くの場所で見られます。 これについては、過去のレイアウト方法の記事のレイアウトセクションで説明しています。 仕事でこのアプローチを使用している Web サイトに出くわす可能性が高いため、フロートベースの柔軟なグリッドを使用して最新のサイトを構築しなくても、理解する価値があります。

次の例は、メディアクエリーと柔軟なグリッドを使用した簡単なレスポンシブデザインを示しています。 狭い画面では、レイアウトは次のように上下に積み重ねられたボックスを表示します。

より広い画面では、次のように 2 つの列に移動します。

段組みレイアウト、フレックスボックス、グリッドなどの最新のレイアウト方法は、デフォルトでレスポンシブです。 それらはすべて、あなたが柔軟なグリッドを作成しようとしていると仮定し、それを行う簡単な方法を提供します。

これらのレイアウトメソッドの中で最も古いものは段組み（multicol）です。 column-count の指定で、コンテンツを分割する列の数を指定します。 ブラウザーはこれらのサイズを計算し、サイズは画面サイズに応じて変化します。

.container {
  column-count: 3;
}

代わりに column-width の指定で、最小幅を指定します。 ブラウザーは、その幅の列をコンテナに収まるだけ作成し、すべての列の間で残りのスペースを分配します。 したがって、列の数は、どのくらいのスペースがあるかに応じて変化します。

.container {
  column-width: 10em;
}

フレックスボックス（Flexbox）では、フレックス項目は初期の振る舞いとして、コンテナ内のスペースに従って、項目間のスペースを縮小および分散します。 flex-grow と flex-shrink の値を変更することにより、項目の周囲に多少のスペースがあった場合の振る舞いを指定できます。

次の例では、CSS レイアウトのフレックスボックスのトピックのフレックス項目の柔軟なサイズ変更で説明されているように、flex: 1 の一括指定を使用して、それぞれのフレックス項目はフレックスコンテナ内に同じ量のスペースを取ります。

.container {
  display: flex;
}

.item {
  flex: 1;
}

CSS グリッドレイアウトでは、fr 単位を使用して、グリッドトラック全体に利用可能なスペースを分散できます。 次の例では、サイズが 1fr の 3 つのトラックを持つグリッドコンテナを作成します。 これにより、3 つの列トラックが作成され、それぞれがコンテナ内の使用可能なスペースの一部を取得します。 グリッドを作成するこのアプローチの詳細については、CSS レイアウトのグリッドのトピックの fr 単位での柔軟なグリッドを参照してください。

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

レスポンシブ画像に対する最も簡単なアプローチは、レスポンシブデザインに関する Marcotte の初期の記事で説明されているとおりです。 基本的に、必要な最大サイズの画像を取得し、縮小します。 これは現在でも使用されているアプローチであり、ほとんどのスタイルシートでは次の CSS がどこかにあります。

img {
  max-width: 100%;
}

このアプローチには明らかな欠点があります。 画像は本来のサイズよりもはるかに小さく表示される可能性があり、これは帯域幅の浪費です — モバイルユーザーは、ブラウザーのウィンドウに実際に表示されるサイズの数倍の画像をダウンロードすることになる場合があります。 さらに、モバイルとデスクトップで同じ画像アスペクト比を使用したくない場合があります。 例えば、モバイル用に正方形の画像を用意して、デスクトップのランドスケープ画像と同じシーンを表示するとよいかもしれません。 または、モバイルでの画像のサイズが小さいことを認めながら、小さな画面サイズでもより簡単に理解できるまったく別の画像を表示したい場合があります。 これらのことは、単に画像を縮小するだけでは達成できません。

<picture> 要素と <img> の srcset 属性と size 属性を使用したレスポンシブ画像は、これらの両方の問題を解決します。 「ヒント」（画像に最適な画面サイズと解像度を記述するメタデータ）とともに複数のサイズを提供でき、ブラウザーは各デバイスに最適な画像を選択し、ユーザーが使用しているデバイスに適した画像サイズをダウンロードできるようにします。

さまざまなサイズで使用されるアートディレクション画像は、さまざまな画面サイズに対して、さまざまな切り抜きまたはまったく異なる画像を提供します。

MDN の HTML の学習セクションで、レスポンシブ画像の詳細なガイドを見つけることができます。

以前の研究ではカバーされていなかったレスポンシブデザインの要素は、レスポンシブタイポグラフィ（responsive typography）のアイデアでした。 基本的に、これは、メディアクエリー内のフォントサイズを変更して、画面を占める量を増減させることを表します。

この例では、レベル 1 の見出しを 4rem に設定します。 つまり、基本フォントサイズの 4 倍になります。 それは本当に大きな見出しです！ このジャンボ見出しは大きな画面サイズでのみ必要です。 したがって、まず小さな見出しを作成し、ユーザーが少なくとも 1200px の画面サイズを持っていることがわかった場合は、メディアクエリーを使用して大きな見出しで上書きします。

html {
  font-size: 1em;
}

h1 {
  font-size: 2rem;
}

@media (min-width: 1200px) {
  h1 {
    font-size: 4rem;
  }
}

上記のレスポンシブグリッドの例を編集して、説明した方法を使用してレスポンシブタイポグラフィも含めました。 レイアウトが 2 列バージョンになると、見出しのサイズがどのように切り替わるかを確認できます。

モバイルでは、次のように見出しが小さくなります。

ただし、デスクトップでは、次のようにより大きな見出しサイズで表示されます。

このタイポグラフィへのアプローチが示すように、メディアクエリーをページのレイアウトの変更のみに制限する必要はありません。 これらを使用して任意の要素を微調整し、代わりとなる画面サイズでより使いやすく魅力的にすることができます。

興味深いアプローチは、ビューポート単位 vw を使用してレスポンシブタイポグラフィを有効にすることです。 1vw はビューポートの幅の 1% に等しいため、vw を使用してフォントサイズを設定すると、常にビューポートのサイズに関連付けられます。

h1 {
  font-size: 6vw;
}

上記の問題は、vw 単位を使用するとユーザーがテキストをズームする機能を失うことです。 そのテキストは常にビューポートのサイズに関連しているためです。 したがって、ビューポート単位を単独で使用してテキストを設定しないでください。

解決策があり、calc() を使用する必要があります。 em や rem などの固定サイズを使用した値に vw 単位を足しても、テキストはズーム可能です。 次のように基本的に、vw 単位はズームした値に足します。

h1 {
  font-size: calc(1.5rem + 3vw);
}

これは、見出しのフォントサイズを指定する必要があるのは一度だけで、モバイル用にメディアクエリーで再定義せずともよいことを意味します。ビューポートのサイズを大きくするにつれて、フォントは徐々に大きくなります。

レスポンシブなページの HTML ソースを見ると、通常、ドキュメントの <head> に次の <meta> タグがあります。

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

このメタタグは、モバイルブラウザーに、ビューポートの幅をデバイスの幅に設定し、ドキュメントを意図したサイズの 100% にスケーリングするよう指示します。 これにより、ドキュメントはモバイル向けに最適化されたサイズで表示されます。

なぜこれが必要でしょうか？ モバイルブラウザーは、ビューポートの幅について嘘をつく傾向があるためです。

このメタタグが存在するのは、最初の iPhone が出て、人々が小さな電話画面で Web サイトを表示し始めたとき、ほとんどのサイトがモバイル向けに最適化されていなかったためです。 したがって、モバイルブラウザーはビューポートの幅を 960 ピクセルに設定し、その幅でページをレンダリングし、デスクトップレイアウトの縮小版として結果を表示します。 他のモバイルブラウザー（Google Android など）も同じことを行いました。 ユーザーは Web サイトをズームインして画面内を移動し、興味のある部分を見ることができましたが、見た目は悪かったです。 レスポンシブデザインのないサイトに出くわす不幸がある場合、今日でもこれを見ることができます。

問題は、モバイルブラウザーでは、ブレークポイントとメディアクエリーを使用したレスポンシブデザインが意図したとおりに機能しないことです。 ビューポートの幅が 480px 以下で作動する狭い画面レイアウトがあり、ビューポートが 960px に設定されている場合、モバイルで狭い画面のレイアウトが表示されることはありません。 width=device-width を設定すると、Apple のデフォルトの width=960px がデバイスの実際の幅で上書きされるため、メディアクエリーは意図したとおりに機能します。

したがって、ドキュメントの先頭に上記の HTML 行を常に含める必要があります。

ビューポートメタタグで使用できる設定は次のように他にもありますが、一般的には上記の行を使用します。

• initial-scale: ページの初期ズームを設定します。 これには 1 を設定します。
• height: ビューポートに特定の高さを設定します。
• minimum-scale: 最小ズームレベルを設定します。
• maximum-scale: 最大ズームレベルを設定します。
• user-scalable: no に設定すると、ズームを禁止します。

minimum-scale、maximum-scale、特に user-scalable を no に設定することは避けてください。 ユーザーには必要なだけズームを許可する必要があります。 これを禁止すると、アクセシビリティの問題が発生します。

レスポンシブデザインとは、表示される環境に対応するサイトまたはアプリのデザインを指します。 これには多くの CSS および HTML の機能とテクニックが含まれており、現在では基本的に Web サイトをデフォルトで構築する方法になっています。 サイトを携帯電話でアクセスするところを考えてください — デスクトップバージョンを縮小したサイトや、物事を見つけるために横にスクロールする必要があるサイトに出くわすことは、おそらくかなり珍しいことです。 これは、Web がレスポンシブデザインのこのアプローチに移行したためです。

また、これらのレッスンで学んだレイアウト方法の助けを借りて、レスポンシブデザインを実現することがはるかに容易になりました。 今日の Web 開発が初めてでも、レスポンシブデザインの初期よりも多くのツールを意のままに使用できます。 したがって、参照している資料の年齢を確認する価値があります。 歴史的な記事はまだ有用ですが、CSS と HTML の現代的な用法により、訪問者がどのデバイスを使用してサイトを表示しても、エレガントで便利なデザインをはるかに簡単に作成できます。

• 前のページ
• Overview: CSS layout
• 次のページ