基本

PC 画面のみならず、スマートフォンやタブレットなどのモバイル機器にも一種類のソースファイルで対応する「レスポンシブデザイン」が注目されている。

ここでは、その記述の核となる「CSS のメディアクエリ」について、必要最小限の記述を紹介する。

この用途のメディアクエリは、「表示領域の幅」で機器の種類を判別する。

下の例では、表示領域の幅が 500px 以上のとき、{}の中が適用される。

@media screen and (min-width: 500px) {
  ..
  ..
}

下の例では、表示領域の幅が 500px 以下のとき、{}の中が適用される。

@media screen and (max-width: 500px) {
  ..
  ..
}

「狭→広」の順にの記述する方法

横幅が狭いものから先に記述し、より横幅が広いものはあとから追加／上書き変更していく書き方。(スマホ→タブレット→PC)

この方法はスマホなどのモバイル機器を優先的に記述する。近年多くなってきた記述順序である。

/* デフォルト = 幅の最も狭い機器 = スマホ のための指定 */
p { color: black; }

@media screen and (min-width: 768px) {
  /* 次に幅の広い機器 = タブレット のための指定 */
  /* 横幅が 768px 以上の場合ここを適用 */
  p { color: blue; }
}

@media screen and (min-width: 992px) {
  /* 次に幅の広い機器 = PC のための指定 */
  /* 横幅が 992px 以上の場合ここを適用 */
  p { color: red; }
}

「広→狭」の順にの記述する方法

横幅が広いものから先に記述し、より横幅が狭いものはあとから追加／上書き変更していく書き方。(PC→タブレット→スマホ)

近年は推奨されなくなってきている。

/* デフォルト = 幅の最も広い機器 = PC のための指定 */
p { color: red; }

@media screen and (max-width: 992px) {
  /* 次に幅の狭い機器 = タブレット のための指定 */
  /* 横幅が 992px 以下の場合ここを適用 */
  p { color: blue; }
}

@media screen and (max-width: 768px) {
  /* 次に幅の狭い機器 = スマホ のための指定 */
  /* 横幅が 768px 以下の場合ここを適用 */
  p { color: black; }
}