【PostCSSの使い方】Web制作でCSSを拡張させる方法【autoprefixer・cssnano・postcss-combine-media-query】

PostCSSという、CSSを拡張し、ベンダープレフィックスの追加などの処理を自動化するツールについて解説します。

PostCSSを使えば、オートプレフィクサーでブラウザ間の互換性を確保し、CSSをミニファイしてページの読み込み速度を向上させ、さらにメディアクエリをまとめて管理することができます。
この記事では、PostCSSの導入方法と基本的な使い方を紹介します。効率的なCSS管理で、プロジェクトの品質を向上させましょう。

なお、この記事ではNode.jsおよびnpmがインストールされており、npm-scriptsの基本的な知識があることを前提として進めます。

Node.jsのバージョン管理ツール「Volta」のインストール・導入方法・使い方を解説

【初心者】npm-scriptsの使い方、web製作・webデザイナー・コーダー向けに1番分かりやすく解説

PostCSSとは

PostCSSは、CSSを効率的に処理し、開発プロセスを向上させるツールです。

PostCSSは、柔軟性が高く様々なプラグインを使用して、CSSを拡張したり変換したりすることができます。
例えば、Autoprefixerプラグインを使うと、ベンダープレフィックスを自動的に追加することができます。

今回はWebサイトを公開する際に、ブラウザ間の互換性を確保し、読み込み速度を向上させることを目的として、以下の3つの処理をPostCSSで自動化する方法について解説します。

1. ベンダープレフィックスの追加
2. CSSのミニファイ化
3. 複数のメディアクエリをまとめる

はじめに（プロジェクトフォルダの準備）

プロジェクトフォルダを作成

今回のサンプルでは下記のようにstyle.cssファイルに対して、PostCSSを適用させる前提で進めていきます。

htdocs
└assets/
  └css/
    └style.css

プロジェクトフォルダを作成したら下記のコマンドでpackage.jsonを作成します。

npm init -y

パッケージのインストール

今回使用するパッケージは以下の5つです。

それでは以下のコマンドで上記のパッケージをインストールします。

npm i -D autoprefixer cssnano postcss postcss-cli postcss-combine-media-query

package.jsonファイルのdevDependenciesセクションに、以下のようにインストールしたパッケージが記載されたら成功です。

{
  "devDependencies": {
    "autoprefixer": "^10.4.19",
    "cssnano": "^6.1.2",
    "postcss": "^8.4.38",
    "postcss-cli": "^11.0.0",
    "postcss-combine-media-query": "^1.0.1"
  }
}

また、PostCSSはスクリプトに登録する方法として「設定(config)ファイルで登録する方法」と、「package.jsonファイルに直接処理を登録する方法」の2パターンあります。

それぞれのやり方について順番に説明していきます。

設定ファイルを使用してスクリプトに登録する方法

設定ファイルの作成

まずはPostCSSの設定を登録するために、設定ファイルを作成します。
package.jsonファイルと同じ階層にPoscCSSの設定ファイルpostcss.config.jsファイルを手動で作成します。

htdocs
└assets/
  └css/
    └style.css
└postcss.config.js
└package.json

設定ファイルに処理を登録

以下のようにpostcss.config.jsファイルに、先ほどインストールしたパッケージの処理を追加します。

module.exports = {
  plugins: {
    autoprefixer: {},
    cssnano: {},
    'postcss-combine-media-query': {},
  },
};

postcss-combine-media-queryはハイフンやアンダースコアを含む特殊な文字があるため、シングルクォートで囲まれています。

browserslistを登録

先ほど設定したautoprefixerを対応させるブラウザのバージョンの指定を行います。
package.jsonファイルの一番最後に、以下のようにbrowserslistセクションを追加します。

{
  "devDependencies": {
    ・・・
  },
  "browserslist": [
    "last 2 versions",
    "> 1%"
  ]
}

今回は以下のようにbrowserslistを設定しました。

詳しい書き方については以下のbrowserslist公式サイトからご確認ください。

browserslistは、ブラウザのバージョンを指定するための設定ファイルである.browserslistrcを作成して、設定することもできます。
しかし、プロジェクト内のファイル数を減らすために、今回は直接package.jsonファイルに設定を追加しています。

package.jsonファイルにスクリプトを登録

スクリプトでの対象ファイルの指定方法は、「ファイルを指定する方法」と「ディレクトリを指定する方法」の二つやり方があるので、それぞれ解説します。

ファイルを指定する方法

対象ファイルと出力ファイルを-oオプションで繋ぎます。
出力ファイル名は、好きなファイル名を指定して出力することも可能です。

{
  "scripts": {
    "postcss:output": "postcss assets/css/style.css -o assets/css/style.min.css"
  },
}

ディレクトリを指定する方法

対象ファイルが入っているディレクトリと、出力ディレクトリを-dオプションで繋ぎます。
出力元のディレクトリ内にある全ての.cssファイルを、指定した出力ディレクトリにPostCSSを適用した状態で出力されます。

{
  "scripts": {
    "postcss:dir": "postcss assets/css -d test/css"
  },
}

今回は以下のオプションを使用しました。
その他のオプションについてはpostcss-cli公式ページから確認してください。

それではstyle.cssに以下のように適当なコードを追加し、登録したスクリプトを実行して動作を確認してみましょう。

@media (width <= 767px) {
  p {
    transform: translateX(50%);
  }
}

@media (width <= 767px) {
  div {
    filter: drop-shadow(0px 0px 5px #ccc);
  }
}

出力されたCSSの中身に以下の処理が反映されていれば成功です。

1. ベンダープレフィックスの追加
2. CSSのミニファイ化
3. 複数のメディアクエリをまとめる

package.jsonに直接設定を登録する方法

最後にPostCSSを先ほどの設定ファイルを使用せずに、直接package.jsonファイルのscriptsセクションから設定する方法を解説します。設定ファイルがある場合はあらかじめ削除しておきます。

それでは設定方法の解説です。
設定方法は、先ほどのスクリプトに-uオプションでautoprefixerなどの使用するプラグインを指定します。

また、設定ファイルを使用しない場合はデフォルトでソースマップが生成されてしまうため、--no-mapオプションを追加してソースマップを無効化すれば完成です。

{
  "scripts": {
    "postcss": "postcss assets/css -d test/css --no-map -u autoprefixer cssnano postcss-combine-media-query"
  },
}

実際にスクリプトを実行して処理を確認してみましょう。

おわり

以上でPostCSSの使い方の解説でした。

プロジェクトによっては不要な箇所もあるかもしれませんので、それぞれカスタマイズをしてご自身のプロジェクトに活かしていいただけますと幸いです。