IntelliJ IDEA 2026.1 Help

CSS の最小化

縮小または 圧縮とは、ソースコードの機能を変更せずに、スペース、新しい行、コメントなどの不要な文字をすべて削除することを意味します。 開発およびデバッグ中、これらの文字によりコードが読みやすくなります。 実稼働段階では、転送されるコードのサイズを増やすだけです。

ほとんどの場合、圧縮は webpack(英語) などのツールを使用してビルドプロセスのステップとして実行されます。 ビルドツールを使用していない場合は、 CSSO(英語) や cssnano(英語) などのスタンドアロンツールを使用できます。

コードを自動的に縮小するには、縮小ツールをインストールし、ファイルへの変更を追跡して縮小ツールを実行する File Watcher を構成する必要があります。

デフォルトでは、File Watcher のスコープ内の CSS ファイルが変更されて保存されるとすぐに縮小が開始されます。 ツールを呼び出す他のイベントを指定することもできます。 詳細については、 File Watchers を参照してください。

生成された縮小コードは、ソース CSS ファイルの名前と拡張子 min.css を持つ別のファイルに保存されます。 この生成されたファイルの場所は、 新規ウォッチャーダイアログの リフレッシュする出力パス フィールドで定義されます。 ただし、 プロジェクトツリー では、縮小コードを含むファイルは、ノードとして表示されるソース CSS ファイルに表示されます。 このデフォルトの表示を変更するには、 プロジェクト ツールウィンドウ (Alt+1) で ファイルのネストを構成してください。

以下の例は、CSSO を使用して IntelliJ IDEA から直接 CSS コードを縮小する方法を示しています。

サンプル: CSSO を使用して CSS を圧縮する

コードを自動的に縮小するには、CSSO をインストールし、ファイルへの変更を追跡してツールを実行する CSSO ファイルウォッチャーを構成する必要があります。

デフォルトでは、File Watcher のスコープ内の CSS ファイルが変更されて保存されるとすぐに縮小が開始されます。 CSSO を 呼び出す他のイベントを指定することもできます。 詳細については、 File Watchers を参照してください。

生成された縮小コードは、ソース CSS ファイルの名前と拡張子 min.css を持つ別のファイルに保存されます。 この生成されたファイルの場所は、 新規ウォッチャーダイアログの リフレッシュする出力パス フィールドで定義されます。 ただし、 プロジェクトツリー では、縮小コードを含むファイルは、ノードとして表示されるソース CSS ファイルに表示されます。 このデフォルトの表示を変更するには、 プロジェクト ツールウィンドウ (Alt+1) で ファイルのネストを構成してください。

始める前に

  1. お使いのコンピューターに Node.js(英語) がインストールされていることを確認してください。

  2. 設定で CSS プラグインが有効になっていることを確認します。 Ctrl+Alt+S を押して設定を開き、 プラグイン を選択します。 インストール済み タブをクリックします。 検索フィールドに CSS と入力します。 プラグインに関する詳細は、 プラグインの管理を参照してください。

  3. JetBrains マーケットプレイスからプラグインをインストールする説明に従って、 設定 | プラグイン ページの Marketplace タブに File Watchers プラグインをインストールして有効にします。

csso-cli をグローバルにインストールする

  • 組み込み ターミナル (Alt+F12) で次のように入力します。

    npm install -g csso-cli

CSSO ファイルウォッチャーを作成する

  1. 設定 ダイアログ (Ctrl+Alt+S) で、 ツール の File Watchers をクリックします。 開く File Watchers ページには、構成済みのファイルウォッチャーのリストが表示されます。

  2. Add button をクリックするか、 Alt+Insert を押して、リストから CSSO CSS オプティマイザー 定義済みテンプレートを選択します。

    CSSO ウォッチャーを作成する: 追加をクリックしてテンプレートを選択する

    「新規ウォッチャー 」ダイアログが開きます。

  3. プログラム フィールドで、 csso 実行可能ファイルの場所を指定します。

    csso-cli を Node パッケージマネージャー経由でインストールした場合、IntelliJ IDEA はパッケージ自体を検出し、フィールドに csso エイリアスを自動的に入力します。それ以外の場合は、パスを手動で入力するか、 をクリックして、開いたダイアログでファイルの場所を選択します。

  4. デフォルトの File Watcher 設定を受け入れるか、必要に応じて File Watchers の説明に従って再構成します。

    この例では、デフォルト値は次のとおりです。

    • 引数 フィールドの -i $FileName$ -o $FileNameWithoutExtension$.min.css

    • リフレッシュする出力パス フィールドの $FileNameWithoutExtension$.min.css

    • 作業ディレクトリ フィールドの $FileDir$

    CSSO ウォッチャーを作成する: デフォルト設定の新しいウォッチャーダイアログ

    OK をクリックすると、新しい File Watcher がリストに追加される File Watchers ページに戻ります。

    CSSO ウォッチャーを作成する: リストに追加された新しいウォッチャー

  5. 有効 チェックボックスが選択されていることを確認します。

    デフォルトでは、File Watcher は現在のプロジェクトで使用できます。 他のプロジェクトで使用するには、 レベル リストから グローバル を選択します。

2026 年 3 月 30 日
CSSSass、SCSS、Less、PostCSS