レスポンシブデザイン入門｜スマホ・タブレット対応に必要なメディアクエリの基本

レスポンシブデザインとは

レスポンシブデザインとは、デバイスの画面サイズに応じてレイアウトや表示内容を最適化するWeb設計手法です。スマートフォン・タブレット・PCなど多様なデバイスに対応するために不可欠です。

viewportの設定

まず HTMLのheadタグに以下を追加します。

<meta name="viewport" content="width=device-width, initial-scale=1">

これを設定しないとスマホで縮小表示されてしまいます。

メディアクエリの基本構文

/* スマホ（768px以下）に適用するスタイル */
@media (max-width: 768px) {
  .container {
    padding: 0 16px;
  }
  .column {
    flex-direction: column;
  }
}

よく使うブレークポイント

• スマホ：〜767px
• タブレット：768px〜1023px
• PC：1024px〜

プロジェクトによって異なりますが、上記が一般的な目安です。

モバイルファーストの考え方

モバイルファーストとは「まずスマホ向けのデザインを作り、そこから画面が大きくなるにつれてレイアウトを拡張する」設計思想です。max-widthではなく min-widthのメディアクエリを使います。

/* デフォルト（スマホ）のスタイル */
.column { flex-direction: column; }

/* タブレット以上に適用 */
@media (min-width: 768px) {
  .column { flex-direction: row; }
}

Flexboxを使った実践的な横並びレイアウト

CSSのFlexboxを使えば、PCでは横並び・スマホでは縦並びというレイアウトが簡単に実現できます。

まとめ

現在のWeb制作においてレスポンシブ対応は必須です。まずviewportの設定とシンプルなメディアクエリから始めて、モバイルファーストの習慣を身につけましょう。