01 / 例
例
入力
h1 { color: #334155; margin: 0; }
p { line-height: 1.5; }結果
h1{color:#334155;margin:0}p{line-height:1.5}コード整形 / MULTIVERTO
CSS を最小化
CSS スタイルシートから安全なレイアウトの空白を削除します。
変換ツール入力内容はこのブラウザ内にとどまり、変換のために送信されません。
ファイルはブラウザー内にとどまります。
ツールを連結
02 / ガイド
CSS を最小化 — 仕組み
このツールで変わること
CSS のレイアウト上の空白を、意味が変わらない範囲で減らします。通常のコメントと、波括弧、コロン、セミコロンの周囲にある一部の空白を取り除きます。一方、セレクターの要素を区切る空白は選択対象を変える可能性があるため注意が必要です。結果を採用する前に元のスタイルシートと表示ページを比べ、カスタムプロパティーや関数の値を使う箇所を重点的に確認してください。
対応する構文と制約
このコンパクト化は通常のコメントと選択した配置用空白を減らす、保守的な処理です。複雑な CSS のすべてを解析して書き換える本番用の最小化ツールより対応範囲を絞っています。文字列や URL の内容、セレクター間の必要な区切りが保たれているか、変換後の CSS を実際のページに適用して確認してください。ファイルが短くなっても、描画や読み込み時間が必ず改善したとは限りません。
実際に使うときの手順
機械が結果を読み、人向けのインデントが不要なときにコンパクト化が役立ちます。まず元の内容が正しく動作することを確認し、この操作が何を除いたか見てください。本番用の最適化ツールと同じ削減率を約束するものではありません。その種のツールは文法全体を解析し、識別子を書き換え、定数をまとめ、シリアライズ後に圧縮する場合があります。ここでは保守的に処理し、不確かな構文は保持するかエラーにします。このページの実例では「h1 { color: #334155; margin: 0; } p { line-height: 1.5; }」が「h1{color:#334155;margin:0}p{line-height:1.5}」になります。単語だけでなく句読点も読み、元の一箇所を変えて結果の同じ箇所を比べてください。短くした CSS にも引用符付き URL やデータ値が残ります。句読点を含む背景画像の URL と、演算子の周りに空白を要する calc 式を試してください。宛先のビルド工程にも最小化器があるなら、同じ規則で処理すると思い込まず、その結果を別途比較します。
結果を検証する
短い CSS をテキスト欄へ貼る前に使えます。バイト数だけでなく、変換後のページの描画を確認してください。子孫セレクターの空白、content 内の文字列、calc() 内の空白には意味があり得ます。本番のビルド工程ではベンダープレフィックス付与や結合など、この保守的な処理より多くを行う場合があります。元のスタイルを残し、引用文字列、URL、カスタムプロパティー、改行の差を見てから置き換えてください。
CSS - 入力
構文を読み取り、形式を変換
CSS - 結果
ガイドを探す