レスポンシブデザイン（Responsive Web Design）

用語

レスポンシブデザイン（Responsive Web Design）

読み方

レスポンシブデザイン

説明

レスポンシブデザインは、1つのHTMLをデバイス（PC・タブレット・スマホ）に応じて最適なレイアウトに変更する設計手法です。
画面幅に合わせてスタイルを切り替えるため、多くの現代サイトで標準採用されています。

基本ポイント

  • ビューポート設定が必須
  • メディアクエリで幅に応じてCSSを変更
  • レイアウトは相対値（%, vw, flex, grid）が中心

よく使うメディアクエリ

@media (max-width: 600px) {
  .container {
    flex-direction: column;
  }
}

メリット

  • デバイスごとにページを分ける必要がない
  • SEOにも有利（Google推奨）
  • スマホ利用が多い現代に最適

■ こんなときに使う

  • モバイル閲覧にも対応したい
  • 横幅によって要素を縦並びにしたい
  • 画像サイズを自然に縮小したい

■ 参考サイト・引用元

タイトルとURLをコピーしました