こんにちは、mickです。
レスポンシブルデザインでWebサイトをつくるときに欠かせないのが、メディアクエリ。
Webサイトをパソコンでみているのか、スマホでみているのか、を画面の横幅で判断します。
そのときに使うのが、CSSのメディアクエリ。
自分の中で、いつもどっちがどっちか混乱しちゃうmax-widthとmin-width。
そこで勉強して記事へとアウトプット学習することにしました。
おつきあいにありがとう。
min-width や max-width でビューポートを判断
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>書き方：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>まとめ。迷ったらmin-widthで統一する
CSSのメディアクエリのmin-widthとmax-widthの書き方を紹介しました。
CSSのソースコードを読みやすくしたり、ミスを減らすためには、min-widthかmax-widthのどちらで書くか決めておくのがベスト。
- 画面の小さいスマホスタイルから先に書くモバイルファースト
- 画面の大きいパソコンスタイルから先に書くデスクトップファースト
現在のメディアクエリの指定方法は、モバイルファーストが圧倒的に多い、というのが次の書籍に書いてます。
つまり、迷ったらmin-widthで書いていくのがベターですね。
記事を読んでくれて嬉しいです。
今日もありがとうございました。
初稿 2021/01/29
