CSSのメディアクエリで最小値と最大値の範囲指定を比較演算子でする方法

こんにちは、フロントエンドエンジニアのまさにょんです。

今回は、CSSのメディアクエリで最小値と最大値の範囲指定を比較演算子でする方法について解説します。

1 メディアクエリで最小値と最大値の範囲指定を比較演算子でする
2 おすすめ書籍(HTML&CSS編)
3 プログラミング学習・エンジニア転職関連の情報
4 Twitterやってます！Follow Me！
5 参考・引用
6 最近の投稿

メディアクエリで最小値と最大値の範囲指定を比較演算子でする

CSSのメディアクエリでは、min-width: 400px などと最小値を指定して、400px 以上の画面幅ならスタイルを適用するという直感的とは言いがたい範囲指定でした・・・

それが今回のCSSの機能のバージョンアップにより、メディアクエリの範囲指定で比較演算子( >=, <=, >, < ) を使用できるようになりました。

比較のために、旧バージョンと新バージョンを並べると後述するようなCSSの書き方になります。

今回は、メディアクエリの範囲指定を新旧比較していきます。

指定した画面幅(最小値)以上の場合にスタイルを適用する

指定した画面幅(最小値)以上の場合にスタイルを適用するには、次のように記述します。

比較演算子だと、400pxを含む「以上」というのも分かりやすいですね。

/* 旧-Version */
@media (min-width: 400px) {
  /* 画面幅が400ピクセル以上のスタイル適用内容 */
}

/* 新-Version: 比較演算子を使用できます。 */
@media (400px <= width) {
  /* 画面幅が400ピクセル以上のスタイル適用内容 */
}

指定した画面幅(最大値)以下の場合にスタイルを適用する

指定した画面幅(最大値)以下の場合にスタイルを適用するには、次のように記述します。

比較演算子だと、767pxを含む「以下」というのも分かりやすいですね。

/* 旧-Version */
@media (max-width: 767px) {
  /* 幅が767px以上のスタイル */
}

/* 新-Version: 比較演算子を使用できます。 */
@media (width <= 767px) {
  /* 幅が767px以上のスタイル */
}

指定した画面幅の範囲内(最小値~最大値)の場合にスタイルを適用する

指定した画面幅の範囲内(最小値~最大値)の場合にスタイルを適用するには、次のように記述します。

メディアクエリでの比較演算子は、2つの幅を定義する時により効率化されます。

/* 旧-Version */
@media (min-width: 400px) and (max-width: 600px) {
  /* 400px〜600pxの範囲内でのスタイル */
}

/* 新-Version: 比較演算子を使用できます。 */
@media (400px <= width <= 600px )  {
  /* 400px〜600pxの範囲内でのスタイル */
}

メディアクエリの範囲指定で比較演算子を使用するメリット

メディアクエリの範囲指定で比較演算子を使用するメリットとして、次の2点が挙げられるでしょう。

記述が直感的にわかりやすくなる。
- min-width(最小値・以上) とmax-width(最大値・以下) は、直感的には扱いづらい。
- ( 最小値 <= width <= 最大値 ) の方が記述として、わかりやすい。
- 以上・以下の関係性が、より直感的にわかる。
メディアクエリの冗長性を減らす。
- (min-width: 400px) and (max-width: 600px) と書くよりも、(400px <= width <= 600px )と書く方が簡潔。

PC・タブレット・スマホ画面サイズのメディアクエリSampleCode

PC・タブレット・スマホ画面サイズのメディアクエリのSampleCodeになります。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Media-Query-Test🔥</title>
<style>

/* Media-Sizeに関係なく適用させるCSS */
.box1 {
    width:200px;
    height:100px;
}

.box2 {
    width:200px;
    height:100px;
}

.box3 {
    width:200px;
    height:100px;
}

/* PC-Size */
@media (1201px <= width) {
    .box1 {
        background-color: red;
    }

    .box2 {
        background-color: blue;
    }

    .box3 {
        background-color: chartreuse;
    }
        
}

/* Middle-Size */
@media (768px <= width <= 1200px) {
    .box1 {
        background-color: rgb(255, 0, 119);
    }

    .box2 {
        background-color: skyblue;
    }

    .box3 {
        background-color: rgb(0, 255, 174);
    }
        
}
    
/* SmartPhone-Size */
@media (width <= 767px) {

    .box1 {
        background-color: orange;
    }

    .box2 {
        background-color: aquamarine;
    }

    .box3 {
        background-color: gray;
    }

}

</style>
</head>
<body>
    <h1>CSSのメディアクエリで最小値と最大値の範囲指定の方法(比較演算子)</h1>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>
</html>