さぁ!検索しよう!

CSSをプログラミングのように記述することができるCSSメタ言語であるSCSSを用いてサイトの配色を一括管理する方法を紹介します。

CSSメタ言語とは、CSSを作成する言語であり、中でもSCSSはCSSのように記述できることからCSSに慣れている方は入りやすいと言われています。

通常、CSSで配色を決める際はそれぞれ要素毎にカラーコードを指定します。

.element { background:#ccc; }

しかし、後から違う色に変更したくなったとき、変更箇所が多いと作業効率が悪くなります。

そこで、そのようなことを無くすために先ほど説明したSCSSを使います。

SCSSでは前述の通り、プログラミングのように記述することができるため、演算や変数、条件分岐等を使うことができます。今回はその中から変数を使い、配色を簡単に管理できるようにします。変数は値を格納する箱のようなものであり、SCSSではプロパティの値を格納します。

SCSSの導入についてはこちらが大変参考になります。

変数の定義

始めに変数を定義します。変数は、ベースとなるカラーとそのベースカラーを基準に、明度を低ー中ー高と変化させたカラーを格納したものを定義します。

$baseColor:#2FCDB4;
$aColorL:darken($baseColor,10%);
$aColorC:darken($baseColor,20%);
$aColorH:darken($baseColor, 30%);

上記の記述については下記の通りです。

$baseColor:#2FCDB4; ベースカラーとなる色を$baseColorという変数に格納しています。
$ColorL:darken($baseColor:,10%); ベースカラーの明度を10%下げた色を$ColorLという変数に格納しています。
$ColorC:darken($baseColor:,20%); ベースカラーの明度を20%下げた色を$ColorCという変数に格納しています。
$ColorH:darken($baseColor:,30%); ベースカラーの明度を30%下げた色を$ColorHという変数に格納しています。

darken()はSCSSで予め定義された明度を下げる関数であり、第一引数に色が格納された変数を、第二引数にどの程度明度を下げるかをパーセントで指定します。

変数の実行

あとは、下記のようにカラーを指定したいクラスの値に、上記で定義した変数を記述すれば完了です。

下記ではページ全体の背景をベースカラー($baseColor)とし、それを基準にアクセントとなる部分は$aColorHとし、アクセントカラーよりも若干濃い色となる部分は$aColorC、ベースカラーより少し濃い部分を$aColorLと3段階にしています。

body { background:$baseColor; }
.element { background:$aColorH; }
.element2 { background:$aColorC; }
.element3 { background:$aColorL; }

イメージ096_mini

このようにSCSSで配色をパターン化することで、あとでサイトの色を変更したくなったときに、変数に格納されたベースカラーの値を変更するだけでアクセントカラー等も同時に変更されるので管理が容易となります。

以上です。