【CSS】@layerを使って複数のスタイルを調整・管理する方法

ホーム

CSS
HTML/CSS

【CSS】@layerを使って複数のスタイルを調整・管理する方法

この記事にはプロモーションが含まれています。

投稿：2022・12・28

更新：2022・12・28

Webサイトに設置したボタンなどのパーツの見た目（スタイル）を、季節や実施するイベントによって柔軟に変更したいということがしばしばあります。

対応方法としては、
・その都度、CSSを上書きしてしまう
・見た目を変更するたびに新しくCSSファイルを作成し、読み込ませる

といった方法が考えられますが、いずれもスマートとは言えません。

上記の方法では以前のスタイルに戻すことが難しかったり、読み込ませるCSSファイルの管理が煩雑になったりするというデメリットを抱えています。

変更前のスタイルに戻しやすくて、無駄にCSSファイルが増えてしまわない方法があれば、それで管理するのが一番良いですよね。

そこで今回は、CSSの@layer（レイヤー）を利用してスタイルを調整する方法をご紹介します。

@layerでスタイルを調整することで、簡単に変更前の状態に戻せたり、複数の見た目の調整を１つのCSSファイルで管理できたりなどのメリットが得られます。

この記事を読むことで分かること

・@layerの基本的な考え方
・レイヤーの宣言（定義）
・@layerで宣言したレイヤーの優先順位
・@layerでスタイルを切り替える方法

▼動画解説は下のサムネイルから（YouTubeに飛びます）

@layerの基本的な考え方

「そもそもレイヤーって何？」

「なんでレイヤーで管理すると便利なの？」

という疑問を持っている人もいると思うので、まずはCSSにおけるレイヤーの基本的な考え方について説明します。

Photoshopなどを使って画像編集やイラスト作成をしている方にはお馴染みの『レイヤー』ですが、CSSのレイヤーも意味合いは同じです。

レイヤーとは重なり合うシートのようなものです。

重なり合ったシートを真上から見ると一番上のシートしか見えませんよね。

しかし、一番上のシートをどかせばその下にあるシートを見ることができます。

このように、シートの重なり順を変更することで特定のシートの効果を適用させることができる仕組みが@layer（レイヤー）です。

@layerの仕組みができるまで、CSSでスタイルを変更しようと思ったら現存の調整を削除して書き直すか、より優先度が高くなるような方法で上書きしていくしかありませんでした。

そして、新しいスタイルの優先度を高くするためにCSSが読み込まれる順番に気を使う必要があり、セレクタの指定に細心の注意を払わなければなりませんでした。

しかし@layerを利用すると、適用させたいスタイルをレイヤー（シート）ごとに管理できるようになるので、そういった問題を解決することができるというわけです。

なんとなく、@layerが便利そうなのがイメージできたでしょうか？

レイヤーを使ってCSSを管理するには、まずCSSファイルでレイヤーを宣言（定義）する必要があります。

次の章では、レイヤーの宣言について説明していきます。

POINT!

・レイヤーとは重ね合わせることができるシートのようなもの！
・@layerでスタイルを管理することで、CSSファイルの読み込み順や優先度を気にする必要がなくなる！
・レイヤーを利用するには、まずレイヤーを宣言する必要がある！

レイヤーの宣言

レイヤーを利用するにあたり、まずはレイヤーに名前をつける必要があります。

そしてレイヤーに名前をつけることをレイヤーの宣言と言います。

レイヤーを宣言するための構文は下の通りです。

カスケードレイヤーの宣言: @layer レイヤーの名前

これだけです。とても簡単ですね！

レイヤーの名前は、idやclassの命名と同じ考え方でOKです。（英字から始まる英数字と使用可能な記号のみ）

また、一度に複数のレイヤーを宣言することもできます。

カスケードレイヤーの宣言（複数）: @layer レイヤーの名前1, レイヤーの名前2, レイヤーの名前3

レイヤーの名前を『,（カンマ）』で区切るだけなので、レイヤーが増えても宣言はとてもシンプルです。

通常、カスケードレイヤーを利用してCSSを管理する必要性がある＝複数のレイヤーを使ってスタイルを調整する必要があるということなので、普通は上のように複数宣言を行うことが多いかと思います。

宣言したレイヤーにCSS調整を追加する場合は以下のように記述します。

HTML

<p class="sample_text">サンプルテキストです。</p>

CSS

@layer layer_b , layer_a;

@layer layer_a {
    .sample_text {
        color: blue;
    }
}

@layer layer_b {
    .sample_text {
        color: green;
    }
}

表示結果

サンプルテキストです。

あえて、layer_b→layer_aの順番で宣言しているところに注目してください。

スタイルが適用されているのは、layer_aの方になっていますね。

CSSファイルは上から順に読み込まれるので、セレクタの優先度が同じであれば後（下）に書かれた調整の方が適用されるのが普通です。

しかしここではレイヤーを宣言しており、レイヤー別にスタイルを管理していることになるため、CSSの記述順序に関係なくlayer_aのスタイルが適用されています。

次の章では、レイヤーが適用される法則（優先順位）についてもう少し詳しく確認していきたいと思います。

POINT!

・レイヤーの宣言は、『@layer レイヤー名』で行える！
・一度に複数のレイヤーを宣言することもできる！
・レイヤーで管理すると、CSSの読み込み順やセレクタの優先度に関係なくレイヤーごとにスタイルが適用される！

レイヤーの優先順位

レイヤーを複数宣言した場合、後で宣言したレイヤーの優先度の方が高くなります。

前章のサンプルではレイヤーを次のように宣言していました。

CSS

@layer layer_b , layer_a;

この場合、layer_bよりもlayer_aの方が優先度が高くなります。

ゆえに、layer_aに記述したcolor: blueが適用されてテキストの色が青くなっていたというわけですね。

layer_bで優先度が高くなるようなセレクタ指定にしても、表示結果は変わらずlayer_aのスタイルが適用されます。

実験として、サンプルテキストと書かれたp要素にid属性も指定した上で、layer_bではidでセレクタ指定をしてみましょう。

HTML

<p id="sample_text_id" class="sample_text">サンプルテキストです。</p>

CSS

@layer layer_b , layer_a;

@layer layer_a {
    .sample_text {
        color: blue;
    }
}

@layer layer_b {
    #sample_text_id {
        color: green;
    }
}

表示結果

サンプルテキストです。

通常、classによる指定よりもidによる指定の方が優先度が高いので、idをセレクタにしたCSS調整の方が適用されますが、ここではレイヤー別に管理しているのでセレクタの優先度を気にする必要はありません。

ただし、レイヤーの外に調整を記述してしまうとその調整が最優先で適用されてしまうので注意が必要です。

CSS

@layer layer_b , layer_a;

.sample_text {
    color: orange;
}

@layer layer_a {
    .sample_text {
        color: blue;
    }
}

@layer layer_b {
    #sample_text_id {
        color: green;
    }
}

表示結果

サンプルテキストです。

レイヤーの外で調整してしまったスタイルはレイヤーの管理外に置かれ、上書きや変更が難しくなってしまいます。

逆に言えば、Webページ全体に共通させたい絶対的なルール（ルート要素のフォントサイズなど）は、レイヤーの外に記述しておくことで、上書きされてしまうような事故を防ぐことができます。

レイヤーが適用される法則（優先順位）を押さえたら、次は実際にレイヤーを切り替えることでボタンの見た目を変更するファイルを作っていきたいと思います！

POINT!

・レイヤーは後で宣言された方が優先される！
・セレクタの優先度に関係なく、レイヤー順で適用されるスタイルが決定する！
・レイヤーの外にした記述したスタイルは最優先で適用される！

@layerでスタイルを切り替える方法

レイヤーを使ってボタンなどのスタイルを切り替えたい場合、共通部分（スタイルを変更しない調整）のレイヤーと、カラーなど変更を加えたいレイヤーを分けて記述しておくことがポイントとなります。

例えばフォントサイズやボタンの幅、高さは固定しておきたいとすれば、それらの調整は共通レイヤーに記載しておきます。

一方、カラーや角丸など状況に応じて柔軟にスタイルを変更したいプロパティは、共通レイヤーとは別のレイヤーに記載するようにします。

下は、『common』と宣言したレイヤーにbutton要素の共通の調整を記述し、『style_a（b）』と宣言したレイヤーに変更を加えたい背景色と角丸の調整を記述した例です。

ボタンの背景色と角丸の調整をレイヤー分けしておくことで、レイヤーの宣言順を変更するだけでスタイルが切り替えられるようになっています。

HTML

<button type="button">お申し込みはこちら</button>

CSS

/*後に宣言したレイヤーの方が優先度が高くなる*/
@layer common , style_a , style_b;

@layer common {
    button {
        font-size: 20px;
        width: 250px;
        font-family: sans-serif;
        font-weight: bold;;
        padding: 10px 20px;
        border: none;
        outline: none;
        color: white;
        cursor: pointer;
    }
}

@layer style_a {
    button {
        background-color: rgb(1, 131, 114);
        border-radius: 30px;
    }
}

@layer style_b {
    button {
        background-color: rgb(190, 3, 3);
        border-radius: 0px;
    }
}

表示結果

上の例ではstyle_bのレイヤーの優先順位が一位であるため、style_bの調整が有効になっています。

これをstyle_aに変更したければ、レイヤーの宣言順に変更を加えるだけでOKです。

CSS

/*後に宣言したレイヤーの方が優先度が高くなる*/
@layer common , style_b , style_a;

…後略

表示結果

この方法ならばCSSファイルの1行のみを更新すれば良いので手間がかからず、他のレイヤーに影響を及ぼしてしまうこともありません。

スタイルを変更するために要素に新しくclassを追加したり、CSSの記載順（読み込み順）を気にしたりしなくても良いのは本当に便利ですね！

POINT!

・共通する部分は共通レイヤーを用意してそこに記載しよう！
・変更を加えたいプロパティは別のレイヤーを作成してそちらに記載しよう！
・レイヤーの宣言順を変えることで、簡単にスタイルを切り替えることができる！

今回の動画で紹介したコード！

今回の解説動画で使用したコードです。学習用としてご自由にコピペしてお使い下さい。（※スクロールできます）

HTML

>!DOCTYPE html>
>html lang="ja">
>head>
    >meta charset="UTF-8">
    >meta http-equiv="X-UA-Compatible" content="IE=edge">
    >meta name="viewport" content="width=device-width, initial-scale=1.0">
    >title>layer>/title>
    >link rel="stylesheet" href="layer.css">
    >style>
        body {
            width: 100%;
            height: 100vh;
            display: grid;
            place-content: center;
        }
    >/style>
>/head>
>body>
    >p id="text_id" class="text_class">サンプルテキスト。>/p>
>/body>
>/html>

CSS

@charset "utf-8";

@layer style_b , style_a;

p {
    font-size: 32px;
}

@layer style_b {
    .text_class {
        color: blue;
    }
}

@layer style_a {
    #text_id {
        color: red;
    }
}

記事のトップへ戻る