レスポンシブwebデザインの基本

• ビューポートを設定する
• サイズのコンテンツをビューポートに設定する
• 応答性にCSSメディアクエリを使用する
• ブレークポイントを選択する方法
• Chrome DevToolsでメディアクエリブレークポイントを表示する

ウェブをサーフィンするためのモバイルデバイスの使用は天文学的なペースで増加し続けており、これらのデバイスは表示サイズによって制約されることが多く、画面上でコンテンツをレイアウトする方法には異なるアプローチが必要です。—–,

レスポンシブwebデザインは、もともと離れてリストにイーサンMarcotteによって定義され、ユーザーと彼らが使用しているデバイスのニーズに応答します。 レイアウトは、デバイスのサイズと機能に基づいて変更されます。 たとえば、電話では、ユーザーはコンテンツを単一の列ビューに表示し、タブレットは同じコンテンツを二つの列に表示する場合があります。

携帯電話、”ファブレット”、タブレット、デスクトップ、ゲーム機、テレビ、さらにはウェアラブルにさまざまな画面サイズが存在します。, 画面サイズは常に変化しているので、あなたのサイトは、今日または将来的には、任意の画面サイズに適応できることが重要です。 さらに、デバイスには、デバイスと対話するさまざまな機能があります。 例えばあなたの訪問者の何人かはタッチスクリーンを使用する。 現代対応型のデザインを考慮しこれらすべてのものへの適用に際します。

Set the viewport#

さまざまなデバイス用に最適化されたページには、ドキュメントの先頭にmeta viewportタグが含まれている必要があります。メタビューポートのタグは、ウェブサイトの制御方法についてのページ”s寸法をスケーリングといいます。,

最高のエクスペリエンスを提供しようとすると、モバイルブラウザはデスクトップの画面幅でページをレンダリングします（通常は980pxこれは、フォントサイズが表示され、コンテンツと対話するためにダブルタップまたはピンチツーズームする必要がある場合があり、ユーザーに矛盾して表示,

メタビューポート値を使用してwidth=device-width画面の幅をデバイスに依存しないピクセル単位で一致させるようにページに指示します。 デバイス（または密度）独立したピクセルは、高密度スクリーン上で多くの物理ピクセルからなる単一のピクセルの表現である。 これにより、ページは小さな携帯電話や大きなデスクトップモニターでレンダリングされるかどうか、異なる画面サイズに一致するようにリフロー,

一部のブラウザは、landscapemodeに回転するときにページの幅を一定に保ち、画面を埋めるためにリフローではなくズームします。, 値initial-scale=1を追加すると、デバイスの向きに関係なく、CSSpixelsとデバイスに依存しないピクセルの間に1:1の関係を確立するようにブラウザー

には<meta name="viewport">タグがありませんまたはinitial-scaleLighthouse監査は、HTMLドキュメントがビューポートメタタグを正しく使用していることを確認するプロセスを自動化するのに役立ちます。,

アクセス可能なビューポートを確保する#

initial-scaleを設定するだけでなく、ビューポートに次の属性を設定することもできます。

• minimum-scale
• maximum-scale
• user-scalable

これらを設定すると、ユーザーがビューポートをズームする機能を無効にし、アクセシビリティの問題を引き起こす可能性があります。したがって、これらの属性の使用は推奨しません。,

ビューポートへのコンテンツのサイズ#

デスクトップデバイスとモバイルデバイスの両方で、ユーザーはwebサイトを垂直にスクロールするのに慣れていますが、水平にスクロールしたり、ページ全体を表示するためにズームアウトしたりすると、ユーザーエクスペ

メタビューポートタグを持つモバイルサイトを開発するとき、指定されたビューポート内に収まらないページコンテンツを誤って作成するのは簡単です。たとえば、ビューポートよりも広い幅で表示されるイメージは、ビューポートを水平にスクロールさせることができます。,ユーザーが水平方向にスクロールする必要がないように、このコンテンツをビューポートの幅に収まるように調整する必要があります。

コンテンツのサイズが正しくないviewportLighthouse auditは、オーバーフローコンテンツを検出するプロセスを自動化するのに役立ちます。

Images#

画像の寸法が固定されており、ビューポートよりも大きい場合はスクロールバーが発生します。この問題に対処する一般的な方法は、すべての画像にmax-widthof100%を与えることです。,これにより、ビューポートのサイズが画像よりも小さくなると、画像が持つスペースに合わせて縮小されます。ただし、max-widthではなく、widthは100%であるため、画像は自然よりも大きく伸びませんsize.It スクロールバーを引き起こす画像に問題がないように、stylesheetsに次のものを追加するのは一般的に安全です。,

画像の寸法をimg要素に追加します#

max-width: 100%画像の自然な寸法をオーバーライドしていますが、widthおよびheightあなたの<img>タグ。これは、最新のブラウザーがこの情報を使用して画像が読み込まれる前にスペースを確保するためです。,

Layout#

CSSピクセルの画面寸法と幅はデバイス間で大きく異なるため（たとえば、電話とタブレット間、さらには異なる電話間でも）、コンテンツを適切にレンダリングするために特定のビューポートの幅に依存するべきではありません。

過去には、この必要な設定要素でレイアウトを作成するために使用されますpercentages.In 以下の例では、ピクセルを使用してサイズが変更された要素を持つ二列レイアウトを見ることができます。ビューポートが列の合計幅よりも小さくなったら、コンテンツを表示するには水平にスクロールする必要があります。,

幅にパーセンテージを使用すると、列は常にコンテナの一定のパーセンテージのままになります。これは、スクロールバーを作成するのではなく、列が狭くなることを意味します。

フレックスボックス、グリッドレイアウト、マルチコールなどの最新のCSSレイアウト技術は、これらの柔軟なグリッドの作成をはるかに簡単にします。,

Flexbox#

このレイアウト方法は、異なるサイズのアイテムのセットがあり、小さいアイテムのスペースが少なく、大きいアイテムのスペースが多くなるように、行または行に快適に収まるようにしたい場合に理想的です。

レスポンシブデザインでは、フレックスボックスを使用してアイテムを単一の行として表示したり、使用可能なスペースが減少すると複数の行にラップしたりすることができます。

フレックスボックスについての詳細を読みます。

CSSグリッドレイアウト#

CSSグリッドレイアウトは、柔軟なグリッドの簡単な作成を可能にします。,パーセンテージで列を作成するのではなく、以前のフロートされた例を考えると、グリッドレイアウトと、コンテナ内の使用可能なスペースの一部を表すfrユニットを使用することができます。

グリッドは、通常のグリッドレイアウトを作成するために使用することもできます。利用可能なトラックの数は、画面サイズに応じて減少しますshrinks.In 以下のデモでは、各行に収まる数のカードがあり、最小サイズは200pxです。,

CSSグリッドレイアウトの詳細を読む

複数列レイアウト#

一部のタイプのレイアウトでは、複数列レイアウト（マルチコル）を使用できます。column-widthproperty.In 以下のデモでは、別の200px列のスペースがある場合、列が追加されていることがわかります。,

Multicolについてもっと読む

応答性にCSSメディアクエリを使用する#

レイアウトをより広範に変更する必要がある場合があります。このメディアの問合せとなります。

メディアクエリは、CSSスタイルに適用できる単純なフィルタです。,これにより、コンテンツをレンダリングするデバイスの種類、またはそのデバイスの機能、例えば、幅、高さ、向き、ホバーする機能、およびデバイスがタッチスクリー,

メディアクエリを使用してメインスタイルシートに印刷スタイルを含めることもできます。

---