JetBrains Rider 2026.1 Help

CSS の最小化

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

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

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

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

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

以下の例では、CSSO を利用して JetBrains Rider から直接 CSS コードを縮小する方法を示します。

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

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

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

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

始める前に

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

  2. 設定 | プラグイン ページ、タブ インストール済み で、必要な CSS および File Watchers プラグインが有効化されていることを確認してください。 詳細については、 プラグインの管理を参照してください。

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

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

    npm install -g csso-cli

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

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

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

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

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

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

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

  4. デフォルトのファイルウォッチャー設定を受け入れるか、必要に応じて File Watchers の説明に従って再構成してください。

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

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

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

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

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

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

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

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

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

2026 年 6 月 12 日
CSSSass、SCSS、Less、PostCSS