「CSSを修正したのに、なぜかデザインが反映されない…」「仕方ないから !important で強制適用しちゃえ！」CSSを書いている人なら、誰もが一度はこんな経験ありますよね。
これまでは、CSSの適用順を決めるために「記述する順番」や「セレクタの強さ（詳細度）」を必死にコントロールする必要がありました。
しかし、モダンCSSに登場したカスケードレイヤー（@layer）を使えば、その不毛な戦いに終止符を打つことができます！
今回は、この@layerの仕組みと使い方を、解説します。

カスケードレイヤー（@layer）とは？

一言で言うと、「CSSの優先度（レイヤー）をグループごとに自分で定義できる機能」です。

これまでのCSSでは、以下のように「後に書いたもの」や「セレクタが具体的なもの」が勝つ仕組みでした。

• .card p （詳細度が高い：勝ち）
• p （詳細度が低い：負け）

しかし、@layer を使うと、「このレイヤーに書いたコードは、別のグループより優先する」という絶対的なルールを作ることができます。

基本的な使い方とコード例

まずは一番シンプルな例を見てみましょう。

1. レイヤーの順番を宣言する

CSSファイルの先頭で、レイヤーの「優先順位（低い順 → 高い順）」を宣言します。後ろに書いたレイヤーほど強力（優先される）になります。

/* 優先度：低 ────────> 高 */

@layer reset, base, component;

2. 各レイヤーの中身を書く

あとは、それぞれのレイヤーの中にCSSを書いていくだけです。

/* 1. リセットレイヤー（優先度：低） */
@layer reset {
#submit-btn {
background: gray; /* 基本のグレー */
padding: 10px;
}
}

/* 2. コンポーネントレイヤー（優先度：高） */
@layer component {
/*ただの「button」だけど、resetの「#submit-btn」より優先される！ */
button {
background: blue; /* 青色にしたい */
color: white;
}
}

ポイント！ ここがすごい！

通常のCSSのルールでは、「タグ（button）」よりも「ID（#submit-btn）」の方が圧倒的に詳細度が高いため、コンポーネント側でいくら青色に指定してもリセット側のグレーに負けてしまいます。

しかし、最初にレイヤーの順序を @layer reset, component; と定義しているため、レイヤーの強さ関係（reset ＜ component）が、セレクタの強さ（ID ＞ タグ）よりも最優先されます！

その結果、詳細度の壁をぶち破って、ボタンは無事に「青色」になります。

補足：詳細度が消えるわけではない

@layer を使っても、詳細度のルール自体がなくなるわけではありません。

• 異なるレイヤー同士 → レイヤー順が優先
• 同じレイヤー内 → 通常の詳細度ルール

で判定されます。

つまり、「詳細度を完全に無視する機能」ではなく、「詳細度で戦う範囲を整理できる機能」というイメージです。

実務で使える！おすすめのレイヤー構成

カスケードレイヤーが本当に便利だと実感するのは、Bootstrapなどの外部フレームワークや、スライダーなどのプラグインCSS、そしてリセットCSSを導入するときです。

基本的には、以下のように「基本になる土台」から「細かいパーツ」に向かって、優先度が高くなるように並べるのがおすすめです。

/* レイヤーの並び順（右に行くほど優先度が高くなります） */
@layer framework, reset, base, components, utilities;

@layer framework {
/* Bootstrapや、スライダー（Swiperなど）のCSSはここ！ */
/* 他人が作った強力なCSSを、一番下に敷くことでコントロールしやすくします */
}

@layer reset {
/* 全体のリセットCSS */
}

@layer base {
/* サイト全体の共通ルール（bodyの背景色や、見出しの共通マージンなど） */
}

@layer components {
/* 自分がデザインするボタンやカードなどのパーツ */
}

@layer utilities {
/* 余白調整などの便利クラス（最優先で効かせたいので一番右に） */
}

この順番で最初に設計しておけば、「導入したプラグインのCSSが強すぎて、自分が書いたコードが全然反映されない…」という、CSSあるあるのストレスから完全に解放されます。

自分で書いたコード（components）の方が確実に強くなるので、余計な詳細度の戦いをしなくて済むようになりますよ。

次回は、

• HTML側（index.html）でレイヤーを指定する方法
• 複数のCSSファイルを、1行でパチパチ仕分ける書き方
• 外部のCDNリンク（Bootstrapなど）をレイヤーに組み込む書き方

これを知ると、ファイルを細かく分けたときの管理が圧倒的にラクになります。