意外と知らない！？CSSのカスタムプロパティ

意外と知らないシリーズ第一弾です。

早速、意外と知らないCSSのカスタムプロパティをご紹介しようかと思います。

カスタムプロパティはCSS変数やカスケード変数と呼ばれたりし、その名の通り、CSSで変数が使えるものになります。

「変数が使えるってSassやScssでも出来るんじゃないの？」と思った方がいるのではないでしょうか？

その通りです。

ですが、違いとしまして、SassやScssはコンパイルしてCSSにしないと使用出来ないのに対して、カスタムプロパティはコンパイルをせずにデフォルトで使用することが出来ます。

では、簡単に使用方法を見ていきましょう！

HTML

<p>この段落は初期値で黒です。</p>

CSS

:root {
   --text-color: red;
}
p {
   color: var(--text-color);
}

見て分かるように使用方法はとてもシンプルです。

まず、:root{}と記述された部分に変数を用意します。

この:rootセレクタは全てのHTMLに変数を使えるという事を意味しています。

:root {
   
}

変数は必ず変数名の前に「ーー」が必要になります。

なので例で言うと、先頭の「ーー」が変数の宣言で「text-color」が変数名になります。

変数名は大文字・小文字が区別されますので、ご注意。（例）Text-color、text-color

--text-color: red;

そして、pにcolorを指定していますが、ここでvarが登場します。

このvarが変数の呼び出し関数になります。

varの引数（カッコ内）に変数を記述することで使用が可能です！

p {
   color: var(--text-color);
}

以上が基本的な使用方法になります！

最新のブラウザであれば大体使用する事が出来ます。もちろんIEは使用出来ません！

対応ブラウザについてや、もっと詳しく知りたい方は下記をご参照下さい。

株式会社NextCode