今回は「CSSカスタムプロパティの使い方」について紹介します。

CSSカスタムプロパティを使うことで効率的にコーディングすることが出来るようになるので、是非参考にしてください！

CSSカスタムプロパティとは？

カスタムプロパティ (CSS 変数やカスケード変数と呼ばれることもあります) は、 CSS の作者によって作成され、文書全体で再利用可能な特定の値を含むエンティティです。それらは、カスタムプロパティ記法 (たとえば、–main-color: black;) によって設定し、 var() 関数 (たとえば、 color: var(–main-color)😉 を使ってアクセスします。

引用:MDN

つまりCSSカスタムプロパティを使うことで、色やフォントなど同じ値を定義することができ、修正する際には変数の値を1箇所変えるだけで良いので、CSSのメンテナンスが楽になります。

CSSカスタムプロパティの使い方について

それでは、CSSカスタムプロパティの使い方を見ていきましょう！

CSSで変数を定義する

まずは以下のように変数で値を定義していきます。

変数名は自由につけても良いですが、できるだけ一目でわかる変数名にすると良いでしょう。

:root {
    --(変数名): 値;
}

例

:root {
    --font-color: red;
}

CSSで定義した変数を呼び出す

そして定義した変数を、varを使って呼び出していきます。

セレクタ {
    プロパティ: var(--(変数名));
}

例

h1 {
    color: var(--font-color);
}

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

See the Pen
Untitled by webis (@webis-co)
on CodePen.

上記のように同じ値は変数でまとめておくことで、修正が1箇所で済みます！

今回は色で説明しましたが、他にもフォントや幅も変数で定義することができるので、是非試してみてください。

まとめ

以上が、「CSSカスタムプロパティの使い方」でした。

より詳しく知りたい方は、MDNのサイトを覗いてみてください。