2/3 CSSで色を直接書かず、変化量で相対的に指定する方法 [ホームページ作成] All About

CSSメタ言語「LESS」では、前のページでご紹介した「明度」（明るさ）のほかに、「彩度」（鮮やかさ）や「色相」（色合い）も、専用の関数を使って相対的に変化させられます。

LESSで彩度を変化させる関数：「saturate」・「desaturate」

LESSを使うと、例えばベースの色（ @base ）に対して、saturate関数を使って「彩度を高くする割合」を指定したり、desaturate関数を使って「彩度を低くする割合」を指定したりできます。

彩度を30％高くする：　saturate(@base, 30%);
彩度を20％低くする：　desaturate(@base, 20%);

ベース色から彩度を相対的に変化

例えば、ベースの色を「#cc4422」（右図参照）として、それを元に彩度を変化させて、

h1要素には、ベース色をそのまま、
div要素には、彩度を30％増加させた色を、
p要素には、彩度を20％減少させた色を

それぞれ指定したい場合は、以下のように記述できます。

@base: #cc4422; /* ベースの色を変数に格納 */
h1  { color: @base; } /* 変数をそのまま */
div { color: saturate(@base, 30%); } /* 彩度を30％高く */
p   { color: desaturate(@base, 20%); } /* 彩度を20％低く */

上記のLESSソースは、以下のようにCSSソースを記述した場合と同様の効果があります。

h1  { color: #cc4422; } /* ベースの色そのまま */
div { color: #ee3000; } /* 彩度が30％高い */
p   { color: #b4523a; } /* 彩度が20％低い */

LESSで色相を変化させる関数：「spin」

LESSには、色相を変化させる関数「spin」も用意されています。値に「正の値」や「負の値」を指定することで、色相を自由に変化させられます。例えばベースの色（ @bcolor ）に対して、spin関数を使って色相を変化させるには、以下のように記述します。

色相を10度大きくする：　spin(@bcolor, 10);
色相を20度小さくする：　spin(@bcolor, -20);

ベース色から色相を相対的に変化

例えば、ベースの色を「#cc4422」（右図参照）として、それを元に色相を変化させて、

h1要素には、ベース色をそのまま、
div要素には、色相を＋90度変化させた色を、
p要素には、色相を－90度変化させた色を

それぞれ指定したい場合は、以下のように記述できます。

@bcolor: #cc4422; /* ベースの色を変数に格納 */
h1  { color: @bcolor; } /* 変数をそのまま */
div { color: spin(@bcolor, 90); }  /* 色相を＋90度変化 */
p   { color: spin(@bcolor, -90); } /* 色相を－90度変化 */

上記のLESSソースは、以下のようにCSSソースを記述した場合と同様の効果があります。

h1  { color: #cc4422; } /* ベースの色そのまま */
div { color: #55cc22; } /* 色相を＋90度変化 */
p   { color: #9922cc; } /* 色相を－90度変化 */

「#cc0000」の色相を90度ずらすと「#66cc00」になり、180度ずらすと「#00cccc」になります。これくらいならそこそこ簡単に分かりますが、「#9255b8」の色相を90度ずらすと「#b86055」になり、180度ずらすと「#7bb855」になるというのは、そう簡単には分からないでしょう。このように、自力で計算すると難しい配色も、簡単に指定することができます。

配色をできるだけ「相対的な値」で指定しておく

前ページでご紹介した明るさ（明度）を変化させる関数と、上記でご紹介した彩度・色相を変化させる関数をうまく活用できれば、ウェブサイトのベースカラーを1つ決めておくだけで、あとの配色は全部「ベースカラーを基準にした相対的な記述」にできるかも知れません。そうすると、配色の試行錯誤も、「変化量の値」を書き換えるだけで済みますし、ウェブサイト全体のデザインを変更したい場合でも、ベースカラーを修正するだけで済み、ずいぶん省力化ができるでしょう。

実際に全部を相対的な指定で作るのは難しいかもしれませんが、部分的に活用するだけでも便利です。