CSSで事前にカラーパレットを作成しておくことでサイト全体のカラールールを統一する

Material Design Colors
https://www.materialui.co/colors

WordPressの場合、まず子テーマのディレクトリに以下のようなCSSファイルを容易します。

/DocumentRoot/wp-content/themes/yourtheme-child/color-material.css

color-material.cssの内容は以下のように記述します。
こちらは、上図のカラーパレット(今回はマテリアルカラー)の中の、Blue系統の色を50から900までのHEXコードを10通り、指定したものです。
必要に応じて下記コード中のdefaultのように、各色の使用用途の注釈を付けておくと、後々便利かもしれません。

:root {
--blue-50: #E3F2FD;
--blue-100: #BBDEFB;
--blue-200: #90CAF9;
--blue-300: #64B5F6;
--blue-400: #42A5F5;
--blue-500: #2196F3; /* default */
--blue-600: #1E88E5;
--blue-700: #1976D2;
--blue-700: #1565C0;
--blue-900: #0D47A1;
}

style.cssの最上部にて、下記のようなコードを挿入し、color-material.cssをインポートします。
カラーパレットが増えることを想定し、ここはファイルを分けておくことでより綺麗に管理ができます。

@import url("color-material.css");

適当なサイトを用意し、F12を押してDevToolsを立ち上げます。

上図、div要素のbackground-colorを適当な色に変更したいケースを想定します。
DevToolsでは標準で上図のように色の名称を表したカラーを出してくれますが、この色の中で使いたい色を見つけるのは難しいでしょう。

DevToolsのカラーパレットの使いづらさ

これでも以前と比べて大分進化したようですが、

ネームカラーが示されていても、そこから理想の色を選ぶことは容易ではありません。

例としてaliceblueを基準として、同系統の色がカラーピッカーで選択できますが、ここからピンポイントで理想の色を選ぶことは不可能といえるでしょう。
数値で指定しようにも、グレースケールの指定であればともかくカラフルな色になった場合、人間はお手上げです。
そこで、今回は自分の理想のカラーパレットを事前に準備し、DevToolsでカラーを選びやすくしたいと思います。
サイト全体のカラールールを明確に指定できるため、非常に便利です。

background-color: var(--blue-50);

値の指定は上記のように行います。

漠然としていたDevToolsのカラーパレットが、上記のように使いやすくなりました。
HEXコードなどの数字の羅列やカラー名称で色を明確にイメージできる方はいません。このように、事前にカラーパレットを使用して色を定義しておくことで、サイト全体のカラールールを定めてデザインの崩れにくいシステムの設計が可能です。

また、今回はカラーの値を事前にカスタム変数として指定しましたが、線の太さなど他の値も指定可能なので、大変便利です。

2019-02-23T14:13:18+09:002019/02/21|カテゴリーなし|