超簡単ですぐに使える!CSSセレクタ【:root】を使って作業時間短縮

    CSS変数

    こんにちは。

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

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



    :rootの使用方法

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

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

    See the Pen
    wvoyZWb
    by syo (@mma111syo)
    on CodePen.

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

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

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

    See the Pen
    gOLvyzN
    by syo (@mma111syo)
    on CodePen.

    上記のコードの中に

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

    と記述してあります。

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

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

    See the Pen
    abBYJaE
    by syo (@mma111syo)
    on CodePen.

    --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);
    }

    See the Pen
    KKNQYLW
    by syo (@mma111syo)
    on CodePen.

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

    その他の使用方法

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

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