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