レッスン内容
モバイルデバイスでサイトを訪れると、小さな画面にデスクトップ版のサイトが詰め込まれて表示される場合があり、コンテンツを見るためにズームインやパン操作が必要になるかもしれません。また、コンテンツやデスクトップ版の優れた体験がない、簡素化されたモバイル版のページにアクセスする場合もあります。しかし、念願の通り、レスポンシブなウェブサイトを見ることができるはずです。これは、ブラウザの幅に基づいてコンテンツを再配置・再配置するデザインのことです。
ここでカバーするレスポンシブデザインの3つの異なる側面は次のとおりです：
- コンテンツの再配置
- 固定サイズ
- 相対サイズ
- ブレークポイント（メディアクエリ）
コンテンツの再配置
コンテンツの再配置は、コンテンツの幅がブラウザの表示領域の幅に基づいて調整されることを指します。たとえば、デフォルトの設定を持つ段落は、ブラウザの幅が狭くなると自動的にコンテンツを折り返します。この動作は、デザイナーキャンバスの端をドラッグすることでエミュレートできます。
固定サイズ
固定ピクセル幅を使用する際には注意が必要です。例えば、画像に幅500ピクセルを指定すると、デスクトップやタブレットでは素晴らしい見た目になるかもしれません。しかし、より小さなモバイルデバイスでその画像を表示する場合、画像の幅は500ピクセルに固定され、通常500ピクセル未満の小さな表示領域に適応しない可能性があります。
相対サイズ
これは、要素のサイズをブラウザの幅や親要素に対して相対的に設定することを指します。例えば、画像のサイズにピクセル単位ではなく、%、VW（ビューポート幅）、またはVH（ビューポート高さ）といった異なる単位を使用することを考えてみてください。%を画像に使用し、ブラウザの幅を調整すると、画像が適切に適応するのに対して、pxベースの画像は適応しないことがわかるでしょう。
要素の幅と高さを制御するためにさまざまな単位を適用する方法については、こちらをご覧ください。
ブレイクポイント（Breakpoints）
レイアウトは通常、1つの画像の幅を管理するよりも複雑です。ブレークポイント（メディアクエリとも呼ばれる）を使用することで、リフローするコンテンツをテストするだけでなく、異なるデバイス幅の範囲に基づいてデザインやレイアウトを変更することができます。