2025年10月25日[土曜日]

SCSSでCSSを効率的に管理する – WordPress実践制作【WPCafe編】

  • 2025/10/22
  • PRACTICE
  • カフェサイトを作ろう
  • 0comments
  • 52views
  • 約14分で読めます
  • 7

前回、wp_enqueue_style()を使ってCSSを読み込み、ヘッダーのスタイリングを完成させました。 現在はmain.cssに全てのスタイルを記述していますが、プロジェクトが大きくなると管理が大変になります。

今回は、CSSをSCSSに移行し、効率的に管理できる環境を構築します。

SCSSとは？

SCSSは「Sassy CSS」の略で、CSSを効率的に書くための拡張言語です。 SCSSで書いたコードはコンパイル（変換）することで、ブラウザが理解できる通常のCSSファイルになります。

SCSSのコンパイルの流れ

main.scss → コンパイル → main.css → WordPressが読み込む

  • SCSSファイルを編集しても、ブラウザの表示結果は変わりません
  • コンパイルして生成されたCSSファイルをWordPressが読み込みます
  • 開発者はSCSSで効率的にコードを書き、ブラウザには最適化されたCSSが提供されます

なぜCSSを複数ファイルに分けないのか？

ファイルが大きくなると「CSSを複数ファイルに分ける」という方法も考えられます。 しかし、今回はSCSSを使って開発時は分割、本番は1ファイルという方法を採用します。

CSSを複数ファイルに分けた場合の問題点

  • HTTPリクエストが増える: common.css、header.css、footer.cssと分けると、それぞれ読み込みが発生し、ページの表示速度が低下
  • 読み込み順序の管理が必要: 依存関係を手動で設定する必要があり、ミスが起きやすい
  • 変数の共有が困難: CSS変数（カスタムプロパティ）を使う必要があり、管理が煩雑

SCSSを使うメリット

  • 開発時は分割して管理: ファイルごとに整理でき、コードが見やすい
  • 本番は1ファイル: コンパイルで統合されるため、HTTPリクエストは1回だけ
  • 読み込み順序が自動: @useの順序でコンパイル時に自動的に解決
  • 変数やミックスインを全ファイルで共有: 効率的なスタイル管理が可能

つまり、開発効率と表示速度の両方を実現できるのがSCSSを使う最大の理由です。

SCSSの4つのメリット

SCSSには、CSS開発の効率と保守性を大きく向上させる4つの主要なメリットがあります。

1. 入れ子（ネスト）構造

CSSでは親セレクタを何度も書く必要がありますが、SCSSでは入れ子にして記述できます。

CSS（従来の書き方）

.header {
  width: 100%;
}
.header .logo {
  font-size: 32px;
}
.header .logo .logo-name {
  font-weight: bold;
}
CSS

SCSS（入れ子を使った書き方）

.header {
  width: 100%;
  .logo {
    font-size: 32px;
    .logo-name {
      font-weight: bold;
    }
  }
}
SCSS

HTMLの構造とSCSSのコードの構造が一致するため、コードが読みやすくなります。

&（アンパサンド）を使った入れ子

&は親セレクタを参照する記号で、擬似クラスやクラスの追加に便利です。

a {
  color: blue;
  &:hover {
    color: red;
  }
  &.active {
    font-weight: bold;
  }
}
SCSS

これは以下のCSSにコンパイルされます。

a {
  color: blue;
}
a:hover {
  color: red;
}
a.active {
  font-weight: bold;
}
CSS

&を使うことで、関連するスタイルをまとめて記述でき、可読性が向上します。

2. 変数の使用

カラーコードやサイズなど、繰り返し使う値を変数として定義できます。

$COLOR-MAIN: #534931;
$COLOR-LIGHT: #f7f7f7;

.header {
  background: $COLOR-LIGHT;
  .logo {
    color: $COLOR-MAIN;
  }
}
SCSS

変数を使うメリット

  • 一括変更が可能: 変数の定義を1箇所変更するだけで、全ての箇所に反映される
  • 意図が明確になる: #534931より$COLOR-MAINの方が、その色の用途が一目でわかる
  • 保守性の向上: 「メインカラーを変更したい」ときに、どの値を変更すればいいかすぐにわかる

3. 四則演算

数値計算をSCSS内で行えます。

$base-size: 16px;

.header {
  padding: $base-size * 2; // 32px
  .logo {
    font-size: $base-size * 1.5; // 24px
  }
}
SCSS

4. ファイル分割

大きなCSSファイルを機能ごとに分割して管理できます。

// main.scss
@use "variables";
@use "common";
@use "header";
@use "footer";
SCSS

後ほど詳しく実装していきます。

現状のCSSをSCSSに変更する

それでは、実際に現在のmain.cssをSCSSに移行していきましょう。

scssフォルダの作成

テーマディレクトリ内にscssフォルダを作成します。

wpcafe
├── scss
├── functions.php
└── main.css

ファイルを分割して作成

現在のmain.cssを以下の3つのSCSSファイルに分割します。

  • _variables.scss: 変数定義（色、サイズなど）
  • _common.scss: 共通スタイル（リセットCSS、基本スタイル）
  • _header.scss: ヘッダー専用のスタイル
wpcafe
├── scss
│   ├── _variables.scss
│   ├── _common.scss
│   ├── _header.scss
│   └── main.scss
└── index.php

ファイル名の先頭のアンダーバーについて

_variables.scssのように、ファイル名の先頭にアンダーバー（_）がついているファイルは、パーシャルファイルと呼ばれます。

  • パーシャルファイルは単独ではコンパイルされません
  • 他のSCSSファイルから読み込まれる外部ファイルとして扱われます

_variables.scssの作成

scss/_variables.scssを作成し、共通で使用する変数を定義します。

_variables.scss
// カラー定義
$COLOR-MAIN: #534931;
$COLOR-LIGHT: #f7f7f7;
SCSS

_common.scssの作成

scss/_common.scssを作成し、リセットCSSと共通スタイルを記述します。

_common.scss
@use 'variables' as var;

/* Common
------------------------------ */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

a {
  text-decoration: none;
  &.link {
    color: var.$COLOR-MAIN;
  }
}
SCSS

コードのポイント

@use構文
@use 'variables' as var;
SCSS
  • 他のSCSSファイルを読み込む構文です
  • as varで名前空間をvarに設定しています
  • ファイル名からアンダーバーと拡張子を除いた名前を指定します
&（アンパサンド）記号
a {
  text-decoration: none;
  &.link {
    color: var.$COLOR-MAIN;
  }
}
SCSS

&は親セレクタを参照する記号です。この場合、&.linkはa.linkにコンパイルされます。

変数の参照
color: var.$COLOR-MAIN;
SCSS

var.$COLOR-MAINで、_variables.scssで定義した変数を参照しています。

_header.scssの作成

scss/_header.scssを作成し、ヘッダーのスタイルを記述します。

_header.scss
@use 'variables' as var;

/* Header
------------------------------ */
.header {
  width: 100%;
  height: 120px;
  
  .container {
    display: flex;
    align-items: center;
    gap: 2.0rem;
    padding: 0 4.0rem;
    width: 100%;
    height: 100%;
  }

  /* Header Logo */
  .logo {
    display: flex;
    align-items: center;
    height: 80px;
    position: relative;
    color: var.$COLOR-MAIN;
    
    .logo-the {
      font-weight: 400;
      font-size: 32px;
      line-height: 100%;
    }
    
    .logo-name {
      font-size: 46px;
      font-weight: 400;
      padding-left: 8px;
    }
  }

  /* Header Navi */
  .header-nav {
    flex: 1 1 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    .header-nav-list {
      display: flex;
      gap: 1.0rem;
      list-style: none;
      
      .nav-item-link {
        color: var.$COLOR-MAIN;
      }
    }
    
    .header-nav-socials {
      display: flex;
      gap: 1.0rem;
      list-style: none;
      
      .sns-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background: var.$COLOR-LIGHT;
        font-size: 22px;
      }
    }
  }
}
SCSS

コードのポイント

入れ子構造により、.headerの中に.container、その中に.logoといった階層構造が一目でわかります。 従来のCSSと比較すると、コードの構造がHTMLの構造と一致しているため、非常に読みやすくなっています。

main.scssの作成

scss/main.scssを作成し、各パーシャルファイルを読み込みます。

@use "common";
@use "header";
SCSS

コードのポイント

外部ファイルの読み込み

  • @use "common"で_common.scssを読み込みます
  • @use "header"で_header.scssを読み込みます
  • ファイル名のアンダーバー（_）と拡張子（.scss）は省略します
_variables.scssを読み込まない理由

main.scssでは_variables.scssを読み込んでいません。 これは、_variables.scssが各パーシャルファイル内で既に読み込まれているためです。

// _common.scss内で読み込み済み
@use 'variables' as var;

// _header.scss内でも読み込み済み
@use 'variables' as var;
SCSS

変数が必要なファイルで個別に読み込むため、main.scssで読み込む必要はありません。

コンパイルの流れ

main.scssがコンパイルされるとき、_common.scssと_header.scssが読み込まれ、それらの内容が統合されてmain.cssが生成されます。

VSCodeでSCSSをコンパイルする

SCSSファイルを作成しても、それだけではブラウザで利用できません。 CSSファイルにコンパイル（変換）する必要があります。

Live Sass Compilerのインストール

  1. VSCodeの拡張機能タブを開く（サイドバーの四角いアイコン）
  2. 検索欄に「Live Sass Compiler」と入力
  3. 「Glenn Marks」が作成したLive Sass Compilerをインストール

コンパイルの開始

  1. VSCodeでmain.scssなどのSCSSファイルを開く
  2. VSCodeの右下に表示される「Watch Sass」ボタンをクリック
  3. ボタンが「Watching…」に変わったら、監視が開始されます
監視とは

「監視」とは、SCSSファイルの変更を自動的に検知する機能です。 Watching状態にすると、SCSSファイルを保存するたびに自動的にコンパイルが実行されます。

Watching中の動作
  • SCSSファイルを編集して保存すると、自動的にCSSファイルが生成される
  • 例：main.scssを保存すると、main.cssが自動更新される
  • 手動でコンパイルする必要がない

よくあるトラブル

SCSSを変更してもコンパイルされない場合

「Watch Sass」ボタンが「Watching…」になっているか確認してください。 クリックして「Watching…」の状態にすることで、自動コンパイルが開始されます。

コンパイル先の設定変更

現在の設定では、main.cssがscssフォルダ内に生成されてしまいます。 今回は、index.phpと同じフォルダ（scssフォルダの1つ上の階層）に生成したいので、設定を変更します。

.vscodeフォルダとsettings.jsonの作成

  1. テーマディレクトリ直下に.vscodeフォルダを作成
  2. .vscodeフォルダ内にsettings.jsonファイルを作成
wpcafe
├── .vscode
│   └── settings.json
├── scss
│   ├── _variables.scss
│   ├── _common.scss
│   ├── _header.scss
│   └── main.scss
└── index.php

settings.jsonの内容

.vscode/settings.jsonに以下を記述します。

settings.json
{
  // SCSS to CSS
  "liveSassCompile.settings.formats": [
    {
      "format": "expanded",
      "extensionName": ".css",
      "savePath": "~/../"
    }
  ]
}
JSON

設定内容の解説

liveSassCompile.settings.formats

Live Sass Compilerのコンパイル設定を行うプロパティです。配列形式で複数の出力形式を指定できます。

format: "expanded"

CSSの出力形式を指定します。

  • expanded: 通常の読みやすい形式（推奨）
  • compressed: 圧縮された形式（本番環境用）
  • compact: 1ルール1行の形式
  • nested: ネストされた形式

開発中はexpandedを使用し、可読性を優先します。

extensionName: ".css"

出力されるファイルの拡張子を指定します。通常は.cssを指定します。

savePath: "~/../"

コンパイルされたCSSファイルの保存先を指定します。

  • ~: 現在のSCSSファイルがあるフォルダ
  • /../: 1つ上の階層へ移動

つまり、scss/main.scssから見て1つ上の階層（テーマディレクトリ直下）にmain.cssが生成されます。

wpcafe
├── .vscode
│   └── settings.json
├── scss
│   ├── _variables.scss
│   ├── _common.scss
│   ├── _header.scss
│   └── main.scss ← ここからコンパイル
├── index.php
└── main.css　← ここに生成される

複数の出力形式を指定する

配列に複数のオブジェクトを追加することで、開発用と本番用の両方のCSSを同時に生成することもできます。

settings.json
{
  "liveSassCompile.settings.formats": [
    {
      "format": "expanded",
      "extensionName": ".css",
      "savePath": "~/../"
    },
    {
      "format": "compressed",
      "extensionName": ".min.css",
      "savePath": "~/../"
    }
  ]
}
JSON

この設定では以下の2つのファイルが生成されます。

  • main.css: 開発用の読みやすい形式
  • main.min.css: 本番用の圧縮された形式

本番環境ではmain.min.cssを読み込むことで、ファイルサイズを削減し、ページの読み込み速度を向上させることができます。

本番環境で使用する場合

functions-theme-load.phpで読み込むファイル名をmain.cssからmain.min.cssに変更します。

functions-theme-load.php
// 変更前
$target_file = '/main.css';

// 変更後
$target_file = '/main.min.css';
PHP

これにより、WordPressが圧縮されたCSSを読み込むようになります。

まとめ

今回は、CSSをSCSSに移行し、効率的に管理できる環境を構築しました。

学んだこと

  • SCSSとは: CSSを効率的に書くための拡張言語
  • SCSSの4つのメリット: 入れ子、変数、四則演算、ファイル分割
  • ファイル分割: _variables.scss、_common.scss、_header.scssに分割
  • パーシャルファイル: アンダーバー（_）で始まるファイルは単独でコンパイルされない
  • @use構文: 他のSCSSファイルを読み込む
  • Live Sass Compiler: VSCodeでSCSSを自動コンパイル
  • コンパイル先の設定: settings.jsonでCSSの出力先を制御

重要なポイント

  • SCSSファイルは直接ブラウザで読み込まれない（コンパイルが必要）
  • パーシャルファイル（_で始まる）は外部ファイルとして扱われる
  • main.scssから各パーシャルファイルを読み込み、1つのmain.cssを生成
  • 「Watch Sass」を「Watching…」にすることで、自動コンパイルが有効になる

SCSSを使うメリットを実感

  • カラーコードを変数化したことで、色の変更が容易に
  • 入れ子構造により、HTMLとの対応関係が明確に
  • ファイル分割により、コードの見通しが向上

次回予告

次回は、フッターを作成します。

  • フッターのHTML構造の作成
  • 固定ページ「共通情報」に連絡先・営業時間のカスタムフィールドを追加（Smart Custom Fields使用）
  • フッターで共通情報を取得して表示
  • SCSSでフッターのスタイリング（_footer.scssの作成）
  • ヘッダーとフッターで統一感のあるデザインを実現

前々回に作成した「共通情報」ページを活用し、サイト全体で使う情報を一元管理する仕組みをさらに拡張していきます。

引き続き、実際に手を動かしながら進めていきましょう。

この記事の評価をお願いします

評価をすると「既読」となり、まだ読んでいない記事を区別できます。

この投稿をシェアする

コメントを残す

CAPTCHA


CSSを読み込みヘッダーを仕上げる – WordPress実践制作【WPCafe編】

CSSを読み込みヘッダーを仕上げる – WordPress実践制作【WPCafe編】  PRACTICE

WordPressでCSS/JavaScriptを読み込む正しい方法を学びます。外部ライブラリの読み込み、依存関係の管理、バージョン管理によるキャッシュ対策など、テーマ開発で必須となる基礎知識を身につけます。

  • 2025/10/20
  • 0comments
  • 31views

フッター用の共通情報を登録する – WordPress実践制作【WPCafe編】

フッター用の共通情報を登録する – WordPress実践制作【WPCafe編】  PRACTICE

フッターに表示する問い合わせ先、営業時間、住所、Googleマップの情報を登録します。SNS情報の登録方法の復習として、SCFとACFを使って固定ページ「共通情報」にカスタムフィールドを追加し、サイト全体で使う情報を一元管理します。

  • 2025/10/22
  • 0comments
  • 30views

STAY CONNECTED

wp-ch Admin

現役のフリーランスエンジニアがWordPressによるWebサイト構築を基礎から実践テクニックまで徹底解説します。

たくさんの方がフォローしてくれています。あなたもぜひ、情報を受け取ってください。

STORY｜ストーリー

WordPressを効率よく確実に学ぶためには、学習の順序が大切です。知識が自然に積み上がるよう、学習ステップに沿って記事を順番に並べています。

学習ストーリー第40話まで掲載中

全ストーリーを見る

PRACTICE｜カフェ編

カフェを題材にした本格的なサイト構築を公開中。実践を通してサイトの構築方法を学べます。

サンプルサイト：WPCafe

実践ストーリー第10話まで掲載中

全ストーリーを見る

SERIES｜シリーズ

CATEGORY｜分類

TAGS｜タグ

全てのタグを見る