CrystalSnowman.com

あなたの時間節約につながる情報を提供します

CSSとclass属性でWebサイトの色設定を簡単に行う方法

css_logo

WordPressなどで作成したWebサイトの設定は外部CSSファイルで行っていると思います。サイトのテーマカラーなど何か所も使われている色を変更する際は、何か所もCSSを変更する必要があります。CSSとhtmlのclass属性を組み合わせることで変更を最小限にとどめ、メンテナンスしやすい構造にすることができます。私のサイトで行っている方法を紹介します。

一般的なCSSによる色指定方法

多くのサイトは次のようにheadタグ内で外部CSSファイルを指定していると思います。この例ではstyle.css、9行目です。

CSSファイルは以下のようにセレクターごとに色を指定していると思います。

ここでは「#4a5f7e」がテーマカラーとして複数指定されている色です。

この記述の問題点

テーマカラーである「#4a5f7e」を別の色に変更するとします。style.cssの「#4a5f7e」の記述を一括置換すれば実現できますが、変わってほしくない場所も変わってしまうかもしれません。それを目視で一つ一つ確認するのは手間です。style.cssの行数が多い場合はかなり大変です。修正ミスを犯しやすくなります。つまりこの記述方法は修正個所が多くなってしまうことが問題です。

理想の色指定

もしstyle.css内で色の値を変数に出来れば、変数の値を1箇所変更すれば複数個所に反映できると思います。調査するとCSS Variablesというものがあり、CSSで変数が使用できるようです。
しかしまだすべてのブラウザーで対応できているわけではなさそうなので今回は見送りました。

変数を使った場合の理想のイメージは以下です。「const-theme-color」という変数を宣言し、各セレクター内で指定します。

CSSとclassを使用した色指定

理想の色指定はできないので別の方法を採ります。CSS内で色を変数のように定義するアイデアは使いたかったので、classセレクターとして色を定義しました。定義した色は今までのセレクターから削除します。

次にhtmlファイルにCSSで定義した色用のclassセレクターを追記していきます。

CSSで定義した「color-main」、「color-siteinfo」、「color-site-title」を各要素のclass属性として追加しました。
これらstyle.cssで定義したclassセレクターの色設定を変更することで全体の色を変更できます。色の指定を外す時はclass属性から定義したclassセレクターを外します。

まとめ

色設定を一か所変更することで全体に反映させるという目的を達成できました。
この方法は色指定とそれ以外の設定を分離することで色設定を1箇所に限定できます。またhtmlのclass属性でその分離された設定を合体させることで、元からあるclass属性の設定に影響を及ぼすことなくスタイル設定ができます。
htmlにclassセレクターを追加する手間が発生しますが、CSSファイルを編集するよりは影響範囲が予想しやすくなります。
CSSで「予測しやすい」、「保守しやすい」、「再利用しやすい」、「拡張しやすい」書き方ができたと思います。

参考図書

今回紹介した方法は次の本を参考にしています。

Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法
Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法

この本はGoogleエンジニアのフィリップ・ウォルトン氏が提唱した「予測しやすい」、「保守しやすい」、「再利用しやすい」、「拡張しやすい」CSS設計ができるように解説しています。一冊の中で「OOCSS」や「SMACSS」など多くの設計手法が紹介され、使える知識が豊富です。
設計手法はもちろんのこと特にセレクターの命名規則が役に立ちました。
お勧めです。


Top