ワールド ワイド ウェブは当初から、依存しないように設計されています。ハードウェアは関係ありません。デバイスにどのオペレーティング システムを実行しているかは関係ありません。インターネットに接続できる限り、ワールド ワイド ウェブにアクセスできます。
ウェブが登場した初期の頃、ほとんどのユーザーはデスクトップ パソコンを使用していました。最近では、パソコン、ノートパソコン、タブレット、折りたたみ式スマートフォン、冷蔵庫、自動車でウェブを利用できます。 当然のことながら、ユーザーは、どのデバイスからでもウェブサイトがきれいに見えることを期待しています。 レスポンシブ デザインなら、これが可能になります。
レスポンシブ デザインは、ウェブサイトを設計する際の最初のアプローチではありません。レスポンシブ デザインが導入される前数年間、ウェブ デザイナーやデベロッパーはさまざまな手法を試してきました。
固定幅の設計
ウェブが最初に普及した 1990 年代初頭、ほとんどのモニターの画面サイズは幅 640 ピクセル、高さ 480 ピクセルでした。従来の平面型液晶ディスプレイとは 違いました
初期のウェブデザインが発達した頃は、ウェブページを 640 ピクセル幅でデザインするのが確実でした。しかし、スマートフォンやカメラなどの他のテクノロジーが小型化する一方で、画面は大きくなり、最終的にはフラットになりました。すぐに、ほとんどの画面の寸法は 800 x 600 ピクセルでした。ウェブデザインもそれに合わせて変更した。デザイナーと開発者は当初、800 ピクセルが安全なデフォルトであると考えていました。
すると、また画面が大きくなりました。1,024 x 768 がデフォルトになりました。 ウェブ デザイナーとハードウェア メーカーの軍備競争のようでした。
640 ピクセル、800 ピクセル、1,024 ピクセルのいずれであるかにかかわらず、デザインする特定の幅を選ぶことを固定幅設計と呼んでいます。
レイアウトに固定の幅を指定すると、レイアウトはその特定の幅でのみ適切に表示されます。ユーザーが設定した幅よりも広い画面が表示されると、その画面上に無駄なスペースが発生します。 ページのコンテンツを中央に配置すると、（片側に空白のスペースを設ける代わりに）そのスペースをより均等に配信できますが、利用可能なスペースを最大限に活用することはできません。
同様に、ユーザーが選択した幅よりも狭い画面でアクセスした場合、コンテンツは水平方向に収まりません。ブラウザはクロールバー（スクロールバーに相当する水平方向）を生成します。すべてのコンテンツを表示するには、ユーザーがページ全体を左右に移動する必要があります。
リキッド レイアウト
デザイナーの大半は固定幅レイアウトを使用しますが、柔軟性のあるレイアウトにしたデザイナーもいます。 レイアウトに固定幅を使用する代わりに、列幅の割合を使用して柔軟なレイアウトを作成できます。このようなデザインは、特定の 1 つのサイズでしか見えない固定幅のレイアウトよりも多くの状況で機能します。
これらはリキッド レイアウトと呼ばれていました。しかし、リキッド レイアウトは幅広い幅で適切に表示されますが、極端に近づくと悪化し始めます。ワイド スクリーンでは、レイアウトが引き伸ばされて表示されます。幅の狭い画面では、レイアウトが押しつぶされて見えます。どちらのシナリオも理想的ではありません。
この問題を軽減するには、レイアウトに min-width と max-width を使用します。しかし、最小幅より小さい、または最大幅を上回るサイズでは、固定幅レイアウトの場合と同じ問題が生じます。ワイド スクリーンでは、使用しないスペースが無駄になってしまいます。
幅の狭い画面では、すべての情報を表示するためにページ全体を左右に移動する必要があります。
「リキッド」という言葉は、この種のレイアウトを表すために使用される用語の 1 つにすぎません。このようなデザインは、可変レイアウトまたはフレキシブル レイアウトとも呼ばれています。用語も技術と同じくらい流動的でした。
小画面
21 世紀も、ウェブはますます拡大し続けました。モニターについても同様です。しかし、どのデスクトップ デバイスよりも小さい新しい画面が登場しました。フル機能のウェブブラウザを搭載したスマートフォンの登場で、設計者はジレンマに直面しました。 デザインがパソコンやスマートフォンで正しく表示されるようにするにはどうすればよいでしょうか。 そのため、幅 240 ピクセル、幅数千ピクセルまでの画面に合わせてコンテンツをスタイル設定する方法が必要でした。
個別のサイト
モバイル ユーザー用に別のサブドメインを作成するのも 1 つの方法です。 ただし、2 つの個別のコードベースと設計を維持する必要があります。また、モバイル デバイスで訪問者をリダイレクトするには、ユーザー エージェント スニッフィングを行う必要があります。これは信頼性が低く、なりすましも容易です。Chrome は、プライバシー上の理由から、ユーザー エージェント文字列のサポートを終了する予定です。 また、モバイルとモバイル以外の区別も明確ではありません。どのサイトにタブレット デバイスを送付しますか？
アダプティブ レイアウト
別のサブドメインに個別のサイトを用意する代わりに、1 つのサイトに 2 つまたは 3 つの固定幅のレイアウトを用意することもできます。
CSS にメディアクエリが登場して初めて、レイアウトの柔軟性が向上しました。しかし、依然として多くのデベロッパーにとって、固定幅のレイアウトの作成は最も快適でした。1 つの手法として、指定した幅でいくつかの固定幅レイアウトを切り替えるという方法がありました。これをアダプティブ デザインと呼ぶ人もいます。
アダプティブ デザインにより、デザイナーはいくつかの異なるサイズで見栄えのよいレイアウトを提供できましたが、これらのサイズ間で表示するとデザインが適切に表示されることはありませんでした。固定幅のレイアウトほど悪くはありませんでしたが、過剰なスペースの問題は解消しませんでした。
CSS メディアクエリを使用すると、ブラウザの幅に最も近いレイアウトを表示できます。ただし、デバイスのサイズが多種多様であるため、レイアウトによっては、ほとんどのユーザーにとって最適とは思えない場合があります。
レスポンシブ ウェブ デザイン
アダプティブ レイアウトがメディアクエリと固定幅レイアウトのマッシュアップである場合、レスポンシブ ウェブ デザインは、メディアクエリとリキッド レイアウトのマッシュアップとなります。
この用語は、2010 年に Ethan Marcotte が A List Apart の記事で作ったものです。
イーサンはレスポンシブ デザインの 3 つの基準を定義しました。
- 流体グリッド
- Fluid Media
- メディアクエリ
レスポンシブ サイトのレイアウトと画像は、どのデバイスでも適切に表示されます。しかし、1 つ問題がありました。
viewport の meta 要素
スマートフォンのブラウザは、幅の広い画面に固定幅のレイアウトでデザインされたウェブサイトに対応しなければなりませんでした。モバイル ブラウザはデフォルトで、ユーザーがデザインする幅を 980 ピクセルと想定していました（これは間違いではありません）。 そのため、リキッド レイアウトを使用した場合でも、ブラウザは幅 980 ピクセルを適用し、レンダリングされたウェブページを画面の実際の幅まで縮小します。
レスポンシブ デザインを使用している場合は、スケーリングを行わないようにブラウザに指示する必要があります。そのためには、ウェブページの head にある meta 要素を使用します。
<meta name="viewport" content="width=device-width, initial-scale=1">
カンマで区切られた 2 つの値があります。1 つ目は width=device-width です。これにより、ブラウザはウェブサイトの幅を 980 ピクセルではなくデバイスの幅と想定します。2 番目の値は initial-scale=1 です。これにより、ブラウザに対してスケーリングの程度を指定します。
レスポンシブ デザインでは、ブラウザにはスケーリングを一切行いません。
この meta 要素を配置すれば、ウェブページはレスポンシブになります。
最新のレスポンシブ デザイン
現在、ビューポートのサイズを大きく超えてレスポンシブなウェブサイトを作成できます。メディア機能を使用すると、デベロッパーはユーザー設定にアクセスし、エクスペリエンスをカスタマイズできます。コンテナクエリを使用すると、コンポーネントが独自のレスポンシブ情報を所有できます。picture 要素を使用すると、デザイナーは画面比率に基づいてアート ディレクションを決定できます。
理解度をチェックする
レスポンシブ ウェブ デザインに関する知識をテストする
2021 年には、ウェブページを固定幅でデザインしても問題ないでしょうか？
一般的に、Liquid レイアウトはどの画面サイズで苦戦しますか。
レスポンシブ デザインの当初の 3 つの基準は、次のうちどれですか。
レスポンシブ デザインは、可能性が広がるエキサイティングで成長中の世界です。 このコースの残りの部分では、これらのテクノロジーの概要と、それを使用して誰にとっても美しくレスポンシブなウェブサイトを作成する方法を学びます。