【web】:rootで変数を定義する

こんにちは、つちだにんじんです。
今回は、cssの「:root」について書きます。
実は私も最近知って、「はえー！便利ー！」と感動したばかりです笑

:rootについて

「:root」は、cssの擬似クラスの一つです。
擬似クラスは他にも「:hover」「::before」「::after」「:nth-of-type」などたくさんあって、セレクタに付与して使うものです。

今回は:rootを使って変数を定義する便利な方法を紹介します。
（cssの値のテンプレみたいなのが設定できるよ！という感じです）

変数の設定

コーディングの際に、いちいちXDやfigmaからカラーコードをコピーしてくるの面倒じゃないですか？
メインカラーを#cc3300の赤で指定してたけど、クライアントからの要望でその赤を#cc9999に変更して！となった時、全部書き換えて行くの面倒じゃないですか？
私は面倒です。（真顔）

そんな時便利なのが:rootです！
方法としては、

/* CSS */
:root{
--red: #cc3300;
}

これだけです！
これは、「--red＝#cc3300」という指示です。
よく使用する色が他にもあれば、

/* CSS */
:root{
--red: #cc3300;
--blue: #000066;
--text: #330000;
}

など幾つでも変数を作成できます。
名前は自分のわかりやすいものでOKなので、上記のように「--text」とかでも大丈夫です。（確かプロパティ名は使えなかったはず・・・）
この作成した変数を呼び出すときは、

/* CSS */
text{
color: var(--red);
background: var(--blue);
}

のようにvar(変数名);を指定すればテキストのカラーは#cc3300で背景は#000066になります。

変数の値を変更する

先ほど書いたように、「やっぱり#cc3300の赤のとこは#cc9999に変えて」という変更があった場合、:rootなら一工程で全部変えられます！！！

そう、:rootの変数を変えるだけ。
説明すると、

<!--- HTML --->
<p>人の金で<span class="red">寿司</span>が食べたい。</p>
<div class="box-flex">
 <div class="red-box"></div>
 <div class="blue-box"></div>
 <div class="red-box"></div>
</div>

/* CSS */
:root{
 --red: #cc3300;
 --blue: #000066;
}
p .red{
 color: var(--red);  /* spanのテキストの色を--redに指定 */
 border-bottom: 1px solid var(--red); /* 下線の色を--redに指定 */
}
.red-box{
 background: var(--red); /* --redの色の四角 */
}
.blue-box{
 background: var(--blue);　/* --blueの色の四角 */
}
.box-flex{
display: flex;
}

色はこんな感じで赤のところは--red、青のところは--blueになっています。
これの赤色だけ変えようとした場合、変更するのは
:root{
--red: #cc3300;
}
のカラーコードのみです。
この#cc3300を#ff3300に書き換えただけで、--redを指定していた部分の色は全部#cc9999にすり替わります！！
なんて便利！
このひと工程で

こんなふうに一気に赤の部分を変更できます。

私はこれを知ってから、この機能を狂ったように乱用しています。
覚えたてのものを使いたくなる、あの気持ちですね・・・（遠い目）

今回は色に関してのみに使用しましたが、50pxなどの値やフォントの種類なども変数として定義しておけるので、

:root{
--section-padding: 50px;
}

にしておけば各セクションのpaddingをこの変数を使って統一できますし、

:root{
--gothic: Arial, Helvetica, sans-serif;
}

にしておけば、いちいちフォント名を書かなくても--gothicで指定すればいいわけです。

可能性は無限大ですね！

---

NINGEN×NINJIN | top

私のHPです。
webやグラフィックデザイン、イラスト制作などのお仕事がありましたら、ぜひこちらからお気軽にお問合せください！