CSS整形・圧縮
CSS Beautifier & Minifier
並べ替えを一切せずにCSSを整形または圧縮し、トークンの並びをそのまま保ちます。
スタイルシートを読める形に開くか、小さくしたいときは削ぎ落とします。どちらの向きも実行のたびにトークン列と突き合わせるので、出力は空白だけが違う同じスタイルシートです。ショートハンドをまとめることも、色を短くすることも、規則を並べ替えることもしません。
CSS 入力
.css ファイルを置く
このタブの中で読みます。アップロードはしません。
整形結果
規則
5
セレクタ
9
宣言
9
アットルール
1
カスタムプロパティ
2
使い方
CSSを貼り付けるか、ファイルをドロップします
入れ子のat-rule、カスタムプロパティ、`:is()`をはじめとする新しいセレクタも、すべてパースします。パネルの下の統計が、規則・セレクタ・宣言・カスタムプロパティの数をその場で数えます。
使っている体裁に合わせて整形します
インデント幅、セレクタを1行に1つ書くか複数書くか、規則のあいだの空行、コメントを残すか落とすか。スタイルシートごとに実際に食い違うのは、この4つです。
あるいは圧縮して、ライセンス表記は残します
`/*!`の慣例は、圧縮しても残らなければならないコメントを表します。この切り替えがそれを守り、前後の大きさと削減量が、そもそもやる価値のあることだったのかを教えてくれます。
よくある質問
`#ffffff`を`#fff`に縮めないのはなぜですか
「安全な」書き換えのそれぞれに、安全でないスタイルシートが1つずつあるからです。色を縮める、ショートハンドをまとめる、宣言を並べ替える、「重複した」規則を落とす——どれもどこかで動作を変えます。ページを黙って壊す圧縮ツールは、バイトを減らせない圧縮ツールより悪いものです。どのみちgzipが差の大部分を取り戻します。
報告される「字句の問題」とは何ですか
トークナイザが解釈できなかった場所です。閉じていないコメント、ファイルの最後まで続く文字列、対になっていない波括弧といったものです。バイトオフセットとともに知らせ、整形自体は続けます。規則が1つ壊れているスタイルシートにも、読む値打ちはあるからです。
ベンダープレフィックスを付けてくれますか
付けません。プレフィックスを付けるには、対象とするブラウザの範囲と、プロパティごとに何が必要かのデータベースが要り、どちらも毎月変わります。それはAutoprefixerの仕事で、まともにやるにはビルドの工程が必要です。
セミコロンの入ったURLがあっても壊れませんか
壊れません。`url(dots;grid.png)`も、`content: "{ not a block; }"`のような文字列も、中の約物で切らずに1つの値としてトークン化します。素朴なフォーマッタが間違える場所なので、ページの例にわざと入れてあります。
ここから渡せます
スプライトシート作成
Sprite Sheet Packer
多数の画像を1枚のアトラスに詰め、対応するCSSかJSONの座標表を一緒に書き出します。
HTML整形・圧縮
HTML Beautifier & Minifier
HTMLを整形または圧縮し、インライン要素は保ったまま空白をどこまで詰めるかを選べます。
JavaScript整形・圧縮
JavaScript Beautifier & Minifier
名前は一切変えずにJavaScriptやTypeScriptからコメントと空白だけを落とし、1行に潰れたバンドルは読めるところまでインデントし直します。
CSSグラデーション作成
CSS Gradient Builder
停止点をドラッグして線形・円形・扇形のグラデーションを作り、sRGBまたはOKLCHのCSSを出力します。
次の一手
このツールが出したものをそのまま受け取れる道具です。
CSSトークン抽出
CSS Token Extractor
スタイルシートから色・余白・角丸・書体の値を拾い出し、カスタムプロパティの一式を提案します。
HTML整形・圧縮
HTML Beautifier & Minifier
HTMLを整形または圧縮し、インライン要素は保ったまま空白をどこまで詰めるかを選べます。
JavaScript整形・圧縮
JavaScript Beautifier & Minifier
名前は一切変えずにJavaScriptやTypeScriptからコメントと空白だけを落とし、1行に潰れたバンドルは読めるところまでインデントし直します。
SVGをCSSデータURIに
SVG to CSS Data URI
SVGをCSS背景用のデータURIに符号化し、必要な文字だけをエスケープして短く保ちます。
Base64エンコード・デコード
Base64 Encoder & Decoder
テキストでもファイルでもBase64とBase64URLを符号化・復号し、UTF-8も正しく扱います。
curlをコードに変換
curl to Code
curlのコマンドをfetch・axios・Pythonのrequests・Go・PHP・PowerShellのコードに変換します。