【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で指定すればいいわけです。
可能性は無限大ですね！
私のHPです。
webやグラフィックデザイン、イラスト制作などのお仕事がありましたら、ぜひこちらからお気軽にお問合せください！