レスポンシブデザイン入門 - Webflowヘルプ

コンテンツの再配置、固定サイズ、相対サイズ、ブレークポイント（メディアクエリ）がレスポンシブデザインを作成するのに役立つ方法を学びましょう。

モバイルデバイスでサイトを訪れると、デスクトップ版が小さな画面に詰め込まれて表示され、ズームやパンが必要になることがあります。また、デスクトップ版の優れたコンテンツや体験が欠けた簡略化されたモバイル版にアクセスすることもあります。しかし、理想的には、ブラウザの幅に基づいてコンテンツが再配置されるレスポンシブなウェブサイトを見ることができるでしょう。

ここでは、レスポンシブデザインの3つの異なる側面を取り上げます：

1. コンテンツの再配置
2. 固定サイズ
3. 相対サイズ
4. ブレークポイント（メディアクエリ）

コンテンツの再配置

コンテンツの再配置とは、ブラウザのビューポート幅に基づいてコンテンツの幅が調整されることを指します。例えば、デフォルト設定の段落は、ブラウザの幅が小さくなると自動的に内容を折り返します。この動作は、デザイナーキャンバスの端をドラッグすることで再現できます。

固定サイズ

相対サイズ

これは、要素のサイズをブラウザの幅や親要素など、他のものに対して相対的に設定することを指します。例えば、画像のサイズをピクセルベースではなく、%やVW（ビューポート幅）、VH（ビューポート高さ）などの異なる単位を使用することを検討してください。画像に%を使用し、ブラウザの幅を調整すると、それに応じて適応することがわかりますが、pxベースの画像はそうではありません。

ブレークポイント

レイアウトは通常、1つの画像の幅を管理するよりもはるかに複雑です。ブレークポイント（メディアクエリとも呼ばれます）を使用すると、コンテンツの再配置をテストするだけでなく、異なるデバイスの幅範囲に基づいてデザインやレイアウトを変更することもできます。

詳細を学ぶ:

• ブレークポイントの概要
• 大きなディスプレイ向けのデザイン

Webflowヘルプに戻る