【日本語版Webflow University】レスポンシブデザインの概要

2022-11-02

この投稿はWebflow社が提供する「Intro to responsive design」の内容を元に作成しています。

引用元：https://university.webflow.com/lesson/intro-to-responsive-design

日本語版Webflow Universityでは、Webflowの基本的な使い方を解説しています。

今回は、レスポンシブデザインをWebflow上で構築するために必要な基礎知識、「リフロー型コンテンツ」「サイズ固定」「相対サイズ」「ブレイクポイント（メディアクエリ）」について解説します。

モバイル端末でサイトにアクセスすると、デスクトップ版のサイトが小さな画面に詰め込まれ、コンテンツを見るためにピンチイン/アウトを余儀なくされることがあります。また、デスクトップ版の良さであるコンテンツの見やすさや操作性が損なわれているモバイル版サイトが表示されることもあります。こうした事態を招かないために、ブラウザの幅に応じたリフロー型コンテンツを配置し、レスポンシブ対応されたサイトを構築するようにしましょう

ここでは、レスポンシブデザインについて次の4つポイントに別けて解説します。

リフロー型コンテンツ
サイズ固定
相対サイズへの変更
ブレイクポイント（メディアクエリ）

リフロー型コンテンツ

リフロー型コンテンツとは、ブラウザのビューポート幅に応じて表示幅が可変になっているコンテンツのことを指します。たとえば、デフォルト設定のパラグラフは、ブラウザの幅が小さくなると自動的にコンテンツが折り返されます。この動作は、デザイナー画面のメインキャンバスの端をドラッグして、幅を狭めることで再現できます。

サイズ固定

コンテンツやレイアウトの幅をピクセル固定にする場合は、注意が必要です。例えば、画像の幅を500pxに設定した場合、デスクトップやタブレットではきれいに表示されるかもしれません。しかし、より小さなモバイルデバイスで画像を表示すると、画像の幅は500pxのまま固定され、より小さなビューポート（通常は500px未満）では大きく画面からはみ出てしまいます。

相対サイズへの変更

相対サイズとは、ブラウザの幅や親要素など、他の要素を基準として相対に大きさ決まるような設定です。例えば、画像をピクセル単位で表示するのではなく、%やVW（ビューポート幅）、VH（ビューポート高さ）といった単位で表示することです。画像に%を使い、ブラウザの幅を調整すると、pxベースの画像ははみ出るのに対し、相対サイズはブラウザの幅に応じて画像の幅も可変します。

ブレイクポイント（メディアクエリ）

レイアウトは様々な画面幅に対応する様に構築しなければならず、制御が非常に複雑です。しかし、Webflowのブレイクポイント（メディアクエリとも呼ばれる）機能を使用すると、メインキャンバス上で画面遷移などすることなく、コンテンツのリフローをテストしたり、異なるデバイス幅ごとにデザインやレイアウトの設定を変更することができます。