CSSコンバイナー
複数のCSSファイルを1つに結合
CSSファイル入力
結合済みCSS
CSS結合の例
複数のCSSブロックを1つのファイルに結合します。コメントでセクションを区切ります：
リセット、ベース、コンポーネント
コンバイナーはすべてのブロックを連結します。上のサンプルでさらにデータを読み込めます。
CSSコンバイナーとは？
CSSプロジェクトはスタイルを複数ファイル（リセット、ベース、コンポーネント、ユーティリティ）に分割することが多いです。CSSコンバイナーは本番用に1つのファイルに結合します。HTTPリクエストが減り読み込みが速くなります。W3C CSS仕様が言語を定義しています。ViteやWebpackなどのビルドツールはビルド時に行います。このツールはブラウザでオンデマンドで行います。
複数のCSSブロックを貼り付けるか、複数の.cssファイルをアップロードしてください。ツールは1つの出力に連結します。完全にブラウザ内で動作し、サーバーには何も送信されません。結果のフォーマットにはCSSフォーマッターを、ミニファイにはCSSミニファイアーを使用してください。
このツールの使い方
CSSを貼り付けまたはアップロード
複数のCSSブロックを左のエディターに貼り付けます（/* filename.css */のようなコメントで区切る）。またはアップロードをクリックして複数の.cssファイルを選択します。サンプルでサンプルデータを読み込めます。
結合出力を確認
右のパネルに結合されたCSSが表示されます。順序は保持されます。検証にはCSSバリデーターを。ベンダープレフィックス追加にはCSSプレフィクサーを使用してください。
CSS結合が役立つ場面
レガシープロジェクトや手作りサイトには多くのCSSファイルがあることがあります。結合するとリクエストが減りデプロイが簡単になります。BootstrapやTailwindはビルドパイプラインを使用します。このツールは手動のクイックオプションを提供します。HTMLからCSSを抽出するにはCSSエクストラクターを使用してください。
結合出力のフォーマットにはCSSフォーマッターを。インラインスタイル（例：メール）にはCSSをインラインにを。プリプロセッサ間の変換にはCSSをSCSSにまたはCSSをLessにを使用してください。
よくある質問
データはプライベートですか？
はい。結合は完全にブラウザ内で行われます。データはサーバーに送信されません。
@importは？
ツールはテキストをそのまま結合します。@importのURLは解決しません。必要に応じてインポート内容を手動で含めるか貼り付けてください。
複数ファイルをアップロードできますか？
はい。アップロードボタンで複数の.cssファイルを選択できます。選択順に結合されます。
ファイルの順序は重要ですか？
はい。詳細度が同じ場合、後のルールが前のルールを上書きします。カスケードの適用順にファイルを並べてください。