レスポンシブデザイン

レスポンシブウェブデザインが、様々な端末間でウェブサイトが動作するための標準的な手法となる以前は、ウェブ開発者はモバイルウェブデザイン、モバイルウェブ開発、または時にはモバイルフレンドリーデザインを使用していました。これは基本的にレスポンシブウェブデザインと同じで、レイアウト、コンテンツ（テキストとメディア）、パフォーマンスにおいて、物理的属性（画面サイズ、解像度）の異なる端末間でウェブサイトがうまく動作するようにすることを目的としています。

違いは主に、対象となる端末と、ソリューションを作成するために利用できる技術にあります。

• 以前はデスクトップかモバイルかいう話でしたが、今では利用できる端末はデスクトップ、ラップトップ、モバイル、タブレット、時計など多岐にわたるようになりました。いくつかの異なる画面サイズに合わせなければなりませんが、これで、一般的な画面サイズと解像度に加え、未知のものにも対応できるよう、防御的にサイトをデザインする必要があります。
• 使用するモバイル端末は、 CPU/GPU や利用できる帯域幅の点で低性能でした。 CSS はもちろん、 HTML さえ対応していないものもあり、その結果、端末が対応できるサイトを提供する前に、サーバー側でブラウザー検出を行い、端末/ブラウザーの種類を判別するのが一般的でした。モバイル端末では、実に単純で基本的な使い勝手しか提供されないことが多く、それが端末が処理することのできるすべてだったからです。最近では、モバイル端末はデスクトップコンピューターと同じ技術を処理することができるため、このような技術はあまり見かけなくなりました。
  • バッテリー寿命や 帯域幅など気にしなければならない制約がまだあるため、モバイルユーザーに適切な使い勝手を提供するために、この記事で説明したテクニックを使用しましょう。
  • ユーザーの使い勝手も考慮する必要があります。旅行サイトのモバイルユーザーは、例えばフライト時刻や遅延情報を調べたいだけで、フライト経路や会社の沿革を示す 3D アニメーションの地球儀を表示させたくないかもしれません。しかし、これはレスポンシブデザインの技術を使用して処理することができます。
• 現行の技術はレスポンシブな使い勝手を作成するのに非常に優れています。例えば、レスポンシブ画像/メディア技術は、サーバー側の解析のような技術に頼っていなくても、適切なメディアを様々な端末に提供できるようになりました。

HTML は基本的にレスポンシブ、つまり流動的です。CSS を含まない HTML だけのウェブページを作成し、ウィンドウのサイズを変更すると、ブラウザーはビューポートに合わせてテキストを自動的に再フローします。

既定のレスポンシブ動作では解決策が必要ないように聞こえるかもしれませんが、広いモニターに全画面表示された長い行のテキストは読みにくい場合があります。段組みを作成したり、大きなパディングを追加したりして、CSS で広い画面の行の長さを縮小すると、ブラウザーウィンドウを狭めたり、モバイル端末でサイトを開いたりしたユーザーには、サイトがつぶれて見えることがあります。

固定幅を設定してリサイズ不可能なウェブページを作成してもうまく行きません。画面が狭い端末ではスクロールバーが表示され、広い画面では余白が多くなってしまいます。

レスポンシブウェブデザイン (RWD) とは、様々な端末や 機器のサイズに対応するデザイン手法のことで、コンテンツをタブレット、携帯電話、テレビ、腕時計のどれで表示しても、自動的に画面に合わせることができるものです。

レスポンシブウェブデザインは単体の技術ではなく、手法のひとつです。これは、コンテンツを表示するために使用するあらゆる端末に応じることができるレイアウトを作成するために使用される、ベストプラクティス群を表すために使用される用語です。

レスポンシブデザインという用語は、2010 年に Ethan Marcotte によって初めて作られ、流動的グリッド、流動的画像、メディアクエリーを使用してレスポンシブなコンテンツを作成することを説明するものであり、 Zoe Mickley Gillenwater の書籍 Flexible Web Design で説明されています。

当時は、レイアウトに CSS の float を使用し、メディアクエリーでブラウザーの幅を問い合わせ、様々なブレークポイントに対応したレイアウトを作成することが推奨されていました。流動的画像はコンテナーの幅を超えないように設定します。これらの画像は max-width プロパティを 100% に設定しなければなりません。流動的画像は、その段組みが狭くなると縮小しますが、列が大きくなっても内在サイズより大きくなることはありません。これにより、画像はコンテンツをはみ出すことなく、そのコンテンツに合わせて拡大縮小することができ、コンテナーが画像よりも広くなっても、大きくなってピクセル化することはありません。

現代の CSS レイアウトメソッドは本質的にレスポンシブであり、Gillenwater の書籍と Marcotte の記事が発表されて以来、ウェブプラットフォームにはレスポンシブサイトの設計を容易にする多数の機能が組み込まれています。

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

メディアクエリーを使用すると、一連の検査（ユーザーの画面が特定の幅より大きいかどうか、または特定の解像度かどうかなど）を実行し、 CSS を選択的に適用して、ユーザーのニーズに合わせてページを適切にスタイル設定することができます。

例えば、次のメディアクエリーは、現在のウェブページが画面メディアとして表示され（したがって印刷文書ではない）、ビューポートの幅が 80rem 以上であるかどうかを検査します。 .container セレクターの CSS は、これら 2 つのことが当てはまる場合にのみ適用されます。

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

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

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

ブレークポイントを使用する場合、ベストプラクティスとして、個々の端末の絶対サイズではなく、相対的な単位でメディアクエリーのブレークポイントを定義することを推奨します。

メディアクエリーブロック内で定義するスタイルにはさまざまなアプローチがあります。ブラウザーのサイズの範囲に基づいてスタイルシートの <link> にメディアクエリーを使用するものから、カスタムプロパティ変数に、それぞれのブレークポイントに関連する値を格納するだけのものまであります。

詳しくは MDN ドキュメント内のメディアクエリーを探してください。

メディアクエリーは RWD に役立ちますが、必須ではありません。柔軟なグリッド、相対的な単位、最小・最大の単位の値はクエリーなしで使用することができます。

レスポンシブサイトは柔軟なグリッド上に構築されているため、全ての使用可能な端末サイズをピクセルパーフェクトなレイアウトで対象とする必要はありません。

柔軟なグリッドを使用することで、特性を変更したりブレークポイントを追加して、コンテンツの見てくれが悪くなり始めた時点でデザインを変更することができます。例えば、画面サイズが大きくなっても行の長さが読めないほど長くならないようにするには、columns を使用することができます。ボックスが狭くなって行あたりに 2 つしか単語が表示されなくなったら、ブレークポイントを設定します。

段組みレイアウト、フレックスボックス、グリッドなどの複数のレイアウト方法は、既定でレスポンシブです。これらはすべて、柔軟なグリッドを作成しようとしていることを想定しており、そのための簡単な方法を提供しています。

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

.container {
  column-count: 3;
}

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

.container {
  column-width: 10em;
}

columns の一括指定を用いると、段組みの最大数と最小の段組み幅を指定することができます。これにより、画面サイズが大きくなっても行の長さが読めないほど長くなったり、画面サイズが小さくなっても行の長さが狭すぎたりしないように保証することができます。

フレックスボックス (Flexbox) では、フレックスアイテムは縮小したり拡大したりして、コンテナーの空間に応じてアイテム間の空間を分配します。flex-grow と flex-shrink の値を変更することで、アイテムの周りの空間が広くなったり狭くなったりしたときにどのように動作させたいかを示すことができます。

次の例では、flex: 1 という一括指定を使用して、フレックスアイテムがフレックスコンテナー内でそれぞれ同じ空間の大きさにしています。レイアウトのトピック「フレックスボックス: フレックスアイテムの柔軟なサイズ変更」で記述されている通りです。

.container {
  display: flex;
}

.item {
  flex: 1;
}

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

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

メディアがそのコンテナーより大きくならないことを保証するには、次のようにすることができます。

img,
picture,
video {
  max-width: 100%;
}

これは、メディアがコンテナーからあふれないように確実に拡大縮小します。単一の大きな画像を使用し、小さな端末に合わせて拡大縮小すると、使用する画像よりも大きな画像をダウンロードして帯域幅を浪費します。

<picture> 要素と <img> の srcset 属性や size 属性を使用したレスポンシブ画像は、ユーザーのビューポートや端末の解像度に合わせた画像を提供することができます。例えば、モバイル用には正方形の画像を入れ、デスクトップ向けには同じシーンの広い画像を表示させることができます。

<picture> 要素では、複数のサイズを「ヒント」（画像が最適な画面サイズと解像度を記述しているメタデータ）とともに指定することができ、ブラウザーはそれぞれの端末に最も適した画像を選びます。これにより、ユーザーは確実に使用する機器に適したサイズの画像をダウンロードすることができます。<picture> を max-width とともに使用することで、メディアクエリーで画像のサイズを調整する必要がなくなります。これにより、様々なサイズのビューポートに様々なアスペクト比の画像を適用することができます。

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

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

その他の有用なコツです。

• ウェブサイトの画像には常に適切な画像形式（PNG や JPG など）を使用し、ウェブサイトに掲載する前にグラフィックエディターを使ってファイルサイズを最適化してください。
• グラデーションや影のような CSS の機能を使用することで、画像を使用せずに視覚効果を実装することができます。
• <video>/<audio> 要素の中にある <source> 要素の media 属性内では、メディアクエリーを使用することができ、様々な端末に最適な映像/音声ファイルを提供することができます。

レスポンシブ書体は、メディアクエリー内でフォントサイズを変更したり、ビューポート単位を使用したりして画面の面積の大小を反映したりする記述です。

この例では、レベル 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% にスケーリングするよう指示します。 これにより、文書はモバイル向けに最適化されたサイズで表示されます。

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

このメタタグが存在するのは、スマートフォンが登場した当初、ほとんどのサイトがモバイルに最適化されていなかったからです。そのため、モバイルブラウザーはビューポート幅を 980 ピクセルに設定し、その幅でページをレンダリングし、その結果をデスクトップレイアウトの拡大版として表示していました。ユーザーはウェブサイトを拡大したり、パンしたりして、関心のある部分を見ることができましたが、見た目が悪いものでした。

width=device-width を設定することで、モバイル端末の既定値（Apple の既定値 width=980px など）を実際の端末の幅で上書きすることになります。これがないと、ブレークポイントやメディアクエリーを使ったレスポンシブデザインがモバイルブラウザーで意図通りに動作しない可能性があります。ビューポートの幅が 480px 以下で動作する狭い画面レイアウトを取得していても、端末が 980px の幅だと言えば、そのユーザーには狭い画面用のレイアウトは表示されません。

したがって、ビューポートメタタグを文書の先頭に常に含める必要があります。

レスポンシブデザインとは、閲覧環境に応答するサイトやアプリケーションのデザインを指します。CSSと HTML の機能やテクニックを包括し、既定値ではこれでウェブサイトを構築することができます。携帯電話で閲覧するサイトを考えてみましょう。デスクトップ版を縮小したサイトや、ものを探すのに横スクロールが必要なサイトに出会うのは、かなり珍しいことでしょう。これは、ウェブがレスポンシブデザインという手法に移行されたからです。

また、これらのレッスンで学んだレイアウト方法の助けを借りて、レスポンシブデザインを実現することがはるかに容易になりました。今日、ウェブ開発を新しく始めた方は、レスポンシブデザインの初期の頃よりも自由に使えるツールがたくさんあります。そのため、使用している素材の古さを調べる価値があります。過去の記事は今でも有用ですが、現代の CSS と HTML を使用することで、訪問者がどんな端末でサイトを閲覧しても、エレガントで有益なデザインをはるかに簡単に作成することができます。

• タッチ画面端末での作業:
  • タッチイベントは、タッチ画面やトラックパッド上の指（またはスタイラス）の動きを解釈する機能を提供し、複雑なタッチベースのユーザーインターフェイスの高品質な対応を可能にします。
  • pointer または any-pointer メディアクエリーを使用すると、タッチ対応端末で異なる CSS を読み込むことができます。
• CSS-Tricks Guide to Media Queries

• 前のページ
• Overview: CSS レイアウト
• 次のページ