こんにちは。

WEBデザイナー兼プロ格闘家のショウイチです。

今日は、:rootを使用したCSS変数の宣言ついてご紹介します。

:rootの使用方法

それでは、:rootのCSS変数の宣言について説明します。

まずはサンプルを見てみましょう。

サンプルには赤と青のボックスがあります。

この赤と青の色を変更したいとき、1つ1つコードを確認して変更をするのは時間がかかってしまいます。

そんな時に:rootのCSS変数の宣言をしていると、1ヶ所変更すると指定した箇所の全ての色が変わります。

上記のコードの中に

/* :rootのCSS変数の宣言 */
:root {
  --red: #ff0000;
  --blue: #0000ff;
}

と記述してあります。

赤を変更したい場合は上の#ff0000を、青を変更したい場合は下の#0000ffを変更すれば、色が変わります。

実際に色を変更してみましょう。

--red: #ff0000;を--red: #ffff00;に、

--blue: #0000ff;を--blue: #008000;に、変更しました。

すると赤→黄色、青→緑に変更されました。

ただこの書き方だと変数名が--redとなっているのに実際には黄色といったややこしい表現になってしまいます。

実際にサイトで使用する際は、2つのステップに分けて使いましょう。

サンプルコードはこちら。

/* :rootのCSS変数の宣言 */
:root {
  /* color */
  --red: #ff0000;
  --blue: #0000ff;
  --yellow: #ffff00;
  --green: #008000;  
  /* style */
  --main-color: var(--red);
  --sub-color: var(--blue);
  --tertiary-color: var(--yellow);
  --accent-color-1: var(--green);
}

こうすることで--main-color: var(--red);や--sub-color: var(--blue);の中のvar(--変数名)を変えるだけで、メインカラーやサブカラーを自由に変更できます。

その他の使用方法

:rootでは、colorだけでなく、widthやmarginなども指定できます。

/* :rootのCSS変数の宣言 */
:root {
  /* box */
  --box-width: 200px; 
  --box-height: 300px;  
  --box-margin: 20px 10px;
}
/* STYLE */
.box01 {
  width: var(--box-width);
  height: var(--box-height); 
  margin: var(--box-margin); 
}

同じ幅や高さ、余白を繰り返し使用するときは、上記のような記述をすると一括で変更できます。

予備の値もせっとできる

ミスで変数を消してしまったり、不具合等で適用されなかった場合に、予備の値をあらかじめ設定しておけます。

:root {
--color: #9a0000;
｝
.box {
background: var(--color,#fff100);
}

この場合、--colorが適応されなかった場合、#fff100が適応されます。

他にも色々な使い方があるので、自分に合うように調整して使いましょう。

それでは本日はここまで、また次回！

現場のプロがやさしく書いたWebサイトの分析・改善の教科書

Web担当者、マーケターの必携書!第一線のアナリストが教える「データの見方」と「改善ポイント」。この1冊で、長く使える基礎力と実践スキルを身につける!

Amazon

Yahoo!ショッピング

楽天