レスポンシブデザイン

レスポンシブウェブデザイン (RWD) は、ユーザビリティを確保しながら、すべての画面サイズと解像度でウェブページをうまく描画するためのウェブデザインの手法です。複数の端末に対応したウェブをデザインする方法です。この記事では、それを使いこなすために使用できるいくつかのテクニックを理解することをお手伝いします。

前提知識: HTML の基本( HTML 入門を学習してください)、および CSS の動作の概念(CSS の第一歩CSS の構成要素を学習してください)
目標: レスポンシブデザインを実装するために用いる基本的な目的と CSS 機能を理解する。

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

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

モバイルサイズのビューポートに押しつぶされた 2 列のレイアウト。

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

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

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

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

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

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

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

メディアクエリー

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

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

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

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

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

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

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

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

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

レスポンシブレイアウト技術

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

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

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

段組み

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

css
.container {
  column-count: 3;
}

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

css
.container {
  column-width: 10em;
}

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

フレックスボックス

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

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

css
.container {
  display: flex;
}

.item {
  flex: 1;
}

メモ: 例として、フレックスボックスを使用して上記の単純なレスポンシブレイアウトを構築しました。ブレークポイントを使用して画面が大きくなったときに段組みに切り替え、max-width で本文コンテンツのサイズを制限しています。ソースコード

CSS グリッド

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

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

メモ: .wrapper に列を定義することができるため、グリッドレイアウトのバージョンはさらに単純です。ソースコード

レスポンシブ画像

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

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

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

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

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

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

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

レスポンシブ書体

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

レスポンシブ書体のためにメディアクエリーを使用

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

css
html {
  font-size: 1em;
}

h1 {
  font-size: 2rem;
}

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

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

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

見出しサイズが小さい積み上げレイアウト。

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

見出しが大きい 2 段レイアウト。

メモ: この例を実際に見てください。ソースコード

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

レスポンシブ書体にビューポート単位を使用

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

css
h1 {
  font-size: 6vw;
}

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

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

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

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

メモ: 実際のこの例を見てください。ソースコード

ビューポートメタタグ

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

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

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

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

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

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

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

まとめ

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

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

関連情報