大阪府堺市のWEB制作(ホームページ制作)事務所です

[CSS]CSSで変数を使おう

最終更新日:2022.05.23 [月] 公開日:2018.05.21 [月] カテゴリー:html・CSS・jQuery・JS備忘

CSSで変数が使えたら、とても便利です。

わかりやすい例えで言うと、背景色とか、アクセントカラーとか一気に変えられる!!ブラウザ状況的にまだ微妙なものもあるみたいですが、簡単な範囲でまとめてみます。


変数を設定する方法

:root{
--border-set: 5px solid #0000ff;
}
仕組みとして上の図のようになっています。

こんな感じで設定するようですね。
変数名の名前の付け方は、必ず頭に「--」ハイフンを2つつけること。
あとは、任意で好きな名前を付けられます(大文字小文字は区別するので気をつける)。

設定した変数を使いまわしてみよう!

p{
border: var(--border-set);
}

こんな感じで、varの中に先ほど設定した変数を入れることで、使用できるのです!!
実際この方法で指定したので、今見ているページの全体枠に青色の5pxのボーダーが付いていると思います。

今回は試しに「5px solid #0000ff」を全部一つの変数にしましたが、
5px・solid・#0000ff、全部バラバラに変数にしても良いかと思います。

変数の注意点【重要】

  • 変数名の大文字小文字を区別するので気をつける
  • 変数にたとえば50とかを入れて、実際使い回す時、変数名にあとからpxとかを足すのはNG
    ex) margin-bottom:var(--size1) px; ・・・と言うように変数の後ろに単位をつけても無効
    どうしても後から単位をつけたいなら・・・
    margin-bottom:calc( var(--size1) * 1px);というcalcファンクションで1をかけてしまうという裏技(?)。
  • 変数はプロパティ名には使用できない。

で、気になるのがブラウザ対応

https://caniuse.com/#search=CSS%20Variables

最新のものは大体対応しています。が、IEは未対応・・・


スポンサーリンク

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA