【初心者向け備忘録】ローカル環境でWordPressテーマのCSSを圧縮する方法（PostCSS + cssnano）

2025-07-022025-07-03

当ページのリンクには広告が含まれています。

【初心者向け備忘録】ローカル環境でWordPressテーマのCSSを圧縮する方法（PostCSS + cssnano）のブログ記事のアイキャッチ画像

今回事業サイトのWordPressのテーマ開発をしていて、CSSがかなり膨大になってきて、少しでもいいから「CSSファイルを圧縮して軽くしたいな」とふと思いました。
この記事は、ターミナルの基本的な使い方から、PostCSSを使ってCSSをmin化（圧縮）する手順まで、自分用に記録しておく備忘録です。

今回は「SCSS → CSS → min.css」の流れを自動で行うための手順を、初心者にもわかりやすく解説します。

同じようにCSSの圧縮に挑戦している方や、「ターミナルって何？どうやって使うの？」という方にも役立つ内容になるようまとめました！

この記事でわかること

ターミナルの使い方（テーマフォルダに移動するまで）
PostCSSの基本と導入方法
CSSを圧縮して .min.css にする方法（自動）

【超基礎】ターミナルの使い方と目的地への移動方法

そもそもターミナルってなに？

ターミナルは「パソコンにコマンド（命令）を直接入力して操作できるツール」です。
Macの場合、「Launchpad」→「その他」→「ターミナル」で開けます。

今回よく使ったコマンド一覧

コマンド	意味
cd	フォルダを移動（change directory）
ls	フォルダの中身を一覧表示（list）
pwd	今いる場所（パス）を表示（print working directory）

ローカル環境のWordPressテーマフォルダへ移動する

私の場合、Local by Flywheel（Local）でWordPressをローカルに構築しています。
テーマの場所は以下のようになっています。

/Users/******/Local Sites/rittacoco-2025/app/public/wp-content/themes/rittacoco

この場所に移動するには、以下のようにターミナルで入力します。

cd "/Users/******/Local Sites/rittacoco-2025/app/public/wp-content/themes/rittacoco"

※スペースが含まれるパスは "ダブルクォート" で囲むと安心です。

WordPressテーマのフォルダ構成

/* /rittacoco //（テーマファイル）
  ├─ scss/
  │   └─ main.scss(ここにCSSを書いていく)
  ├─ css/
  │   ├─ main.css（Sassで生成）
  │   └─ main.min.css（圧縮されたCSS）
  ├─ package.json
*/

PostCSS + cssnanoとは？

PostCSS（ポストシーエスエス）とは？

PostCSSは、CSSにいろんな機能を追加したり、加工したりできるツールです。
イメージとしては、CSSの加工職人さんのような存在です。

ただのCSSではできない、こんなことができます。

ベンダープレフィックスの自動付与（例：-webkit- など）
ネスト記法（SCSSのような書き方）
圧縮や不要なCSSの削除
将来のCSS構文（まだ使えない新しい書き方）を使えるようにする

PostCSSは「本体」だけでは何もしません。
プラグインを組み合わせてはじめて便利になるツールです。

ssnano（シーエスエスナノ）とは？

cssnano は PostCSS のプラグインの1つで、CSSを圧縮（minify）するためのツールです。
無駄なスペースやコメント、改行などを削除して、読み込みが速くなるようにしてくれます。

たとえば、以下のようなCSSが

body {
  margin: 0;
  padding: 0;
}

圧縮後には、

body{margin:0;padding:0}

のように、最小限のサイズに縮められます。

PostCSS + cssnano を使うと？

PostCSSに cssnano を組み合わせることで、
SCSSからCSSに変換した後に、自動で圧縮までしてくれるワークフローを構築できます。

PostCSS関連パッケージのインストール

使用するツール

CSSの圧縮には以下のツールを使います。

ツール	役割
postcss	CSSを処理するエンジン
postcss-cli	ターミナルで `postcss` を動かすための「操作係」
cssnano	CSSを圧縮するプラグイン
chokidar-cli	ファイルの変更を監視するツール
concurrently	2つ以上のコマンドを同時に実行する

PostCSS は CSS を変換するための強力なツールですが、ターミナルで直接使うには「postcss-cli（コマンドラインインターフェース）」が必要です。

これを入れておくことで、CSSファイルをコマンド一つで圧縮したり、プレフィックスを付けたりできるようになります。

ターミナルで、テーマフォルダに移動したら以下を実行します。

npm install -D postcss postcss-cli cssnano chokidar-cli concurrently

※ -D は「開発用依存」の意味です。

PostCSSの設定ファイルを作成

postcss.config.js をテーマフォルダに作成し、以下を記述します。

const purgecss = require("@fullhuman/postcss-purgecss").default;

module.exports = {
  plugins: [
    require("postcss-import"), // 他のCSSを@importで読み込む
    require("postcss-nested"), // Sassのようにネスト記法を使える
    // 未使用CSSの削除をしたい場合は下記のコメントを外してください
    // purgecss({
    //   content: ["./**/*.php", "./js/**/*.js"],
    //   safelist: {
    //     standard: ["body", "html"],
    //   },
    //   defaultExtractor: (content) => content.match(/[\w-/:]+(?<!:)/g) || [],
    // }),
    require("autoprefixer"), // ベンダープレフィックスの自動付与
    require("cssnano")({  // CSSの圧縮
      preset: "default",
    }),
  ],
};

解説ポイント

postcss-import
→ SCSSやCSS内で @import を使って他のファイルを読み込めるようにします。

postcss-nested
→ ネスト記法（例：.parent { .child { ... }}）を使えるようにします。

purgecss（コメントアウト中）
→ 未使用のCSSを削除してファイルサイズを最小限にできます。
コメントアウトされているので現在は無効ですが、必要に応じて再有効化できます。

autoprefixer
→ display: flex などに -webkit- などのベンダープレフィックスを自動で付けます。

cssnano
→ CSSを圧縮し、.min.css を出力します。

本番環境でCSSを軽量化するために便利な PurgeCSS ですが、今回はあえて無効化しています。

理由としては、PurgeCSS は「HTMLやJS内に記述がないクラス名は使っていない」と判断し、削除してしまう特性があります。そのため、以下のようなケースで問題が起こる可能性があるのです。

Safari など特定ブラウザ向けのベンダープレフィックス付きCSS
JavaScript や WordPress の PHP テンプレートで動的に追加されるクラス
外部ライブラリ（SwiperやAOSなど）のクラス

PurgeCSS を使う際は、「どのクラスを残しておくか（＝safelist）」をしっかり指定する必要がありますが、それが少し面倒に感じたため、今回は一旦コメントアウトのままにしています。

package.jsonにスクリプトを登録

package.json の "scripts" セクションに以下を追記します。

"scripts": {
  "sass": "sass --watch scss:css",
  "build:css": "postcss css/main.css -o css/main.min.css --env production",
  "watch:css": "chokidar 'css/main.css' -c 'npm run build:css'",
  "dev": "concurrently \"npm run sass\" \"npm run watch:css\""
}

npm run sass
→ SCSS → CSS に変換（通常のSass）

npm run build:css
→ CSS → 圧縮されたCSS（min.css）を生成

npm run watch:css
→ main.css を監視して自動で min.css を更新

npm run dev
→ 上記2つを同時に実行するまとめコマンド！

自動化を実行

以下をターミナルで実行します。

npm run dev

これで、scss/main.scss を編集するたびに…

scss/main.scss
↓ Dart Sass によって
css/main.css
↓ PostCSS＋cssnano によって
css/main.min.css

このように、自動で圧縮されたCSSが生成されるようになります！

作業の流れ（再開するとき）

ターミナルを閉じたり、PCを再起動したりした後は、再度 npm run dev を手動で実行する必要があります。

たとえば次のような作業の流れになります。

VS Code を開く（テーマフォルダ）
ターミナルを開く
プロジェクトのフォルダに移動
npm run dev を実行
SCSS を編集する → 自動で main.css → main.min.css が生成

コマンドの違い一覧

コマンド	役割
`npm run sass`	`scss → css` に変換（Dart SassによるSCSSのコンパイル）
`npm run watch:css`	`css → min.css` に変換（PostCSSによるCSS圧縮処理の自動化）
`npm run dev`	上記2つの両方を同時に実行（SCSSからCSS、そしてmin.cssまで一括）