レスポンシブ対応の基本は?
1. レスポンシブ対応とは?
画面サイズ(PC・タブレット・スマホ)に合わせて表示を最適化する手法。
2.メディアクエリの基本構文:
@media (max-width: 768px) {
/* スマホ表示向けのスタイル */
}
3.よく使うブレイクポイント:
デバイス | 幅の目安(px) |
---|---|
スマホ | max-width: 767px |
タブレット | 768px〜1024px |
PC(標準) | 1025px〜 |
4.調整のポイント:
画像や動画はmax-width: 100%
で横幅に合わせる
フレックスボックスやグリッドでレイアウト制御
フォントサイズ・余白を縮小
ナビメニューは縦型へ切り替え