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

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

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

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

この記事でわかること

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

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

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

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

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

ローカル環境の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（コマンドラインインターフェース）」が必要です。

これを入れておくことで、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 を出力します。

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 を手動で実行する必要があります。

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

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

コマンドの違い一覧

たとえば…

npm run watch:css を使うと

• css/main.css を監視して、更新されたら css/main.min.css に圧縮だけ行う。
• つまり、「すでに main.css が更新された後」の話。
• SCSSの変更には反応しません。

npm run dev を使うと

• scss/main.scss の変更 → css/main.css に変換 → その main.css を監視 → main.min.css に圧縮
• 一連の流れが全部自動で行われるので、実務ではこれが便利です。

あわせて読みたい

【超初心者向け】Node.jsのインストールから始める！WordPressテーマでDartSassを使う方法 WordPressでオリジナルテーマを開発する際、「Sass（サス）」を使ってCSSを効率よく管理したいと考えている方も多いのではないでしょうか？私自身も事業サイトを制作す…