CSSでも変数を使用可能！カスタムプロパティの使い方

CSSのカスタムプロパティ（変数）機能について紹介します。変数とは超ざっくり言うとプログラミングで何回も使う値を先に登録しておく機能のことです。CSSでも変数を使用できるそうなので早速概要を紹介します。

このカスタムプロパティで登録しておけば、カラーコードの値が何だったかとかをいちいち確認しなくて済みます。また、webサイトのテーマカラーを変更したいと思った時に、該当の場所のカラーコードをそれぞれ変更しなくても、変数に登録しているカラーコードを修正すれば一括で変更できます。

カスタムプロパティの記述方法

カスタムプロパティは　–プロパティ名：CSSの値　で記述します。

element{
        --main-color : #000;
}

宣言した変数を使う際はvar(–プロパティ名)で表記します。

h2{
    color:var(--main-color );
}

また、ブラウザの仕様や変数の表記に誤りがあって正しく表示されなかった時のために代わりの値を含めることも出来ます。

h2{
    color: var(--main-color, #ddd); 
    /* --main-color が定義されていなければ #ddd */
}

以上CSSのカスタムプロパティ（変数）の使い方でした。多用するとこれはこれでややこしい設計になってしまいそうなので賢く使いたいですね。

こちらのページは下記ページを参考にしております。各ブラウザの対応状況IE以外はサポートしているようです。詳しくは下記ページよりご確認頂けます。