CSS
レスポンシブ
読み方：レスポンシブ
画面の大きさに合わせてレイアウトを自動調整するデザイン手法。
やさしい説明
レスポンシブとは、画面サイズに応じてレイアウトが変わるデザインのことです。
スマホ、タブレット、パソコンなど、どの画面でも見やすく表示されます。メディアクエリを使って実現します。
具体例・使い方
@media (max-width: 768px) で画面幅768px以下のスタイルを指定
Flexboxのflex-wrapで自動折り返し
max-width: 100% で画像がはみ出さない
よくある疑問
Q: モバイルファーストとは？
A: まずスマホ向けのデザインを作り、画面が大きくなるにつれてレイアウトを変える手法です。
関連用語
📖 関連レッスン
レッスンを見る →