入力
ワークスペースを準備中…
使い方
- CSS を貼り付けるか、UTF-8 ファイルまたはサンプルを開きます。
- インデントを選ぶか「CSS を圧縮」を有効にし、処理を実行します。
- 結果を確認し、コピーまたはダウンロードします。
CSS の整形と圧縮の違い
整形はスタイルシートを読みやすくし、レビューを助けます。圧縮は省略可能な空白や通常のコメントを除き、テキストを小さくします。
どちらも最初に入力を解析します。整形には Prettier、圧縮には CSSTree を使います。圧縮はコンパクトな構文の生成であり、スタイルシート全体の最適化ではありません。
処理を選ぶ
整形は一貫したインデントと改行を付けます。プロジェクトに合わせて 2 または 4 スペースを選んでください。
圧縮は必要な空白と感嘆符で始まるライセンスコメントを残し、有効な CSS を詰めます。別の最適化ツールでさらに簡略化できる情報が残る場合もあります。
.card { color: red; padding: 8px; }.card{color:red;padding:8px}圧縮構文の例です。「CSS を圧縮」を選ぶとこの形式を生成できます。
解析と変換の範囲
未使用セレクターの削除、ルール結合、アセット URL の書き換え、インポート取得は行いません。元のアプリケーション環境で結果をテストしてください。
入力は CSS 用で、Sass や Less のプログラムには対応しません。解析エラーを表示し、入力や設定を変えた後は以前の結果をエクスポートできなくなります。
スタイルシートを出力する
コピーは現在の結果全体を出力し、ダウンロードは styles.css を保存します。元ファイルの編集やプロジェクトへの組み込みは行いません。
テキスト入力は最大 1 MiB。CSS と HTML の変換は Worker 内で実行し、制限時間は 30 秒です。色のツールは sRGB を使用します。生成したスタイルはプレビューのため、実際のレイアウトでテストしてください。
よくある質問
圧縮で未使用の CSS は削除されますか？
いいえ。構文を詰めるだけで、HTML の解析や使用中セレクターの判断はしません。
ライセンスコメントは残りますか？
/*! で始まるコメントは保持し、通常のコメントは削除します。追加の表示義務があるプロジェクトでは出力を確認してください。
Sass や Less を貼り付けられますか？
CSS を解析するツールであり、Sass・Less コンパイラーは実行しません。事前にコンパイルしてください。
入力を編集するとコピーできなくなるのは？
表示結果が以前の入力や設定に対応しているためです。選択した処理をもう一度実行してください。
スタイルシートはアップロードされますか？
いいえ。解析と変換はブラウザー内です。ファイルはローカルで読み込み、ダウンロードは新しい出力ファイルを作成します。