PostCSSという、CSSを拡張し、ベンダープレフィックスの追加などの処理を自動化するツールについて解説します。
PostCSSを使えば、オートプレフィクサーでブラウザ間の互換性を確保し、CSSをミニファイしてページの読み込み速度を向上させ、さらにメディアクエリをまとめて管理することができます。
この記事では、PostCSSの導入方法と基本的な使い方を紹介します。効率的なCSS管理で、プロジェクトの品質を向上させましょう。
なお、この記事ではNode.jsおよびnpmがインストールされており、npm-scriptsの基本的な知識があることを前提として進めます。
INDEX
PostCSSとは
PostCSSは、CSSを効率的に処理し、開発プロセスを向上させるツールです。
PostCSSは、柔軟性が高く様々なプラグインを使用して、CSSを拡張したり変換したりすることができます。
例えば、Autoprefixer
プラグインを使うと、ベンダープレフィックスを自動的に追加することができます。
今回はWebサイトを公開する際に、ブラウザ間の互換性を確保し、読み込み速度を向上させることを目的として、以下の3つの処理をPostCSSで自動化する方法について解説します。
- ベンダープレフィックスの追加
- CSSのミニファイ化
- 複数のメディアクエリをまとめる
はじめに(プロジェクトフォルダの準備)
プロジェクトフォルダを作成
今回のサンプルでは下記のようにstyle.css
ファイルに対して、PostCSSを適用させる前提で進めていきます。
htdocs
└assets/
└css/
└style.css
プロジェクトフォルダを作成したら下記のコマンドでpackage.json
を作成します。
npm init -y
パッケージのインストール
今回使用するパッケージは以下の5つです。
パッケージ | 概要 |
---|---|
postcss | PostCSSを利用できる |
postcss-cli | PostCSSをコマンドから利用できるようにする |
autoprefixer | ベンダープレフィックスを自動で付与する |
cssnano | CSSを圧縮する |
postcss-combine-media-query | 同じブレイクポイントのメディアクエリを一つにまとめる |
それでは以下のコマンドで上記のパッケージをインストールします。
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
はハイフンやアンダースコアを含む特殊な文字があるため、シングルクォートで囲まれています。
パッケージ | 概要 |
---|---|
autoprefixer | ベンダープレフィックスを自動で付与する |
cssnano | CSSを圧縮する |
postcss-combine-media-query | 同じブレイクポイントのメディアクエリを一つにまとめる |
browserslist
を登録
先ほど設定したautoprefixer
を対応させるブラウザのバージョンの指定を行います。package.json
ファイルの一番最後に、以下のようにbrowserslist
セクションを追加します。
{
"devDependencies": {
・・・
},
"browserslist": [
"last 2 versions",
"> 1%"
]
}
browserslist
Browserslistは、ウェブ開発者がサポートするブラウザを定義し、自動的にベンダープレフィックスやポリフィルを生成するためのツールです。
今回は以下のようにbrowserslist
を設定しました。
browserlist | 概要 |
---|---|
last 2 versions | 各ブラウザの最新2つのバージョンをサポートする |
> 1% | 全体のユーザーシェアのうち1%以上のブラウザをサポートする |
詳しい書き方については以下の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公式ページから確認してください。
postcss-cliのオプション | 概要 |
---|---|
-o, --output | ファイルを対象にPostCSSを適用させる |
-d, --dir | ディレクトリ内の全てのファイルを対象にPostCSSを適用させる |
それではstyle.css
に以下のように適当なコードを追加し、登録したスクリプトを実行して動作を確認してみましょう。
@media (width <= 767px) {
p {
transform: translateX(50%);
}
}
@media (width <= 767px) {
div {
filter: drop-shadow(0px 0px 5px #ccc);
}
}
出力されたCSSの中身に以下の処理が反映されていれば成功です。
- ベンダープレフィックスの追加
- CSSのミニファイ化
- 複数のメディアクエリをまとめる
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-cliのオプション | 概要 |
---|---|
-u, --use | 使用する postcss プラグインのリスト |
--no-map | デフォルトのインラインソースマップを無効にする |
実際にスクリプトを実行して処理を確認してみましょう。
おわり
以上でPostCSSの使い方の解説でした。
プロジェクトによっては不要な箇所もあるかもしれませんので、それぞれカスタマイズをしてご自身のプロジェクトに活かしていいただけますと幸いです。