変数を初心者目線で総まとめ【CSS】

CSSでも変数が使えることを知ってましたか？

使用頻度はそんなに高くないかと思いますが、プログラミング全般に通じる知っておいて損はない項目の一つであることは間違いないですね。

ということで、ほんの基本だけ、まとめてみましたので是非参考にしてください。

[rtoc_mokuji title=”Contents” title_display=”left” heading=”h4″ list_h2_type=”round” list_h3_type=”round” display=”close” frame_design=”frame4″ animation=”slide”]

CSS変数を初心者レベルで総まとめ

基本的な書き方

CSSにおける変数の基本的な書き方は次のようになります。

以上なので簡単ですね。

これにならって、全体としての具体的な記述をしてみると以下のようになります。

上記CSSの記述を紐解いて説明すると、

• 「–fooColor」は「 pink」である

と変数宣言して、それ以降は、

• 「var(–fooColor)」と呼び出せば「pink」のスタイルが当たる

という仕組みを作った形になっています。

理由は簡単です。

例えば、上記のCSSの例にある関数宣言のpinkをblueに変えるだけで、文字色のcolorもborder-leftの色も、両方ともblueのスタイルを当てることができるからです。

コードが多くなったときには、このように関数内の1箇所だけ変更すれば、他は一括して変更ができるようになりますね。

手間も減りますし、修正漏れのミスなども防げます。

初期値

初期値の設定についてみていきましょう。

関数で呼び出したものの、実際は宣言がなかった場合にも、きちんとスタイルが当たるように、あらかじめ呼び出し側の変数内に初期値を設定しておくことができます。

上記の例に当てはめると、

具体例は以下のとおりです。

継承

次は継承について説明します。

そもそもですが、変数は宣言したブロック内でのみ有効です。

その他の要素があれば、それらにはh1で指定した変数は効きません。

ただし、変数は子要素に継承します。

この性質を利用すれば、親要素に一つ変数を指定しておけば、子要素の全てに変数を効かせる事ができます。

具体的に見てみましょう。

詳細度・カスケード・継承【CSSの基本ノート 】

CSSを学んでいて、何となく後回しにして、そうこうするうちに無意識に避けてしまいがちになる詳細度、カスケード、継承の考え方。 いずれも概念的な色合いが強いものばかりであまり面白くもない勉強ですが、「思ったとおりにCSSが反映されない」などと...

www.fuwafuwa-af.com

豆知識「:root」（擬似クラス）

特定の文書全体で関数を効かせたい場合は、htmlに擬似クラスのセレクター「:root」を指定すればOKです。

:root {
  --fooColor: pink;
}

h1 {
  color: var(--fooColor);
  border-left: 3px solid var(--fooColor, blue);
}

p {
  color: var(--fooColor);
}

CSS変数の色々

CSS変数は便利ではありますが、実はいくつかの制約があります。

プロパティの変数は無効

例えば、上記でみてきたように、変数はcolorプロパティの「値に」設定してきましたが、プロパティには変数設定ができません。

例えば、以下のような変数は無効です。

:root {
  --fooColor: pink;
  --fooProperty: color;
}

h1 {
  var(--fooProperty): var(--fooColor);
  border-left: 3px solid var(--fooColor, blue);
}

p {
  color: var(--fooColor);
}

単位を伴う変数設定

また、単位を伴うプロパティに変数を設定するときには、宣言する方に単位を入れなければなりません。

呼び出す方に単位を付けても無効になるので注意しましょう。

具体的には以下のとおりです。

例えば、margin設定で変数を使う場合の例で見てみましょう。

:root {
  --fooColor: pink;
  --fooMarginLeft: 16;
}

h1 {
  color: var(--fooColor);
  border-left: 3px solid var(--fooColor, blue);
  margin-left: var(--fooMarginLeft)px;
}

p {
  color: var(--fooColor);
}

CSSの変数ルールではこの記述だと無効です。

正しくは、

という記述方法が求められます。

Tips/小技

ただ、コーディング方法には唯一絶対という記述はなくて、同じスタイルを当てるにも色々な記述方法がありますので、柔軟に捉えることも重要です。

例えば上記の例の場合、以下のように書き直せば狙ったスタイルを当てる事ができます。

:root {
  --fooColor: pink;
  --fooMarginLeft: 16;
}

h1 {
  color: var(--fooColor);
  border-left: 3px solid var(--fooColor, blue);
  margin-left: calc(var(--fooMarginLeft) * 1px);
}

p {
  color: var(--fooColor);
}

色表現の調整に使ってみる

少し実践的な例を見てみましょう。

以下のように、色表現をHSLで設定するときに、変数を使って全体の色相を固定し、彩度と明度を微妙にずらして表現していたとします。

こうすれば、以後は、変数の中身を変えるだけで全体の色相感を変えて色表現の変更ができますね。

変数の中身を200にした場合は以下のとおりです。

300にしてみます。

また、例えばクリックボタンなど、他の箇所よりも目立たせたい場合などには、全体の色相を基準にして、そこだけ数値を増していけば統一感を維持したまま目立たせることができます。

色相環は360度で表現されるので、対局の色相値にするとコントラストが際立ちます。

つまり180をプラスすればよいことになりますね。

その場合、単位が異なる数値でも計算ができる「calc」を使えばOKです。

.btnの色相だけ数値を180プラスしてみた場合は以下のとおりです。

思いどおりの色表現に落ち着かせるために、変数を使って微調整をするのに大変効率的です。

【CSS初心者】色の表現方法をまとめてみた

CSSを学んでいて、レイアウトの組み方は見えてきたものの、なぜだかいい感じに仕上がらないと悩んでいる方。 一度ここで色の表現方法を総復習してみませんか。 【CSS初心者】色の表現方法をまとめてみた 基本 まずは単純に色キーワードを使った表現...

www.fuwafuwa-af.com

まとめ

以上、CSSにおける変数の基本を一通り見てきました。

HTMLとCSS程度しか触れたことのない方にはややとっつきにくかったかもしれませんが、基本的な考え方さえ理解できればとても簡単なロジックでできていますので、何度が振り返っているうちにすぐに慣れると思います。

この先、プログラミングで関数などに触れることなども視野に入れると、是非この辺りはおさえておいて無駄にはなりません。

皆さんのお役に立てれば幸いです。

自宅で学べるオンラインスタイルの「TECH CAMP」で無料カウンセリングやってます！

併せて読みたい

» プログラミング関連記事

» ワードプレス関連記事