CSSのメディアクエリの書き方(@media、min-width、max-width)

CSSのメディアクエリの書き方(@media、min-width、max-width) HTML/CSS

こんにちは、mickです。

レスポンシブルデザインでWebサイトをつくるときに欠かせないのが、メディアクエリ。
Webサイトをパソコンでみているのか、スマホでみているのか、を画面の横幅で判断します。

そのときに使うのが、CSSのメディアクエリ。
自分の中で、いつもどっちがどっちか混乱しちゃうmax-widthとmin-width

そこで勉強して記事へとアウトプット学習することにしました。
おつきあいにありがとう。

⇒ メディアクエリの使用

min-width や max-width でビューポートを判断

Webサイトが見えている範囲がビューポート
Webサイトが見えている範囲がビューポート

Webサイトが見えている範囲をビューポートといいます。
メディアクエリを使うとビューポートの幅を条件に使いたいCSSを条件づけることができます。
プログラミングでいえば、if文になります。

書き方:min-widthは、値以上のとき適用する

min-widthを使うと、指定の画面幅「以上」のとき、自分がやりたいCSSを適用することができるようになります。

書き方としては、値を小さい方から書くとコードが読みやすくなります。
基本的にCSSは、後書き優先だからです。

画面の小さいスマホに合わせてCSSを書くときに使います。
これは、「スモールスクリーン・ファースト」や「モバイルファースト」といいます。

/* min-widthの書き方サンプル */
.from-min { border: 2px solid lime; }
@media (min-width: 460px) /* 画面幅が460px以上の場合に適用 */
{
 .from-min { background: yellow; }
}
@media (min-width: 760px) /* 画面幅が760px以上の場合に適用 */
{
 .from-min { background: red; }
}
@media (min-width: 1060px) /* 画面幅が1060px以上の場合に適用 */
{
 .from-min { background: blue; }
}
@media (min-width: 1200px) /* 画面幅が1200px以上の場合に適用 */
{
 .from-min { background: green; }
}
<div class=”from-min”>Webサイトの幅(ビューポート)を変更しながらココを見ていてください。</div>
Webサイトの幅(ビューポート)を変更しながらココを見ていてください。

書き方:max-widthは、値以下のときに適用する

max-widthを使うと、指定の画面幅「以下」のとき、自分がやりたいCSSを適用することができるようになります。

書き方としては、値を大さい方から書くとコードが読みやすくなります。
基本的にCSSは、後書き優先だからです。

画面の大きいパソコンに合わせてCSSを書くときに使います。
これは、「ラージスクリーン・ファースト」や「デスクトップファースト」といいます。

/* man-widthの書き方サンプル */
.from-max { border: 2px solid lime; }
@media (max-width: 1200px)  /* 画面幅が1200px以下の場合に適用 */
{
 .from-max { background: yellow; }
}
@media (max-width: 1060px)   /* 画面幅が1060px以下の場合に適用 */
{
 .from-max { background: blue; }
}
@media (max-width: 760px)   /* 画面幅が760px以下の場合に適用 */
{
 .from-max { background: red; }
}
@media (max-width: 460px)   /* 画面幅が460px以下の場合に適用 */
{
 .from-max { background: green; }
}
<div class=”from-max”>Webサイトの幅(ビューポート)を変更しながらココを見ていてください。</div>
Webサイトの幅(ビューポート)を変更しながらココを見ていてください。

まとめ。迷ったらmin-widthで統一する

CSSのメディアクエリのmin-widthとmax-widthの書き方を紹介しました。

CSSのソースコードを読みやすくしたり、ミスを減らすためには、min-widthかmax-widthのどちらで書くか決めておくのがベスト。

  • 画面の小さいスマホスタイルから先に書くモバイルファースト
  • 画面の大きいパソコンスタイルから先に書くデスクトップファースト

現在のメディアクエリの指定方法は、モバイルファーストが圧倒的に多い、というのが次の書籍に書いてます。

つまり、迷ったらmin-widthで書いていくのがベターですね。

記事を読んでくれて嬉しいです。
今日もありがとうございました。

初稿 2021/01/29