親テーマと子テーマにおけるCSSの基本原則

WordPressで既存のテーマをカスタマイズする際、親テーマのファイルを直接編集してしまうと、テーマのバージョンアップ時にすべての変更が上書きされて消えてしまいます。そのため、差分だけを安全に管理できる「子テーマ」の作成が推奨されています。

しかし、子テーマの style.css にCSSを記述したのに「なぜか親テーマのデザインが変わらない」「スタイルが効かない」というトラブルによく遭遇します。その最大の原因が「CSSの読み込み順序」です。

CSSのカスケード（後勝ち）ルール

CSS（Cascading Style Sheets）の仕様上、同じセレクタ・同じ詳細度のスタイルが存在する場合、HTMLソースコードの中で後から読み込まれたスタイルが優先して適用されます。

上記のように、親テーマが先、子テーマが後に出力されていれば、子テーマで指定したプロパティが自然に親テーマの指定を上書きして反映されます。

逆に、もし子テーマが先に読み込まれ、後から親テーマが読み込まれてしまうと、子テーマで書いたスタイルが親テーマのスタイルによって塗りつぶされてしまい、カスタマイズが反映されなくなります。

@import による読み込みが非推奨な理由

かつてのWordPressチュートリアルでは、子テーマの style.css の冒頭に以下のような記述をする方法が紹介されていました。

/* 非推奨の古い書き方 */
@import url("../parent-theme-folder/style.css");

/* ここから子テーマのカスタマイズCSS */
body {
    background-color: #f0f0f0;
}

現在、この @import を使った読み込み方法は公式に非推奨となっています。理由は主に以下の2点です。

そのため、現在は子テーマの functions.php からWordPress標準のエンキュー機能（wp_enqueue_scripts）を使って読み込むのが鉄則です。

functions.php での正しいCSS読み込みパターン

子テーマの functions.php でスタイルを読み込む際、使用している親テーマがどのようにCSSを読み込んでいるかによって、記述パターンが2通りに分かれます。

パターンA：親テーマが自動でstyle.cssを読み込んでいる場合（モダンテーマ標準）

近年の多くのWordPressテーマ（親テーマ）は、自分自身の functions.php の中で親の style.css を自動的にエンキューする設計になっています。

この場合、子テーマ側で再度親テーマの style.css をエンキューしてしまうと、親テーマのCSSが2回読み込まれてしまう（二重読み込み）ため無駄が発生します。子テーマ側では「親テーマのスタイルに依存する形で、子テーマのstyle.cssのみを追加する」コードを記述します。

<?php
// 子テーマの functions.php
add_action( 'wp_enqueue_scripts', 'my_child_theme_enqueue_styles' );
function my_child_theme_enqueue_styles() {
    // 親テーマのスタイルハンドル名を依存関係（$deps）に指定して子テーマのCSSを読み込む
    wp_enqueue_style(
        'child-style',
        get_stylesheet_uri(),
        array( 'parent-style-handle' ), // 親テーマが登録しているハンドル名を指定
        wp_get_theme()->get( 'Version' )
    );
}

パターンB：親テーマがstyle.cssを自動で読み込まない場合（公式Codexパターン）

親テーマが style.css を自動でエンキューしない設計の場合（またはクラシックテーマの場合）は、子テーマの functions.php の中で、親テーマと子テーマの両方のCSSを登録・読み込みます。

<?php
// 子テーマの functions.php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
    // 1. 親テーマの style.css を登録・読み込み
    wp_enqueue_style(
        'parent-style',
        get_template_directory_uri() . '/style.css'
    );

    // 2. 子テーマの style.css を親テーマ依存（array('parent-style')）として読み込み
    wp_enqueue_style(
        'child-style',
        get_stylesheet_uri(),
        array( 'parent-style' ),
        wp_get_theme()->get( 'Version' )
    );
}

実践Tips：CSS編集が即時反映されるキャッシュ対策（filemtime）

CSSを変更してサーバーにアップロードしたのに、ブラウザのキャッシュが原因で「変更が反映されない」という問題が頻繁に起こります。

バージョン引数にファイルの最終更新日時を取得する filemtime() を指定すると、CSSファイルを保存・更新するたびに自動で新しいバージョン番号（クエリパラメータ）が付与され、ブラウザキャッシュに悩まされることがなくなります。

<?php
add_action( 'wp_enqueue_scripts', 'my_child_theme_styles_with_cache_buster' );
function my_child_theme_styles_with_cache_buster() {
    // 子テーマ style.css のファイルパス
    $style_path = get_stylesheet_directory() . '/style.css';
    $version    = file_exists( $style_path ) ? filemtime( $style_path ) : '1.0.0';

    wp_enqueue_style(
        'child-style',
        get_stylesheet_uri(),
        array( 'parent-style' ),
        $version // ファイル更新日時をバージョンに設定（例: style.css?ver=1708001234）
    );
}

LPや特定ページだけで専用CSSを読み込む応用テクニック

全ページ共通の style.css だけでなく、「ランディングページ（LP）専用のスタイル」や「特定の固定ページ専用のCSS」を読み込みたいケースがあります。この場合、WordPressの条件分岐タグを使って読み込みを制御します。

<?php
add_action( 'wp_enqueue_scripts', 'my_custom_page_styles' );
function my_custom_page_styles() {
    // スラッグが 'lp' の固定ページのみで専用CSSを読み込む
    if ( is_page( 'lp' ) ) {
        wp_enqueue_style(
            'lp-style',
            get_stylesheet_directory_uri() . '/css/lp.css',
            array( 'child-style' ), // 子テーマの基本CSSの後に読み込む
            filemtime( get_stylesheet_directory() . '/css/lp.css' )
        );
    }

    // フロントページ（トップページ）のみ専用CSSを読み込む場合
    if ( is_front_page() ) {
        wp_enqueue_style(
            'front-style',
            get_stylesheet_directory_uri() . '/css/front.css',
            array( 'child-style' ),
            filemtime( get_stylesheet_directory() . '/css/front.css' )
        );
    }
}

条件分岐を使うことで、関係のない通常投稿やアーカイブページで余計なCSSが読み込まれるのを防ぎ、サイト全体の表示パフォーマンスを高く維持できます。

子テーマのCSSが反映されない時のチェックリスト

設定を行ったにもかかわらず子テーマのスタイルが反映されない場合は、以下のステップに沿って原因を確認してください。

まとめ

WordPressにおける親テーマと子テーマのCSS読み込み順序と管理の要点は以下の通りです。

正しい読み込みルールをマスターすることで、親テーマのアップデートにも強く、高速でメンテナンス性の高いWordPressサイト運用が可能になります。