ひとつの前に引き続き、いつの間にか追加されていたcssの便利機能について2 メディアクエリ編です。例えば横幅が400px以上1100px以下の場合。

// 今までの記載方法
@media (min-width: 400px) {
  // 幅が400ピクセル以上のスタイル
}
@media (min-width: 1100px) {
  // 幅が1100ピクセル以下のスタイル
}

これが今回いつの間にか以下の書き方が出来るようになっていました。

@media (400px <= width <= 1100px) {
  // 幅が400以上1100ピクセル以下のスタイル
}

地味にとても便利なんですが、ブレイクポイントの数字に前項のcss変数が使えると更に良いなっと試してみましたが反映されず。こんな感じでは書けませんでした。まぁこれが出来ると配列も使えると最高だし、ループが使えたら更に最高じゃんなんですが、そうするともう役目がごちゃごちゃになりすぎてしまって、逆に複雑になってしまうのかなっという気もします。

:root {
  --mb_width: 400px;
  --mb_width: 1100px
}
@media (var(--mb_width) <= width <= var(--pc_width)) {
  // 幅が400以上1100ピクセル以下のスタイル
}

万屋物産は映像制作会社ですが、採用活動に力を入れていて、特に最新の(？)CSS事情に明るい方からの応募をお待ちしています。特にWebGLという単語に反応する方は大歓迎です。