【CSS】:rootやvarとは何か？好きな変数名でカスタムのプロパテを作成する方法を実例で解説（プロパティ名の2本線, 初心者, わかりやすい）

CSS・SCSS

2024/6/6

記事内に広告が含まれていることがあります。

CSSを使っていると:rootという表記を目にすることがあります。

この:rootは特に、「--プロパティ名」といったハイフン2本のプロパティ名やvarと一緒に使われることが多いです。

どれもとても便利なものなのです。ここでは:rootとは何か？や「--プロパティ名」やvarの使い方についてまとめています。

:rootとは何か？
カスタムプロパティ（–とvar）
:rootにカスタムプロパティを設定するメリット
実例
参考

:rootとは何か？

:rootはCSSのセレクタとして使われる疑似クラスです。

対象の要素はツリーのルート要素、つまり最上位にくる要素となります。

例えば以下のようなHTMLがあるとします。この時 :rootはhtmlタグになります。

<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>HTML</title>
</head>
<body>
  <main>
    <section>
      <div>
        <p>テキスト</p>
      </div>
    </section>
  </main>

</body>
</html>

例えば、上記のHTMLに対して:rootでCSSを以下のように設定します。

:root {
  background: yellow;
}

すると、htmlタグの背景が黄色になります。

疑似クラスとは何か？

【CSS】疑似要素と疑似クラスとは何か？セレクタのコロン２つ::と１つ:の違いを実例で解説

カスタムプロパティ（–とvar）

次に、:rootと一緒によく使われる「–プロパティ名」と「var」について解説します。

これらはCSSのカスタムプロパティというもので、自分で好きなプロパティ名をつけ、好きな場所で呼び出すことができるとても便利な機能です。

カスタムプロパティの基本構文（--）

カスタムプロパティを定義するときは以下のように記述します。

セレクタ{
  カスタムプロパティ名: 値;
}

カスタムプロパティ定義時の重要なポイント

カスタムプロパティ名の冒頭は「--」とする。
大文字と小文字は区別される（※基本は小文字のみとハイフンで記述する）
セレクタがスコープ（適用範囲）となる

カスタムプロパティの呼び出し（var）

定義したカスタムプロパティを呼び出すときはvar関数を使います。

セレクタ{
  プロパティ: var(カスタムプロパティ名)
}

例えば、次のように記述します。

:root {
  --main-bg-color: blue;
}

.one {
  color: white;
  background-color: var(--main-bg-color);
  margin: 10px;
  width: 50px;
  height: 50px;
  display: inline-block;
}

すると、background-color: var(--main-bg-color);の、var(–main-bg-color)がblueになります。

デフォルト値の指定（指定したカスタムプロパティがない場合）

対象のスコープ（範囲）の中に、呼び出せるカスタムプロパティがない場合、var関数の中でデフォルト値を設定しておくことができます。

セレクタ{
  プロパティ: var(カスタムプロパティ名, デフォルト値)
}

例えば、以下のように記述します。

.item {
  background-color: var(--my-var, blue));
}

これは、–my-varというカスタムプロパティが見つからなかった場合、blueとするということです。

デフォルト値に再度varを指定することもできます。

.item {
  background-color: var(--my-var, ver(--my-var2, blue)));
}

:rootにカスタムプロパティを設定するメリット

カスタムプロパティを設定するときに:rootに対して設定することで、設定したカスタムプロパティをグローバルに呼び出すことができます。

これは、varでカスタムプロパティを呼び出したときに、同じスコープの中にそのカスタムプロパティが存在しない場合は、親のカスタムプロパティを参照します。

このため、最上位にある:rootに対して設定しておけば、どこで呼び出しても（その配下に同じ名前のカスタムプロパティが存在しない限り）常に:rootで定義したカスタムプロパティを参照することができます。

実例

:rootにカスタムプロパティを設定しておくことで、後々変更が発生したときに、カスタムプロパティの値を変えれば全体に適用することができます。

例えば、–main-bg-colorというカスタムプロパティを:rootに設定して値をredとします。

:root {
  --main-bg-color: red;
}

これを、以下のようにvar関数をつかって3つの四角いdiv要素の中で呼び出します。

background: var( --main-bg-color );

要素１

要素２

要素３

要素４

要素５

もし色を赤からピンクに変更したいとなった場合は、次のように「red」→「pink」にするだけです。

:root {
  --main-bg-color: pink;
}

要素１

要素２

要素３

要素４

要素５

超簡単便利ですね。

▼コードの全体像

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>:rootとカスタムプロパティ</title>
</head>
<body>
  <style>
    :root {
      --main-bg-color: red;
    }
    
    div{
      padding: 40px;
      border: 1px solid gray;
      width : 100px; 
    }
    
    .first{
      background: var( --main-bg-color );
    }
    
    .second{
      background: yellow;
    }
    
    .third{
      background: var( --main-bg-color );
    }
    
    .forth{
      background: skyblue;
    }
    
    .fifth{
      background: var( --main-bg-color );
    }
    
    main{
      display: grid;
      gap: 10px;
      text-align: center;
    }
  </style>
  
  <main>
    <div class="first">要素１</div>
    <div class="second">要素２</div>
    <div class="third">要素３</div>
    <div class="forth">要素４</div>
    <div class="fifth">要素５</div>
  </main>

</body>
</html>