- 公開日：
CSS：カスタム変数でユニットの装飾を手軽に変更する方法
CSSのカスタム変数（カスタムプロパティ）は、--で始まる名前を持ち、特定の値を再利用するために使用されます。これにより、スタイルの一貫性を保ちつつ、メンテナンスが簡単になります。
HTML
<section class="cp-sec cp-sec--1">
<h2 class="cp-sec__heading">第1カラー</h2>
<p>再利用性: 一度定義した変数を何度も使えるので、コードの重複を減らせます。</p>
</section>
<section class="cp-sec cp-sec--2">
<h2 class="cp-sec__heading">第2カラー</h2>
<p>保守性: 値を変更したい場合、変数を定義した部分だけを変更すれば全体に反映されます。</p>
</section>
<section class="cp-sec cp-sec--3">
<h2 class="cp-sec__heading">第3カラー</h2>
<p>ダイナミックなスタイル: JavaScriptで変数の値を変更することもでき、動的なスタイル調整が可能です。</p>
</section>CSS
.cp-sec {
--c-base: #333;
--c-border: #9d9d9d;
--c-base-bg: #F0F2FA;
border-radius: 10px;
background-color: var(--c-base-bg);
border: 3px solid var(--c-border);
padding: 15px 25px;
margin-bottom: 20px;
}
.cp-sec--1 {
--c-base: #C92C2C;
--c-border: #E27575;
--c-base-bg: #FDEAEA;
}
.cp-sec--2 {
--c-base: #3A905C;
--c-border: #80C09A;
--c-base-bg: #EFFBF4;
}
.cp-sec--3 {
--c-base: #1E55AB;
--c-border: #75A0E2;
--c-base-bg: #E9F2FF;
}
.cp-sec__heading {
font-size: 20px;
font-weight: bold;
color: var(--c-base);
}また、背景画像なども同様にカスタム変数に格納し利用できます。
&--1 {
--b-iconURL: url("../images/icon01.svg");
}
&--2 {
--b-iconURL: url("../images/icon02.svg");
}
&--3 {
--b-iconURL: url("../images/icon03.svg");
}
...
&:before {
background: var(--b-iconURL) no-repeat 0 0;
}執筆者
astroboy
Webデザイナー&コーダー。HTML/CSS/JavaScript/Vue.js/WebGL/ECサイトなど手広くWeb制作に従事する。現在は東京で活動中。