レスポンシブデザイン

一言で言うと

PC、タブレット、スマホなど、画面サイズに応じてレイアウトが自動的に変わるWebデザインの手法。

もう少し詳しく

レスポンシブデザインは、1つのWebページが様々な画面サイズに「レスポンス（応答）」して、最適な表示に切り替わる仕組みです。

新聞に例えると、大きな紙面では5段組みで記事を配置しますが、タブロイド判になると2段組みに、さらにチラシサイズなら1段にしますよね。レスポンシブデザインも同様に、画面の幅に応じてカラム数や文字サイズ、画像サイズを自動調整します。

CSSの「メディアクエリ」という仕組みを使って、「画面幅が768px以上ならPC用レイアウト、それ未満ならスマホ用レイアウト」のように切り替えます。現在のWebサイトでは、レスポンシブ対応は必須となっています。

実務でどう使うか

コードで見てみよう

/* 基本スタイル（スマホ向け） */
.container {
  display: flex;
  flex-direction: column;  /* 縦に並べる */
}
/* 画面幅768px以上（タブレット以上）で切り替え */
@media (min-width: 768px) {
  .container {
    flex-direction: row;   /* 横に並べる */
  }
}
/* 画面幅1024px以上（PC）でさらに切り替え */
@media (min-width: 1024px) {
  .container {
    max-width: 1200px;
    margin: 0 auto;        /* 中央寄せ */
  }
}