CSS Academy · レッスン

Autoprefixerとcssnano

Q: 「Autoprefixerとcssnano」で何を学びますか？

Autoprefixerでベンダープレフィックスを自動追加し、cssnanoでCSSの出力を圧縮します。 ブラウザで直接実行するハンズオンコードでCSS Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Autoprefixerでベンダープレフィックスを自動追加し、cssnanoでCSSの出力を圧縮します。

「Autoprefixerとcssnano」はCoddyKit上の無料CSS Academyレッスンです。これはレッスン2/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはCSS Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 CSS Academyコースには全4レッスンが含まれています。

Autoprefixer とは

Autoprefixer は、サポート対象のブラウザーに応じて、Can I Use のデータを使用しながら CSS プロパティにベンダープレフィックス（-webkit-、-moz-、-ms-）を自動的に追加する PostCSS プラグインです。

Autoprefixer の仕組み

プレフィックスなしの標準 CSS を記述します。Autoprefixer は Browserslist の設定を読み取り、ビルド時に対象ブラウザーに必要なプレフィックスを追加します。

<div class="flex">Flexbox row (display: flex — Autoprefixer would add -webkit-box/-ms-flexbox for older targets)</div>

Browserslist の設定

Autoprefixer は Browserslist を使用して対象ブラウザーを決定します。.browserslistrc または package.json に定義します。

# .browserslistrc
> 1%
last 2 versions
not dead

PostCSS に Autoprefixer を追加する

PostCSS の設定に autoprefixer を含めます。

// postcss.config.js
const autoprefixer = require('autoprefixer');

module.exports = {
  plugins: [autoprefixer]
};

cssnano とは

cssnano は、空白、コメント、冗長な宣言を削除し、安全な最適化を適用することで CSS を圧縮し、可能な限り小さい CSS ファイルを生成する PostCSS プラグインです。

cssnano のプリセット

cssnano には最適化用のプリセットがあります。

default：安全な圧縮（空白、コメント、重複の削除）
advanced：詳細度が変わる可能性のある積極的な最適化（慎重に使用してください）

// postcss.config.js
const cssnano = require('cssnano');

module.exports = {
  plugins: [
    cssnano({ preset: 'default' })
  ]
};

cssnano の処理内容

cssnano では、次のような最適化が行われます。

空白とコメントを削除する
色を最短形式に変換する（#ffffff → #fff）
同一のルールを結合する
冗長なプロパティを削除する
ゼロの値を短縮する（0px → 0）

両方を設定に組み込む

両方のプラグインを使用する本番環境向けの PostCSS 設定です。

module.exports = {
  plugins: [
    require('autoprefixer'),
    process.env.NODE_ENV === 'production' && require('cssnano')({ preset: 'default' })
  ].filter(Boolean)
};

圧縮時のソースマップ

開発ビルドで cssnano を使用する場合は、必ずソースマップを生成してください。ソースマップにより、圧縮された出力を元の CSS に対応付けて DevTools でデバッグできます。

cssnano の代替手段

その他の CSS 圧縮ツールには、clean-css、lightningcss（Rust ベースで非常に高速）、Vite の内部 CSS 圧縮ツール（esbuild を使用）など、ビルドツールに組み込まれた圧縮ツールがあります。

クイックチェック

Autoprefixer が CSS に追加するベンダープレフィックスは、何によって決まりますか？

まとめ

Autoprefixer は Browserslist で指定した対象ブラウザーに基づいてベンダープレフィックスを自動的に追加するため、プレフィックスを手動で記述する必要がありません。cssnano は空白やコメントを削除し、安全な最適化を適用して CSS を圧縮します。本番環境の PostCSS パイプラインでは、両方を使用してください。最新の CSS では以前よりプレフィックスが少なくて済みますが、実際の対象ブラウザーで確認してください。

よくある質問