CSSの@custom-mediaとは、メディアクエリに名前を付けて使い回す提案仕様
レスポンシブ対応のCSSで、@media (min-width: 768px) のようなブレークポイントを何度も書き、後から値を変えるたびに全箇所を直した経験はないでしょうか。CSSの @custom-media は、こうしたメディアクエリに名前を付けて一元管理するための提案仕様（at-rule）です。まだブラウザへの正式実装は確認されていませんが、CSS変数のメディアクエリ版とも言える考え方で、PostCSS を使えば現場で先行利用できます。本記事では仕様の位置づけと実務での使いどころを整理します。
@custom-media とは何か
@custom-media は、メディアクエリに対して --tablet のような別名（エイリアス）を定義し、それを @media 内で参照できるようにする仕組みです。CSS Media Queries Level 5 の草案で議論されており、書き方は次のようになります。
@custom-media --tablet (min-width: 768px);
@media (--tablet) {
.container { padding: 2rem; }
}
ブレークポイントの定義を1か所にまとめられるため、768px を 800px に変えたいときも定義行を直すだけで済みます。CSS変数（カスタムプロパティ）が値を共通化するのに対し、@custom-media は「条件そのもの」を共通化する点が特徴です。
通常のメディアクエリとの違い
CSS変数は @media (min-width: var(--bp)) のように条件式の中で直接使えないという制約があるとされます。@custom-media はこの制約を回避し、メディアクエリ全体に名前を割り当てられる点で役割が異なります。
ブレークポイントが散在すると、デザイン変更時に修正漏れが起きやすくなります。命名された条件を使うことで、--tablet --dark のように意味ベースで指定でき、コードの可読性も上がります。
現状のブラウザ対応とPostCSSでの先行利用
注意点として、@custom-media は2026年時点でまだ草案段階であり、主要ブラウザへのネイティブ実装は確認されていません。仕様の細部も CSS Working Group で議論が続けられているとみられます。そのため本番環境で使うには、ビルド時に通常のメディアクエリへ変換する前処理が前提になります。
代表的なのが PostCSS のプラグイン postcss-custom-media です。これを導入すると、@custom-media で書いたコードがビルド時に展開され、現行ブラウザで動作するCSSに変換されます。
Next.js や Vite など PostCSS を内包するモダンなフロントエンド構成であれば、設定への追加は比較的容易とみられます。JavaScript側で同じブレークポイントを参照したい場合は、window.matchMedia() と値を揃えて管理する運用がよいでしょう。
Web制作現場での活かし方
ディレクターの視点では、@custom-media は「ブレークポイントを設計ルールとして固定する」手段として捉えられます。複数人で触るプロジェクトやデザインシステムでは、ブレークポイントが人によってバラつくと表示崩れの温床になりがちです。定義を1ファイルに集約しておけば、レビュー時にブレークポイント設計を確認しやすく、属人化も防ぎやすくなります。
ただし提案仕様である以上、将来の構文変更リスクは残ります。導入する場合はビルド変換が前提であること、チーム内で命名規則を決めておくことを、技術選定の段階で共有しておくと安全です。
まとめ
@custom-media はメディアクエリに名前を付けて再利用する提案仕様で、ブレークポイントの一元管理に役立つと考えられます。ネイティブ対応はまだ先とみられますが、PostCSS のプラグインで今すぐ先行導入が可能です。レスポンシブ設計のルールを固めたいプロジェクトでは、ブレークポイント定義の集約手段として検証する価値があります。まずは PostCSS 構成のプロジェクトで postcss-custom-media を試し、運用ルールを整えるところから始めるとよいでしょう。