最新コラム
-
-
-
Webサイト制作
【2023年版】国内・海外のおすすめVPS10選
-
Webサイト制作
初心者でも5分で分かる!SSL/TLSとは何か?
-
SEO外部対策SEO対策
Googleが推奨するnofollowの正しい使い方とは?
「変数」はプログラミングではおなじみの概念ですが、これまでCSSでは基本的に変数は使えず、Sassのようなプリプロセッサを使用する場合に使うことができました。
しかし2021年現在のCSSでは変数を使えるようになっており、より効率的にCSSを書くことが可能になっています。
今回はCSSの変数とその基本的な使い方やルール、効率的な使用方法などを解説します。
「変数」とは数値や文字列などを定義する箱のようなもので、一度定義した後は何度でも使い回せる点が特徴です。
変数に定義した数値や文字列を変えると、変数の使用箇所にもそれが反映されるので、使用箇所ごとに修正する手間を省くことが可能です。
今までCSSでは変数を使用できませんでしたが、現在ではInternet Explorerなどのブラウザを除くほとんどのブラウザでCSS変数がサポートされたことで、使用できるようになっています。
ただし、モダンブラウザの中でもMicrosoft Edgeはバグが多発するという報告があるので、CSS変数を使う場合は注意が必要です。
CSS変数を使うメリットは他のプログラミング言語で変数を使う場合と大差なく、コード管理やメンテナンスがしやすい点にあります。
例えばWebサイトの原色を変更する場合、変数に代入するカラーコードを変更すれば、その変数を使用している箇所の色が全て変わるので、後で原色を修正することになってもその手間が省けます。
CSS変数はSassのようなプリプロセッサ変数と違い、「ブラウザで実行する動的なCSSプロパティ」であり、JavaScriptなどのプログラミング言語で操作・選択することが可能になっています。
一方のSassはコンパイルを経てCSSに変換するのでブラウザは関与せず、JavaScriptなどで操作・選択することはできません。
この「コーディングやソースコード管理の手間を省きつつ、JavaScriptなどでスタイルを操作できるというCSSのメリットを損なっていないこと」も、CSS変数のメリットだと言えます。
以下は、CSS変数の基本的な使い方についての解説です。
まず、CSS変数を定義するには以下のように「–」ハイフン2つを先頭につけます。
以下の「:root」とはグローバル変数のことであり、「宣言するとあらゆるところで使用」できます。
:root { --red: #e60033; }
上記の「–red」が変数名に該当し、好きな名前をつけることができます。
CSS変数を呼び出すには、「var(変数名)」を使用します。
.cont_wrap { background-color: var(--red); }
このとき、何らかの理由で変数が使えなくなった場合に備えてフォールバック関数(予備の関数)を設定しておくと便利です。
.cont_wrap { background-color: var(--red,red); }
CSS変数の中で変数を使用し、よりコード管理を簡単にできます。
:root { --box-top: 150px; --box-bottom: 30px; --box-padding: var(--box-top) var(--box-bottom); } .box { padding: var(--box-padding); }
通常のCSSの値と同様、CSS変数は継承されます。
以下のようにある要素の親要素に適用させたCSS変数はその子要素にも適用されます。
<div class="cont_wrap"> <p>aaaaaa </p> <div class="text_one"> <p>bbbbbb</p> </div> <div class="text_two"> <p>cccccc</p> </div> <div class="text_three"> <p>dddddd</p> </div> </div>
:root { --main-color: blue; } .cont_wrap p { color: var(--text-color); }
この場合、class=”text_one”からclass=”text_three”まで、親要素「class=”cont_wrap”」の値を継承します。
先に述べたようにCSS変数はSassのようなプリプロセッサの変数では不可能な、JavaScriptでの操作やメディアクエリ内での使用が可能です。
CSSに変換されるプリプロセッサの変数とは異なり、CSS変数はブラウザの可変幅にも対応できます。
そのため以下のようにメディアクエリ内で変数を定義し、特定の画面幅以下でそれを適用させることが可能です。
:root { --background: red; } @media (max-width: 600px) { :root { --background: blue; } } body { background: var(--background); }
上記の書き方では画面幅が600px以上で背景色が赤く、画面幅が600px以下になったときに背景色が青くなるようになっています。
ブラウザで動的に実行するCSS変数は、以下のようにJavaScriptで操作することが可能です。
.sidebar { --left: 100px; }
以下は上記の値を所得するコードです。
const sidebarElement = document.querySelector('.sidebar'); const cssStyles = getComputedStyle(sidebarElement); const cssVal = String(cssStyles.getPropertyValue('--left')).trim(); console.log(cssVal);
CSS変数の値をJavaScriptで変更する場合は、以下のようにします。
document.documentElement.style.setProperty('--left ', '50px');
コード管理に便利なCSS変数ですが、使用時にはいくつかの注意点があります。
CSSのプロパティ名を変数にはできません。
例えば「background-color」という、背景色を指定するCSSプロパティを使っている以下のコードは無効になります。
body { --background: background-color; var(--background): blue; }
CSS変数を呼び出す際、「var(–変数名) 」の後に px や % を書き足しても無効化されます。
:root{ --mar: 50; } wrap{ margin: var(--mar)px; }
この場合だと「margin:50px;」と指定できず、エラーが生じてしまうので、CSS変数内に「–mar: 50px;」と単位も含めておく必要があります。
また、calc関数内で単位を含めることは可能です。
:root{ --mar: 50; } wrap { margin: calc(var(--mar) + 1px); }
上記の例だと、calc関数を使って「–mar」変数内の50に1pxを掛けているので、50pxと指定できます。
CSS変数では、大文字と小文字が明確に区別されます。
例えば「–fr」と「–FR」は別の変数としてみなされるので、これらを使う場合は以下のようにします。
:root { --fr: red; --FR: blue; }
これらは別々に扱われるので、var(–fr); では赤、var(–FR); では青が適用されます。
CSS変数の対応ブラウザはChrome, Firefox, Safari, Edgeなどであり、今後CSS変数が使われる機会が増えてくるかも知れません。
また、CSS変数に頼りすぎてCSSが複雑になり、却って管理が大変になってしまわないよう、上手にCSSを管理することが大切です。