最初から ワールド ワイド ウェブは、特定の場所に依存しないように設計されていました。 使用するハードウェアは関係ありません。 デバイスがどのオペレーティング システムを実行しているかは関係ありません。 インターネットに接続できれば、ワールド ワイド ウェブにアクセスできます。
ウェブの黎明期には、ほとんどのユーザーがデスクトップ パソコンを使用していました。 最近では、ウェブはデスクトップ パソコン、ノートパソコン、タブレット、折りたたみ式スマートフォン、冷蔵庫、自動車で利用できます。 ユーザーは、どんなデバイスでもウェブサイトが適切に表示されることを期待しています。 これを可能にするのがレスポンシブ デザインです。
レスポンシブ デザインは、ウェブサイトをデザインする際の最初のアプローチではありません。 レスポンシブ デザインが登場する数年間、ウェブのデザイナーやデベロッパーは、さまざまな手法を試してきました。
固定幅の設計
ウェブが初めて普及した 1990 年代初頭に ほとんどのモニターの画面サイズは横 640 ピクセル、縦 480 ピクセルです。 これらは凸状の陰極線管で 現在のフラット液晶ディスプレイとは 違います
<ph type="x-smartling-placeholder">
初期のウェブデザインの形成期には、 当時は、幅 640 ピクセルのウェブページをデザインするのが確実でした。 スマートフォンやカメラなどの他の技術が小型化する一方で、 画面が大きくなって（最終的には）平坦化していました。 つい最近まで、ほとんどの画面のサイズは 800 x 600 ピクセルでした。 それに応じてウェブデザインも変更されました。デザイナーやデベロッパーは、800 ピクセルが安全なデフォルトであると想定し始めました。
<ph type="x-smartling-placeholder">
その後、画面はまた大きくなった。1024x768 がデフォルトになりました。 ウェブのデザイナーとハードウェア メーカーの間の戦いのように感じられました。
<ph type="x-smartling-placeholder">
640 ピクセルでも 800 ピクセルでも 1,024 ピクセルでも 設計する特定の幅を選択することが、固定幅設計と呼ばれていました。
レイアウトに固定幅を指定する場合、 レイアウトはその特定の幅でのみ適切に表示されます。 サイト訪問者の画面の幅が、ここで選択した幅より広いと、その画面は無駄なスペースになります。 ページのコンテンツを中央に配置すると、スペースをより均等に配置できます （片側に空きスペースを用意するのではなく）したとしても、利用可能なスペースを十分に活用することはできません。
<ph type="x-smartling-placeholder">
同様に、ユーザーが選択した幅よりも狭い画面でアクセスした場合も、 コンテンツが水平方向に収まりません ブラウザではクロールバー（横方向のスクロールバーに相当するもの）が生成され、すべてのコンテンツを表示するには、ユーザーがページ全体を左右に移動する必要があります。
<ph type="x-smartling-placeholder">
Liquid レイアウト
デザイナーの大半は固定幅のレイアウトを使用していますが、一部のデザイナーはレイアウトを柔軟にすることを選びました。 レイアウトに固定幅を使用する代わりに、列幅にパーセンテージを使用して柔軟なレイアウトを作成できます。 こうしたデザインは、1 つの特定のサイズでしか表示されない固定幅のレイアウトよりも多くの状況で機能します。
これらはリキッド レイアウトと呼ばれていました。 しかし、Liquid レイアウトはどの幅でも適切に表示されますが、極端な値になると悪化し始めます。 大画面では、レイアウトが引き伸ばされたように見えます。 画面の幅が狭いと、レイアウトが狭すぎるように見えます。どちらのシナリオも理想的とは言えません。
<ph type="x-smartling-placeholder">
レイアウトに min-width と max-width を使用すると、これらの問題を軽減できます。
しかし、最小幅を下回るサイズや最大幅を超えるサイズでは、固定幅レイアウトの場合と同じ問題が発生します。
ワイド スクリーンでは、使用されていないスペースが無駄になってしまいます。
幅の狭い画面では、すべてを見るにはページ全体を左右に移動しなければなりません。
「Liquid」という用語は、この種のレイアウトを説明するために使用される用語の 1 つにすぎません。 この種のデザインは、フレキシブル レイアウトまたはフレキシブル レイアウトとも呼ばれます。 用語もテクニックと同じくらい流動的でした。
小画面
21 世紀になっても、ウェブは拡大の一途をたどっています。 モニターについても同様です。しかし、どのデスクトップ デバイスよりも小さい新しい画面が登場しました。 フル機能のウェブブラウザを備えた携帯電話の登場により、デザイナーはジレンマに直面しました。 デスクトップ パソコンとスマートフォンで、デザインが適切であることを確認するには、どうすればよいでしょうか。 そのため、最小幅 240 ピクセル、最大幅数千ピクセルの画面向けにコンテンツをスタイル設定する方法が必要でした。
個別のサイト
1 つの方法として、モバイル ユーザー用に別のサブドメインを作成するという方法があります。 しかし、その場合、2 つのコードベースと設計を別々に維持する必要があります。 モバイルデバイスで訪問者をリダイレクトするには ユーザー エージェント スニッフィング、 信頼性が低く簡単になりすましが可能です プライバシー上の理由から、Chrome はユーザー エージェント文字列のサポートを終了します。 また、モバイルと非モバイルの区別も明確ではありません。どのサイトにタブレット デバイスを送付しますか？
アダプティブ レイアウト
サブドメインごとに異なるサイトを用意するのではなく 1 つのサイトで 2 つまたは 3 つの固定幅レイアウトを使う場合
メディアクエリが初めて CSS に登場したとき、彼らはレイアウトの柔軟性を高める道を開きました。 しかし、多くのデベロッパーは依然として固定幅レイアウトの作成に最も抵抗なく感じていました。 その手法の 1 つは、いくつかの固定幅レイアウトを指定の幅で切り替えることです。 これをアダプティブ デザインと呼ぶ人もいます。
アダプティブ デザインにより、デザイナーはさまざまなサイズで見栄えの良いレイアウトを実現し、 これらのサイズで見たとき、デザインが完璧に仕上がませんでした。 余剰スペースの問題は固定幅レイアウトほど悪くはありませんでした。
CSS メディアクエリを使用すると、ブラウザの幅に最も近いレイアウトをユーザーに提供できます。 しかし、デバイスのサイズは多種多様であるため、レイアウトがほとんどの人にとって最適とは言えない可能性もあります。
レスポンシブ ウェブ デザイン
アダプティブ レイアウトがメディアクエリと固定幅レイアウトのマッシュアップである場合、レスポンシブ ウェブ デザインはメディアクエリとリキッド レイアウトのマッシュアップです。
この言葉は、Ethan Marcotte が 2010 年の A List Apart の記事。
イーサンはレスポンシブ デザインの次の 3 つの基準を定義しました。
- 流体グリッド
- 流体メディア
- メディアクエリ
レスポンシブ サイトのレイアウトと画像は、どのデバイスでも適切に表示されます。しかし、1 つ問題がありました。
viewport の meta 要素
スマートフォンのブラウザは、幅の広い画面に適した幅のレイアウトで設計されたウェブサイトに対応しなければなりませんでした。 デフォルトでは、モバイル ブラウザはユーザーのデザインを想定している幅を 980 ピクセルと想定していましたが、これは間違いではありません。 たとえ Liquid レイアウトを この場合、ブラウザは 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 つの基準は、次のうちどれですか。
レスポンシブ デザインは、エキサイティングで可能性が広がり続けている世界です。 このコースの残りの部分では、これらのテクノロジーの概要と、これらのテクノロジーを使用して 開発できます