CSSを書く場所があり過ぎて困る問題

WordPressはCSSを記述できる場所が多数あるので「どこに書いたらいいですか？」という質問があります。

この質問に対する私の回答は「それぞれのメリット・デメリットを理解して、どこに記述するか決めてください」です。

明確な回答が欲しいかもしれませんが「最適解はなく、ケースバイケース」というのが私の考えです。

組み合わせて使ってもよいと思います。

CSSの記述場所

まずはCSSを記述できる場所をリストアップしてみましょう。

私が思い付くのは次の５つです。

カスタマイザー：［外観］＞［カスタマイズ］＞［追加CSS］
スタイルシート：［外観］＞［テーマファイルエディター］＞［style.css］
テーマの機能
プラグイン
カスタムHTMLブロック

メリット・デメリット

それぞれのメリット・デメリットを整理してみましょう。

テーマのアップデートや変更に対応できるか

記述場所	テーマの更新	テーマの変更
カスタマイザー	〇	×
親テーマのスタイルシート	×	×
子テーマのスタイルシート	〇	×
テーマの機能	〇	×
プラグイン	〇	〇
カスタムHTMLブロック	〇	〇

どこに追加されるか

記述場所	別ファイル	サイト全体	特定のページ
カスタマイザー		〇
スタイルシート^※	〇	〇
テーマの機能			〇
プラグイン	〇	〇	〇

※親テーマのスタイルシートにCSSを記述することは非推奨ですが、子テーマのスタイルシートであれば問題ありません。

別ファイル

一般的には、HTMLとCSSは分離した方がよいと言われます。

また、HTML文書内にCSSを記述する場合、head要素内に記述することが推奨されています。

別ファイルにする場合は、link要素を使って読み込みます。

別ファイルにしない場合は、head要素内にstyle要素を配置してCSSを追加します。

サイト全体

サイト全体にCSSコードを追加する場合、不要なページにもコードが読み込まれてしまうというデメリットがあります。

特定のページ

特定のページにCSSコードを追加する場合、同じコードを複数のページに記述する必要が生じるというデメリットがあります。

テーマの機能とプラグイン

分かりやすいよう表にしましたが、テーマやプラグインによるので、詳しく見ていきましょう。

ここでは、塾で紹介されているテーマとプラグインについて解説します。

テーマの機能

CocoonやEmanonを有効にしていると、固定ページ／投稿エディターに［カスタムCSS］が追加されます。

この［カスタムCSS］に入力したCSSは、そのページにのみ適用されます。

このような機能はプラグイン化して欲しと思ってしまいます。

プラグイン化すれば、テーマを変更してもCSSを残すことができるからです。

VK All in One Expansion Unit

Lightningの必須プラグインの一つです。

固定ページ／投稿エディターに［カスタムCSS］が追加されます。

この［カスタムCSS］に入力したCSSは、そのページにのみ適用されます。

CocoonやEmanonとは異なり、Lightningはプラグイン化してくれています。

Simple Custom CSS and JS

管理画面のメニューに［カスタムCSS & JS］が追加されます。

［外部のファイル］にするか［<head>要素内］に追加するかを選べます。

プロ版を購入すると指定したURLにのみ適用することができますが、無料版はサイト全体に適用されます。

Contact Form 7

フォームを作成する際にHTMLタグが使えるので、style要素を使ってCSSを記述できます。

form要素内に追加されるため、非推奨な方法です。

カスタムHTMLブロック

HTMLを記述できるブロックなので、style要素を使ってCSSを記述できます。

body要素内に追加されるため、非推奨な方法です。

CSSが反映されない問題

CSSが反映されないという問題も「CSSをどこに書いたらいいか」という質問と関係があります。

この問題を解決するカギは、競合するCSSルールを解決する方法を理解することです。

競合するルール

そもそも、どんなときに競合が発生するか知っていますか？

同じHTML要素の同じプロパティの値を設定するルールを２つ以上つくってしまったときです。

テーマやプラグインもCSSを追加しているので、ルールの競合は起きやすいです。

例えば、Contact Form 7で作成したお問い合わせフォームの送信ボタンの色を変更したいとき、テーマが追加したルールとの間で発生する競合を避けることができません。

では、どのルールが適用されるのか、そのメカニズムをみていきましょう。

セレクターの詳細度

まず、セレクターの詳細度が高いルールが適用されます。

詳細度の計算方法は複雑です。

詳細度の高さは、idセレクター、classセレクター、タグセレクターの順ということを最低限覚えておきましょう。

ルールの出現順

セレクターの詳細度が等しい場合、ルールの出現順がキーになります。

ソースコード上の順番が最後のものが適用されるからです。

ここで「CSSをどこに書いたらいいか」という質問と関係してきます。

CSSの記述場所によって、HTML文書上の順番が異なるからです。

そこで、実験してみることをオススメします。

CSSの記述場所でリストアップしたところに、段落の文字色を変えるCSSを追加して、どのルールが適用されるか確認してみると、理解が深まります。

記述場所によって色を変えると分かりやすいです。

ルールが読み込まれた順番は、開発者ツールで確認できます。

［ページのソースを表示］でも出現順が分かります。

その他

テーマのアップデートや変更の影響を受けないよう、テーマのIDやクラスの使用は可能な限り避けた方がよいと思います。

HTMLアンカー（IDの追加）や追加CSSクラスを上手に利用すると、テーマに依存しないセレクターにできます。

参考にした外部サイト

これらのリソースに目を通すと、理解が深まります。

まとめ

この記事を読んで、CSSの記述場所選びの迷いが少しでも解消されたら嬉しいです。

CSSの記述場所