変数というと、JavaScriotやjQuery、PHP、Sass・Scssなど様々な言語でよく使用されていますので、馴染みがある方も多いかと思います。CSSで変数??と思われる方もいるかと思いますが、CSSでも変数は使用することが出来ます。
今回はCSSでの変数の使い方や注意点を解説していきます。
CSSでの変数について
CSSでの変数は「カスタムプロパティ」と呼ばれます。(または「CSS変数」や「カスケード変数」)
任意で付けた変数名に値を格納する事ができ、様々な場面で呼び出して使用する事が可能です。
変数の説明としてよく使われる、変数は「箱」、中身が「値」というのがありますが、これが一番分かりやすいのかなと思っています。このカスタムプロパティ(変数)を定義して使う事で、変更があった際には同じ変数を使用している箇所を一括で変更する事が出来るのでとても便利なものとなります。
カスタムプロパティ(変数)の詳しい使い方は次項で解説していきます。
カスタムプロパティ(変数)の定義
カスタムプロパティ(変数)の定義は以下のように記述します。
--color_black: #000;上記のようにカスタムプロパティ(変数)は、「–変数名: 値;」という形で記述します。最初の「—」は必ず必要となりますので注意してください。
カスタムプロパティ(変数)は、どこに記述するかによって使用出来る範囲が変わります。セレクタ内に記述すると、記述したセレクタ内でしか使用する事は出来ませんが、疑似クラス「:root」に記述する事でグローバル変数のようにCSS全体で使用する事が出来ます。
/* CSS全体で使用可能 */
:root {
--color_black: #000;
}
/* .box内でのみ使用可能 */
.box {
--color_white: #FFF;
}変数名は、管理しやすく可読性を保つために内容(値)が分かりやすい名前にするようにしてください。
定義したカスタムプロパティ(変数)を呼び出す
定義したカスタムプロパティ(変数)を呼び出すには以下のように記述します。
:root {
--color_black: #000;
}
.box {
color: var(--color_black);
}上記のようにCSSプロパティの値に「var(–変数名)」と記述する事で、定義したカスタムプロパティを呼び出す事ができます。
今回はテキストなどに使用する「色」をカスタムプロパティに定義していますが、サイト内で共通のmarginやpadding、横幅なども定義しておくとレスポンシブ時の変更も一括で出来て便利です。
※CSSのプロパティ名には変数を使用する事は出来ませんので注意してください。
カスタムプロパティ(変数)を使用する際の注意点
カスタムプロパティ(変数)を使用する際の注意点がいくつかありますので覚えておいてください。
変数名は大文字・小文字は別ものとして扱われる
変数名の大文字・小文字は以下のように別ものとして扱われますので注意してください。
:root {
--color: red;
--COLOR: blue;
}上記の「–color」を呼び出すとred(赤)、「–COLOR」を呼び出すとblue(青)となります。
pxなどの単位は変数の値に含めて記述する
pxなどの単位はカスタムプロパティ(変数)の呼び出しの際に記述しても無効となりますので、カスタムプロパティ(変数)の定義の際に値に含めて記述するようにしてください。
:root {
--margin: 20;
}
.box {
margin: var(--margin)px;
}上記のように記述しても、.boxのmarginは「20」となり単位は無効となります。
対応ブラウザ
CSSのカスタムプロパティ(変数)に対応しているブラウザは、上画像のようにIE以外のモダンブラウザは対応していますので問題ないかと思います。
対応ブラウザを詳しく知りたい方はこちらよりご確認ください。
さいごに
いかがでしたでしょうか。
今回は、CSSでの変数(カスタムプロパティ)の使い方と注意点について解説しました。
CSSのカスタムプロパティはSassやScssの変数と同じように使えるようになるととても便利です。基本的な記述方法だけでも覚えて使ってみてください。
