CSSでは、色はすべて直接値を記述するしかない点が不便

ベース色から相対的に変化させたい

ベース色から相対的に変化させたい

CSSで色を指定するときには、「#ccffcc」や「blue」などのように、望みの色を直接記述するしかありません。しかし、配色を考えるときには、「親ボックスよりも少し明るい色の子ボックス」のように、相対的に色を指定したいこともあるでしょう。


 
CSSでは直接色の値を書くしかない

CSSでは直接色の値を書くしかない

CSSでは、親ボックスの色も、子ボックスの色も、個別に色を直接記述することでしか指定できません。例えば「#ccffcc」よりも少し暗くしたいなら「#aaccaa」、「#cc0000」よりも少し明るくしたいなら「#ff3333」のようにです。

この状態で配色を変更したいと思ったとき、親ボックスの色を変更すると、当然、子ボックスの色もすべて手動で修正しなければなりません。


 

色を相対的な値(ベースの色からの変化量)で指定できると便利

色を相対的に指定できると便利

色を相対的に指定できると便利

もし色の指定が、相対的な値(変化量)で記述できると便利です。例えば、親ボックスの色を「#cc0000」としたとき、子ボックスの色を「親ボックスの色よりも20%明るい色」のように指定できれば、親ボックスの色を修正するだけで、子ボックスの色が自動で変化します。

配色を変更したい場合、基準となる色(親ボックスの色など)1つを修正するだけで、他の「相対的に指定されている」すべての色が適切に変化することになります。


 
LESSを使うと、色を相対的に指定できる

LESSなら色を相対的に指定可能

CSSには、このような「ある色を基準にして相対的に色を変化」させる記述方法はありません。しかし、「LESS」というCSSメタ言語を使うと、「lighten(@basecolor, 20%);」などように記述することで、「ベースの色」から相対的に変化させた色を指定することができます。


 
この方法を使えば、下図のように「ベースの色」1つを修正するだけで、他の箇所の配色が自動的に変わるようになります。うまく活用すれば、デザインの試行錯誤や配色のリニューアル作業が楽になるでしょう。

「ベースの色」1つを変化させるだけで、他の部分の配色も自動的に変わる

「ベースの色」1つを変化させるだけで、他の部分の配色も自動的に変わる


CSSメタ言語LESSなら、ベース色からの相対的な変化量で色を指定できる

記事「CSSを効率的に記述できるメタ言語「LESS」の使い方」で解説した、CSSメタ言語「LESS」を使うと、例えばベースの色( @basecolor )に対して、lighten関数を使って明るくする割合を指定したり、darken関数を使って暗くする割合を指定したりできます。
20%明るくする: lighten(@basecolor, 20%);
30%暗くする : darken(@basecolor, 30%);

橙色をベースにLESSで変化させた例

橙色をベースにLESSで変化させた例

例えば、ベースの色を橙色「#ffa000」として、それを元に明るさ(明度)を変化させて、
  • h1要素には、ベース色をそのまま、
  • div要素には、ベース色より20%明るい色を、
  • p要素には、ベース色より30%暗い色を、
それぞれ文字色として指定したい場合は、以下のようにソースを記述できます。
@basecolor: #ffa000;  /* ベースの色を変数に格納 */
h1  { color: @basecolor; }   /* 変数そのまま */
div { color: lighten(@basecolor, 20%); } /* 20%明るく */
p   { color: darken(@basecolor, 30%);  } /* 30%暗く */

先と同様の配色をCSSで書いた場合

CSSだと色を直接記述するしかない

上記のLESSソースは、以下のようにCSSソースを記述した場合と、まったく同じ効果になります。
  • h1要素には、ベースの橙色(#ffa000)を、
  • div要素には、20%明るい「#ffc666」を、
  • p要素には、30%暗い「#664000」を
それぞれ指定したことになります。
h1  { color: #ffa000; } /* ベースの色そのまま */
div { color: #664000; } /* #ffa000より30%暗い */
p   { color: #ffc666; } /* #ffa000より20%明るい */

記述量では、前者のLESSよりも後者のCSSの方が少なくて済みますが、配色の試行錯誤のしやすさや、メンテナンスのしやすさでは、前者のLESSの方が便利です。「ベースの色」1つを修正するだけで、相対的に指定されている全ての箇所の色を変化させられますから。

なお、変数名は自由に付けられるため、色の役割が分かりやすくなるメリットもあります。例えば、変数名が「@base-back-color」であれば「ベースにする背景色なのだろう」と推測できますし、変数名が「@sidebar-border-color」であれば「サイドバーの枠線の色なのだろう」と推測ができます。それによって、ソースの意味が分かりやすくなるでしょう。

明るさ(明度)のほか、彩度や色相の変化も相対的に指定できる

彩度や色相も、相対的に変化させられる

彩度や色相も、相対的に変化させられる

単純に「明るさ」を変化させるだけなら、自力で計算することで値を求めることもできます。しかし、右図のように「彩度」だけを変化させたい場合や、「色相」を変化させたい場合となると、自力で計算するのは若干大変です。

そんな「彩度」や「色相」の相対的な変化も、LESSなら専用の関数を使って簡単に実現できます。


 
次のページでは、LESSを使って彩度や色相を変化させる方法をご紹介致します。