CSS WEB制作

CSS★CSS変数で色の管理を楽にする!

投稿日:

プログラミングでは「変数」ってよく使いますが、CSSでも使えるようになってました!サイト制作では、CSSがドンドン長くなって、あとで修正するのが大変になりますよね。特に、色を変える時は、ひとつずつカラーコードを書き換えなくちゃいけないので、大変な手間と労力です。変数を使って色を管理できると、同じような色を複数生み出すことが避けれるし、色の管理がすごーくラクになります。

CSS変数とは

正式には「カスケード変数のためのCSSカスタムプロパティ(CSS custom properties for cascading variables)」ですが、簡単に「CSSカスタムプロパティ」や「CSS変数」などとも呼ばれています。

プログラミングでいう「変数」とは、数値や文字列などを入れておく箱のようなものです。箱は何度でも繰り返し利用でき、箱の中味が変わると箱を設置した他の箇所も全部変更されます。

その仕組みがCSSでも使えるようになりました。
最初に変数を定義しておけば、定義の中身だけ変更すれば、いちいち全てのコードを修正する必要はなくなり、メンテナンスが格段にしやすくなります。エラーも減ります。

使い方

変数を定義します。
CSSの各セレクタ内に記述することもできますが、メンテナンスの効率を高めるには「 :root 」として、CSSの始めに記述しておきます。

変数の宣言には「–(半角英数)」から始め、続いて「変数」の名前(好きな名前でOK)を書きます。コロンで区切って変数の値を記述します。

--main-color: #000;
  (変数名) (値)

変数の値には、カラーコードの他に、単位のついて数値や文字列も設定できます。

実装してみる

:root {
  --color-main: #e63b7a;
  --color-main-cont: #ffffff;
  --color-main-rgb: 230, 59, 122;
}

カラーコードを定義する場合、カラーコードとそのrgb値も定義しておくと、半透明の設定の時に便利です。
例えば「背景色だけを半透明にして、その他の文字や画像はそのままにしたい」ようなとき、「opacity」プロパティを使うと、その要素は文字も含めてすべてが半透明になってしまいます。文字だけ不透明にはならないのです。それを避けるために、色を rgba で指定するととで「背景は半透明・文字は半透明にならない」ことが実現できます。毎回 rgb を調べるのは面倒なので、始めに変数化しておくと管理しやすくなります。

定義したCSS変数を呼び出す

使いたい箇所で var(–変数名) と記述すると、定義した値をあてはめることができます。

//呼び出し方法

color: var(--color-main);
// CSSの始めに定義を記述

:root {
  --color-main: #e63b7a;
  --color-main-cont: #ffffff;
  --color-main-rgb: 230, 59, 122;
}

.box {
 width: 300px;
 height:100px;
 color: var(--color-main);
}

上の例だと、.box という要素の文字色が「#e63b7a」になります。

button.primary {
  background: rgba(var(color-main-rgb), 0.8); // 不透明度80%
  color: var(--color-main-cont);
}

注意点

  • SassやLESSなどのCSSプリプロセッサーの変数はCSSに変換されるため、メディアクエリー内で変数の定義ができません。
  • 大文字と小文字は区別される。例えば「–bg」と「–BG」は別のCSS変数とみなされます。
:root {
  --bg: pink;
  --BG: orange;
}

これらは別のカスタムプロパティなので、var(--bg); とすればピンクが、var(--BG); とすればオレンジが適用されます。

  • 呼び出す時に、後ろに単位を書き足しても無効となる。数値の変数を定義し、呼び出す時 var(--変数名) の後ろに px や % を書き足しても無効となります。
//失敗例

:root {
  --spacer: 30;
}

div {
  margin: var(--spacer)px;
}

上の例では、margin: 30px; にはなりません。
CSS変数に「 –spacer: 30px; 」として単位も含める必要があります。

//正しい例

:root {
  --spacer: 30px;
}

div {
  margin: var(--spacer);
}

calc() 関数を使って単位を含める方法もあります。

//calcを使って単位を含めた例

:root {
  --spacer: 30;
}

div {
  margin: calc(var(--spacer) * 1px);
}

IE以外のモダンブラウザーには対応しているので、CSS変数を使う機会は増えそうです(^_^)

参照したサイト:
https://www.webcreatorbox.com/tech/css-variables
https://zenn.dev/rdlabo/articles/1e80620bf432e4eb09f6

本サイトの内容に誤りや不正確な記述がある場合やサンプルに基づくいかなる結果も一切の責任を負いかねますので、あらかじめご了承ください。

-CSS, WEB制作

執筆者:

関連記事

CSS★全ての要素にBorder-boxを適用する

仕上がりイメージからレイアウトをコーディングするとき、マージンやボーダーなど横幅の計算がややこしくて手こずっていました(涙) そんな悩みを解消してくれるありがた〜いセレクタ「box-sising」! …

フロート解除★clearfixの使い方

フロート解除の指定方法 <CSS> .clearfix:after { content:” “; display:block; clear:both; }   <HTML> <div …

CSS★span要素内のテキストを上下中央に配置する

ナビ項目の文字の後ろに「▼」をつけたのですが、そのままだと、文字よりも「▼」のほうが大きく見えてしまい、文字よりも「▼」が目立ってしまった(汗) それを解消するために「span」で「▼」だけフォントサ …

レスポンシブサイト★ウインドウサイズにあわせて画像を拡大縮小させる

レスポンシブサイトでの画像のリサイズ問題   ウインドウサイズに合わせて、画像を拡大縮小させる方法。 CSSだけで解決できます。     <css>  img{ width:100%; max-wid …

CSS★長いURLが改行されないではみ出してしまうときの対処法

サイトの表示テストを行っていて、指摘を受けたので調べてみました。 Macではこの現象がでなかったから気付かなかった。。。 長いURLはどうして自動改行されないの? WEBページの文章は、画面の端やボッ …

サイト制作・グラフィック制作をしているデザイナーです。制作で躓いたことの備忘録としてこのブログを始めました。
たくさんの検索結果から、実際に何度も何度も自分で試してみて、自分に合うなと思った方法やうまくいった方法をこのブログに書き留めています。
プログラム関係のことはもっぱらコピペ派。
自分でゴリゴリ書くことはできません。。。プログラムが分かる人がうらやましいです。
そんな私でもなんとかサイト制作ができるのはグーグル先生と貴重な情報をおしげもなく公開してくださっているたくさんの方々のおかげ。
有志のみなさまに日々感謝しつつ制作させていただいています。