こんにちは、ナカムラです。
先日とてもカラフルなサイトを作った際に便利だったCSS変数の使い方をご紹介しようと思います。
汎用パーツの色ちがいを作る
サイト内で共通で使うボタンなどのパーツは形は同じでもコンテンツ別に色を変えたい、ということはよくあるかと思います。
特にカラフルな配色のデザインの場合、この種類が多くなることがあります。
ベースとなるボタンのスタイルを作り、装飾用のクラスやデータ属性などのセレクターを追加して色を変更していく方法はよく使いますが、一つ一つ設定設定していくとCSSの記述が増えていきます。
少なければそれで良いのですが、コンテンツの色分けだけで5色以上、さらにエリアやカテゴリ別に色を変えたいなど要望が増えていくと大変です。
CSS変数を使ってページやグループ単位で色を変える
そこで便利なのがCSS変数ですね。
ルートでは基本の色として--theme-colorを用意しておき、必要に応じて変数の値を変えます。
DEMOではイベントのコンテンツの場合とニュースコンテンツの場合で作ってみました。
セクションごとに変更できますし、ページごとにもできます。
使う色も、他の箇所でも使うことがあるので--event-color、--news-colorなどコンテンツ用の変数も用意しておくと便利です。
DEMO
See the Pen 色違いの汎用パーツ by Nakamura (@takayo-nakamura) on CodePen.
--theme-colorの内容を変えただけなので、.-redや.-blueのように装飾用のクラスと併用することも可能です。
まとめ
この記事ではボタンだけですが、見出しやページネーションなど、ページ内にあるさまざまな汎用パーツに使うことができます。
CSSが膨大にならないようにしていけば管理もしやすくなりますし、色を変えたい時にも変更しやすいです。
あらかじめ設計できる場合は、色だけでなく文字サイズや余白なども変数を使うことでメディアクエリを各所に書かずにレスポンシブ対応ができます。
細かい調整が必要なデザインはCSSの量も増えていきますので、可能な限りコンパクトに書く工夫はしていきたいと思います。
