CSSで色を直接書かず、変化量で相対的に指定する方法

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

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

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

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

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

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

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

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

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

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

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

20％明るくする：　lighten(@basecolor, 20%);
30％暗くする　：　darken(@basecolor, 30%);

例えば、ベースの色を橙色「#ffa000」として、それを元に明るさ（明度）を変化させて、

• h1要素には、ベース色をそのまま、
• div要素には、ベース色より20％明るい色を、
• p要素には、ベース色より30％暗い色を、

それぞれ文字色として指定したい場合は、以下のようにソースを記述できます。

@basecolor: #ffa000;  /* ベースの色を変数に格納 */
h1  { color: @basecolor; }   /* 変数そのまま */
div { color: lighten(@basecolor, 20%); } /* 20%明るく */
p   { color: darken(@basecolor, 30%);  } /* 30%暗く */

上記の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を使って彩度や色相を変化させる方法をご紹介致します。