🤤

CSS 新機能である Custom Media Queries が便利

Toya Onodera

2024/12/11に公開

CSS

PostCSS

tech

こんにちは！株式会社シロクでエンジニアをしている小野寺と申します！
今回は、CSSの新しい機能である Custom Media Queries (@custom-media) についてご紹介します。

Custom Media Queries について

まずは、この機能の前提となる Media Queries について説明します。
Media Queries は、異なるデバイスや画面サイズに応じてスタイルを適用するための技術です。これにより、レスポンシブデザインを実現し、ユーザーのデバイスに最適化されたレイアウトを提供することができます。

@media screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

しかしながら、この機能には max-width: 600px の部分を変数で扱えない といった欠点があります。

:root {
  --small-viewport-size: 600px;
}

/* これは動かない */
@media screen and (max-width: var(--small-viewport-size)) {
  body {
    background-color: lightblue;
  }
}

この欠点を補う機能が @custom-media です。CSS Media Queries Level 5 で提案されている機能となっており、変数と Media Queries を組み合わせて表現することを可能とする機能になります。

具体的な実装例は以下になります。

@custom-media --small-viewport (max-width: 600px);
@custom-media --large-viewport (min-width: 1200px);

@media (--small-viewport) {
  /* スタイルを記述 */
}

@media (--large-viewport) {
  /* スタイルを記述 */
}

このように変数を導入することで可読性もメンテナンス性も一気に向上します。

導入方法

とはいえ、まだ正式に提供されている機能ではありません。今回は PostCSS を使用して Custom Media Queries を導入する方法を説明します。今回は postcss-custom-media を導入することで、容易に Custom Media Queries を利用することが可能になります。

PostCSS と postcss-custom-media をインストール

npm install postcss postcss-custom-media --save-dev

PostCSS の設定ファイル（例：postcss.config.js）を作成し、postcss-custom-media をプラグインとして追加

module.exports = {
  plugins: [
    require('postcss-custom-media')({
      importFrom: 'path/to/your/custom-media.css' // カスタムメディアクエリの定義を読み込むファイル
    })
  ]
};

カスタムメディアクエリを定義したCSSファイルを作成

@custom-media --small-viewport (max-width: 600px);
@custom-media --large-viewport (min-width: 1200px);

@media (--small-viewport) {
  /* スタイルを記述 */
}

@media (--large-viewport) {
  /* スタイルを記述 */
}

これで、プロジェクト内のCSSファイルでカスタムメディアクエリを使用することができるようになります。

まとめ

Sass(SCSS) の @mixin などでも似たような機能を使用できますが、純粋な CSS でこの表現が使えることはかなりメリットが大きいのではないかと感じております。将来的に導入される機能ではありますが、先にプロジェクトに導入してみるのはいかがでしょうか。（Astro などでも問題なく利用できま！）自分は CSS を書くことが好きなので、とても嬉しい機能だと感じています。

最後まで読んでいただき、ありがとうございました！

参考文献

sirok engineer's blogPublication

「N organic」、「FAS」等の化粧品ブランドを展開している株式会社シロクのエンジニアブログです。 ECサイトを中心とした自社サービスの開発・運用を行っています。 sirok.jp/norganic

Custom Media Queries について

導入方法

まとめ

参考文献

Discussion