閉じる

CSSで変数を使う方法【サンプルコード付き】(初心者向け)

CSS変数を初心者の方向けに紹介。 CSS変数とは?変数の基礎知識にプラスし、変数の記述方法、呼び出し方、注意点、変数を使用する具体的な場面など細かく解説。サンプルコードが付いているので、実際に手を動かして学ぶことができます。

カテゴリ: HTML/CSS

こんにちは!
最近、WEB制作の勉強をして少したったけど、 「CSS変数って何・・?」
「どんな場面で変数を使うの・・?」「CSSで変数を使用してみたい・・」
そんな風に考えている、初心者WEB製作者の方も多いのではないでしょうか?

今回は、初心者WEB制作者の方向けに「変数の意味」「CSS変数の使い方」「CSSで変数を使用する時の注意点」を中心に解説します。

変数とは

変数とは、数字や文字を格納しておく箱の様なものです。

一度定義した変数は、何度でも使いまわす事ができ、変数の中身(箱)を変えれば、変数を使用した箇所に変更が反映するので修正の手間を削減することができます。
例えばカラー「#ffffff」を変数を使用し「A」という箱に格納します。
「#fffff」を適用した箇所が複数あり、もし「#ff953a」にカラー変更したい場合は、変数「A」の中身を変更する事だけですみます。
指定箇所が多ければ多いほど、変数で指定しておいた方が、変数だけを修正すれば良いので、後からの変更に効率的に対応できます。

CSS変数の記述方法

CSS変数の記述方法は、グローバル変数、ーー変数名、値となります。
実際に記述していきます。

※解説
:root→グローバル変数(宣言する事であらゆるところで使用できる変数)
––red→変数名(変数は決まっていないので、好きな変数名を使用してよい)
#ff0000→値
変数は色だけでなく、単位のついた数値や文字列なども設定できます。

変数指定例

CSS変数の呼び出し方

サンプルコード表示結果

サンプルコード表示結果↓
文字

HTMLサンプルコード

CSSサンプルコード

※解説
使用したい箇所でvar(––変数名)と記述し呼び出しをおこないます。
変数で定義された文字色が適用されています。

後から変数の変更

例えば後から、#0000FFにしたい場合は、

サンプルコード表示結果↓
文字

※解説
変数を変えるだけで#0000FFに変更する事ができています。 記述が多い時は、変数だけ変えれば良いので、効率的です。

フォールバック値のセット

予備となる値(フォールバック値)をセットしておく事ができます。
フォールバック値とは、何か不具合が起き、変数が消えてしまった場合などの為に、予備の値をセットしておく事ができます。
指定の仕方は、var(––color, フォールバック値)
下記サンプルコード例で言うと、#0000FF(––color)が適用されなかった場合に、blueが適用されることになります。

フォールバック値サンプルコード

変数の中で変数を使用する

変数の中に変数を入れて使用する事ができます。

サンプルコード表示結果

サンプルコード表示結果↓
上に100px、下に50px

HTMLサンプルコード

CSSサンプルコード

※解説
まず最初に––sample-margin-topを定義、次に––marginsample-margin-bottomを定義し、変数で指定。
変数の中で––sample-margin-top、––marginsample-margin-bottomを使用し、結果、変数––sample-marginで上に100px、下に50pxのmarginが定義されます。

CSS変数の注意点

大文字と小文字

変数を定義する際、大文字、小文字は別物として扱われます。
下記サンプルコード例では「color-1」は、#0000FFが指定され。「COLOR-1」は、#008000が指定されます。

大文字、小文字サンプルコード

プロパティ名を変数にできない

変数にはプロパティ名を指定することはできません。
下記のように「color」プロパティを変数に入れても、「color: red;」の指定をする事ができません。

変数にプロパティ名を入れたサンプルコード

呼び出す時の単位を書き足さない

変数を定義する際は値に単位も入れてください。

①例えば下記の例では、50pxの指定が行えません。

②下記の例では50pxの指定をする事ができます。

①と②の違いは、定義の際にpxという単位まで含めたかと、pxを書き足したかになります。単位まで含めて変数を指定しないと適用されないので注意してください。

Sassではない理由

CSSの変数ならSassで良いのではないか?そのように思われている方もいるかもしれません。
Sassでない理由は、Sassは、メディアクエリ内で変数を定義できないからです。
メディアクエリ内で変数を定義したい方は、CSS変数を使うことでメディアクリエ内でも変数を使用する事ができます。
今回は初心者向けのためSassについて詳しく解説しませんが、気になる方は下記を参照にしてみて下さい。
https://www.pc-koubou.jp/magazine/22447

変数を定義をする便利な場面

ここからは、変数を定義すると便利な場面について紹介していきます。

色は白色と、色1つとっても細かく種類は多いです。
また指定するたびに、微妙に違う色になってしまったり、調べなおす、作成後の変更といった場合もあるので作成するwebサイトでよく使用する色を変数に登録しておくと便利です。

色の変数登録例

左右の余白

WEBサイトを制作する上で、左端からスタートする例は少ないです。

必ず少しの余白からスタートし、余白をどのページでも揃えることが多いです。 そのため余白の値を変数に登録しておくと便利です。

メディアクリエが簡単

前述した通り、Sassではメディアクエリ内で変数を定義できないため、メディアクリエ内での、変数が使用できる、CSS変数は便利です。

メディアクリエでの登録例

まとめ

今回は、初心者WEB制作者の方向けに「変数の意味」「CSS変数の使い方」「CSSで変数を使用する時の注意点」を中心に解説してきました。

最後にポイントをまとめます。

変数とは、「数字や単語を入れておく箱」の様なもので、一度定義した変数は、何度でも使いまわす事ができ、変数の中身を変えれば、変数を使用した箇所に変更が反映するので修正の手間を削減することができます。

1.CSS変数の記述方法
:root { 
––変数名: 値;
}

2.CSS変数の呼び出し方法
.sample {
var (––変数名)
}

3.CSS変数の注意点
・大文字と小文字に注意する。
 変数を定義する際、大文字、小文字は別物として扱われます。

・プロパティ名を変数にできない
 変数にはプロパティ名を指定することはできません。

・呼び出す時の単位を書き足さない
 変数を定義する際は値に単位も入れてください。

4.変数を定義をする便利な場面
・色
・左右の余白
・メディアクエリ内

いかがだったでしょうか?
変数を使用することで作業効率の改善につながる場面があります。
これを機会に使用してみて下さい。

最後までお読みいただきましてありがとうございます。ご意見・ご要望などございましたら、
以下のフォームよりお問い合わせを受けつけておりますので、よろしければご利用ください。

この記事がお役に立ちましたら、"いいね!"をお願いします
minwebの最新情報をお届けします

minweb編集部(株)セルリア

”共に考え、共に創るWebの成功戦略”というスローガンのもと、お客様と一からWeb戦略を考え、
企画し実装まで支援する伴走型Webコンサルティング会社です。

こちらの記事をお読みのかたにおすすめ!完全無料のダウンロード資料

Googleサーチコンソール使い倒し活用術  <AOHON>

ダウンロード資料画像

Googleの検索エンジンに関する情報を幅広く確認できるツール「Googleサーチコンソール」の活用方法をまとめました。新サーチコンソールの機能を網羅的に紹介するだけでなく、Webサイトを最適化できる実践的な方法までわかりやすく解説します。

サーチコンソール初心者の方が知りたい導入方法から、上級者向けのコンテンツ改善の方法まで、押さえておきたい要素を1つに集めた、SEOに力を入れたいすべてのWeb担当者におすすめの一冊です。