サクッとわかるITトレンドでご紹介した「モダンCSS」。知らなかった書き方があり、使ってみたいと感じた方も多かったのではないでしょうか。
そこで、モダンCSSをさらに深掘り。今回は、2020年代に入ってから各Webブラウザで実装され、現在多くのWebブラウザでサポートされているCSSの「@規則」について紹介し、その書き方と特徴を解説します。
▼「モダンCSS」他の便利な機能についてはこちらからご覧いただけます。
CSSの「@規則」とは
CSSを作成するとき、先頭にアットマーク（@）がついている記述を見かけることがあります。これは「@規則」と呼ばれる特別な命令文で、通常のセレクタとは異なる役割を持ちます。
たとえば、以下のような役割があります。
@import：外部のスタイルシートを読み込む
@font-face：独自のフォントを定義
@media：メディアクエリ（画面の解像度や向きなどに応じて見た目を変更する技術）による条件付きスタイルを適用具体的には、次のように指定します。
/* 外部スタイルシートの読み込み */
@import url("normalize.css");
/* 独自フォントの定義 */
@font-face {
font-family: "CustomFont";
src: url("CustomFont.woff2") format("woff2"),
url("CustomFont.woff") format("woff");
}
/* メディアクエリによる条件付きスタイル */
@media (max-width: 600px) {
body {
font-size: 14px;
line-height: 1.5;
}
}
これにより、CSSとして指定する内容を柔軟に管理でき、レスポンシブデザインなどにも対応できます。今回解説する@規則もCSSの拡張機能として追加されたもので、管理が楽になることから注目されています。
従来のCSSでは、スタイルの優先順位や継承のルールが複雑になりがちでしたが、新しい@規則によりメンテナンス性が向上し、規模の大きなプロジェクトでも効率よくスタイルを管理できるようになりました。
以下では@規則の便利な機能３つをコードとあわせてご紹介します。
便利な機能１：Container Queries
レスポンシブデザインを実現するとき、これまではビューポートと呼ばれる画面の幅に基づいてスタイルを変更していました。上記の「@media」を使って、スタイルを決める幅などを指定していたのです。
しかし、画面の幅だけでなく、特定の要素の大きさなどに応じてスタイルを設定したいことがあります。このような要望に対し、柔軟にレイアウトを調整できる技術として「Container Queries」が登場しました。@containerという指定を使って、親要素のサイズに応じたスタイルを子要素に適用する手法です。
つまり、画面の幅ではなく、周囲の要素の大きさや配置に合わせて内部レイアウトを容易に変えられるようにしたのです。具体的には、対象の要素に対して@containerでルールを定義し、その内部で条件に基づく要素のスタイルを設定します。
たとえば、次のように記述すると、コンテナのサイズに応じて子要素の背景色やパディングを変更できます。ここで、container-typeとしてinline-sizeを指定しています。これは、inline 軸と呼ばれる、テキストの行が流れる方向についての寸法によって指定する方法です。
/* コンテナとして利用する要素に対して container-type を指定 */
.container {
container-type: inline-size;
border: 1px solid #ccc;
padding: 16px;
}
/* コンテナのサイズに基づいて子要素のスタイルを変更 */
@container (min-width: 400px) {
.container .item {
background-color: lightblue;
padding: 1em;
}
}
このCSSでは、HTML要素のクラスとしてcontainerを指定した要素の幅が400px以上になったとき、その内側にあるitemというクラスを指定された要素に対して追加でスタイルを適用しています。
このようにレイアウトを柔軟に変化させたいときには有用な機能です。
便利な機能２：Scoped Styles
CSSで特定の要素にだけスタイルを適用したいことがあります。このとき、HTMLでID属性を指定したり、クラスを指定したりする方法が使われてきました。しかし、大規模なプロジェクトや外部のコンポーネントなどを使う場合、重複しないように指定するのは煩雑です。
そこで、あるコンポーネントだけにスタイルを適用する方法が望まれました。この方法として「Shadow DOM」や「CSS Modules」などが用意されてきましたが、追加でビルドなどの工程が必要で、純粋なCSSで実現する方法が望まれました。
そこで登場したのがScoped Stylesで、@scopeという指定によって、スタイルの適用範囲を限定できます。これにより、スタイルの競合を防ぎ、プロジェクト内でのスタイルの影響範囲を最小化できます。
たとえば、次のように記述すると、cardというクラスを指定したコンポーネント内の要素に対してのみスタイルを適用できます。
/* @scope を使用して、card クラス内の要素にのみスタイル適用 */
@scope (.card) {
h2 {
color: darkgreen;
font-size: 1.5rem;
}
p {
margin-top: 0.5em;
line-height: 1.6;
}
}
この例では、cardというクラスを指定した要素の中にあるh2とpタグの要素に対して限定して適用され、他には影響を及ぼしません。このため、個別のコンポーネントとして管理できます。
執筆時点では、Google Chromeや Microsoft Edgeのほか、Safariでもサポートされていますが、Firefoxはサポートされていません（参照）。それでも、プロジェクトの規模が大きくなるにつれて管理が複雑になるCSSにおいて、直感的にカプセル化できる技術として注目されています。
便利な機能3：Cascade Layers
これまでのCSSでは、スタイルを適用する優先順位はセレクタの宣言順や読み込み順で制御することがありました。しかし、大規模なプロジェクトになると、この順番の管理が複雑で不具合の原因となっていました。
そこで、画像ソフトでレイヤーを使って管理するように、複数の層に分けてCSSを定義し、レイヤー間の優先順位を設定する方法としてCascade Layersが用意されました。@layerという指定によって論理的なレイヤーに分割することで、優先順位を明示的に管理できるようになります。
たとえば、次のように記述すると、リセット用、コンポーネント用、ユーティリティ用という3つ層に分けてスタイルを定義できます。そして、複数のレイヤーを組み合わせると、後に定義されたレイヤーが優先されます。
/* リセットスタイルを定義するレイヤー */
@layer reset {
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
}
/* コンポーネント固有のスタイルを定義するレイヤー */
@layer components {
.button {
background-color: #008CBA;
color: white;
border: none;
padding: 10px 20px;
cursor: pointer;
}
}
/* ユーティリティクラスを定義するレイヤー */
@layer utilities {
.hidden {
display: none;
}
.m-16 {
margin: 16px;
}
}
このようにレイヤーごとにスタイルを分けることで、全社的なスタイルとプロジェクトごとのスタイルのような優先順位を明確に設定でき、メンテナンスしやすくなります。
Cascade LayersはCSS内でのスタイルの適用順序やグループ分けのための仕組みなので、HTML側で特別な属性を指定する必要はありません。CSSで定義したbuttonやhidden、m-16といったクラス名をそれぞれの要素に指定するだけで動作します。
たとえば、次のHTMLを作成するとresetというレイヤーで指定された内容によって、Webブラウザに割り当てられている標準のマージンやパディングをリセットできます。また、componentsというレイヤーで指定したスタイルによってボタンの見た目が変わります。さらに、utilitiesというレイヤーで指定したスタイルによって、表示されないテキストやマージンなどが変わります。HTML側では、これまでと同じようにクラスを利用して要素を配置するだけです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Cascade Layers Sample</title>
<link href="xxx.css" rel="stylesheet" />
</head>
<body>
<header>
<h1>Cascade Layers のデモ</h1>
</header>
<main>
<button class="button m-16">クリックしてください</button>
<p class="hidden">このテキストは表示されません。</p>
<section>
<h2>セクションタイトル</h2>
<p>ここに説明文が入ります。</p>
</section>
</main>
<footer>
<p>© 2025 My Example Site</p>
</footer>
</body>
</html>
このように、CSS側でレイヤーごとにスタイルをグループ化しておけば、HTML側では単にクラスを適用するだけで目的のスタイルが反映できるため、管理や調整が楽になります。
まとめ
CSSの「@規則」は新しいものが次から次へと登場しています。そして、これによって便利な書き方ができ、管理が楽になることが期待されています。Webブラウザの対応状況を見ながら、適用を検討してみてください。
増井技術士事務所代表。技術士（情報工学部門）。情報処理技術者試験にも多数合格。ビジネス数学検定1級。「ビジネス」×「数学」×「IT」を組み合わせ、コンピュータを「正しく」「効率よく」使うためのスキルアップ支援や、各種ソフトウェアの開発、データ分析などを行う。著書に『Pythonではじめるアルゴリズム入門』『図解まるわかり プログラミングのしくみ』『「技術書」の読書術 達人が教える選び方・読み方・情報発信&共有のコツとテクニック』、最新刊の『実務で役立つ バックアップの教科書』（翔泳社）がある。
