透明度も変化量で指定できる

LESSでは、明度・彩度・色相だけでなく、透明度も変化量で指定できます。例えばベースの色(@basec)に対して、fadein関数を使って透明度を減らしたり、fadeout関数を使って透明度を増やしたりできます。
透明度を10%減らす: fadein(@basec, 10%);
透明度を30%増やす: fadeout(@basec, 30%);

ベースの色から透明度を増減

ベースの色から透明度を増減

例えばベースの色を、最初から50%の透明度が付加されている濃い赤色「rgba(204, 68, 34, 0.5)」として(右図参照)、その色を元にして、
  • div要素には、透明度を20%減らした色を、
  • p要素には、透明度を15%増やした色を
それぞれ指定したい場合は、以下のように記述できます。
@basergba: rgba(204, 68, 34, 0.5);
div { color: fadein(@basergba, 20%); }
p   { color: fadeout(@basergba, 15%); }
※「rgba( R, G, B, A )」は、CSSでの透明度を含めた色の指定方法です。赤(R)・緑(G)・青(B)の3つは0~255の値で指定し、透明度(A)は0~1の範囲で小数で指定します。0が完全に透明で、1が完全に不透明です。0.5なら、ちょうど半透明になります。

上記のLESSソースは、以下のようにCSSを記述した場合と同様の効果があります。
div { color: rgba(204, 68, 34, 0.7); } /* 透明度を20%減少 */
p   { color: rgba(204, 68, 34, 0.35); } /* 透明度を15%増加 */

透明度の指定は、CSSに元々ある「opacityプロパティ」でも指定可能です。ですから、単純に透明度を付加させるだけが目的なら、ここでの透明度の指定は、それほどのメリットはないかもしれません。上記のサンプルのように、ベースの色に最初から透明度が指定されているときに、さらに透明度を増減させたい場合に有効です。

※透明度を指定するopacityプロパティや、透明度(アルファチャンネル)を付加した色(RGBA色)の指定方法に関しては、記事「IE9を含む代表的なブラウザで使えるCSS3プロパティ」の3ページ目でも例と共に紹介しています。併せてご参照下さい。

色の足し算・引き算

2つの色を足したり引いたりできる

2つの色を足したり引いたりできる

LESSでは、2つの色を足したり引いたりして混ぜることで、新たに色を作ることもできます。

右図のように、「#ff8080」という色(A)と、「#556622」という色(B)があるとき、
  • AとBを足した色をdiv要素に指定し、
  • AからBを引いた色をp要素に指定指定する
には、以下のようにソースを記述します。
@basecolor1: #ff8080;    /* ←変数を定義 */
@basecolor2: #556622;    /* ←変数を定義 */
div { color: @basecolor1 + @basecolor2; } /* 足す */
p   { color: @basecolor1 - @basecolor2; } /* 引く */

この場合の計算は、赤(R)・緑(G)・青(B)のそれぞれの色の値に対して、個別に足し算・引き算が行われます。例えば「#ff8080」に「#556622」を足す場合は、赤が「ff+55」で(素直に足せば154ですが、色の最大値はffなので)「ff」になり、緑が「80+66」で「e6」になり、青が「80+22」で「a2」になります。

色を「変化量の割合」で相対的に指定できると便利

今回は、ベースの色からの変化量で「相対的に色を指定する方法」として、CSSメタ言語「LESS」を活用する方法をご紹介致しました。配色の試行錯誤にとても便利ですから、ぜひ活用してみて下さい。

なお、LESSに関して詳しくは、記事「CSSを効率的に記述できるメタ言語「LESS」の使い方」で解説していますので、ご参照下さい。色の指定以外にも、既存のCSSではできない様々な便利な仕様があります。




■容量たっぷり20GB、国内通話5分無料も付いて、2970円(税込)



※記事内容は執筆時点のものです。最新の内容をご確認ください。
※OSやアプリ、ソフトのバージョンによっては画面表示、操作方法が異なる可能性があります。