01
入力の行番号を見る
サンプルにはカスタムプロパティと@mediaが含まれます。規則一覧は整形後ではなく入力の行を指します。
HTML / CSS Dev Tools
CSS整形元の規則を見失わない
整形・圧縮・構文チェックを明示的に実行します。入力を変えると古い結果は保存できません。
CSS整形
CSSはこのブラウザー内で処理され、送信や履歴保存はされません。
規則一覧
操作後にセレクターと@ルールを表示します。
CSSを入力して操作を選んでください。
圧縮されたスタイルシートでは、後ろの宣言による上書きや@mediaの範囲が見えにくくなります。CSS整形は元の順序を保ったまま改行と字下げを加え、入力と結果を並べて確認できます。
CSS圧縮は配布用の短い出力、CSS構文チェックは括弧などの構造を調べる操作です。CSS整形の結果を次の操作に流用せず、毎回元のCSSから処理します。
CSS整形で確認しやすくなる点
読みやすい出力と元の行番号を両立します。
宣言の順序を変えない
CSS整形は同じプロパティの重複やコメントを整形結果に残します。見た目だけを整理し、意図した上書き順序を勝手に並べ替えません。
元のセレクターへ戻れる
規則一覧にはセレクターと@ルールの元の行番号が並びます。項目を選ぶと入力へ移動し、構文エラーも行と列から追えます。
元の行を基準に確認する
02
目的ごとに実行する
初期値は2スペースです。4スペースやタブへ変更できます。圧縮と検査は整形結果ではなく元の入力から実行されます。
03
新しい結果だけを書き出す
入力や字下げを変えるとコピーと保存が無効になります。再実行すると使えます。Ctrl/Cmd+Enterは整形のショートカットです。
一つの入力で三つの確認
読みやすい整形
コメント、入れ子の規則、宣言の順序を維持して改行します。CSSフォーマッターやCSS美化を探している場合にも使える表示です。
余分な文字の圧縮
不要な空白と通常のコメントを削除しますが、宣言を並べ替えたり色や単位を書き換えたりしません。
規則一覧と行移動
セレクターと@ルールを元のソース位置とともに表示します。長い一覧は50件ずつ開きます。
検査できる範囲とできない範囲
- ブラウザー互換性は判定しない
- 構文の構造は調べますが、個々のCSS機能が対象ブラウザーで使えるかまでは保証しません。
- SCSSやSassは対象外
- CSS整形は標準CSS用です。変数やmixinなどの前処理構文は専用のコンパイラーで変換してから入力してください。
- 並べ替えや自動修復はしない
- 重複宣言と元の順序を維持します。圧縮でも規則の統合や値の短縮は行いません。
- 実際のページは再現しない
- HTMLや他のスタイルシートがないため、ここでは表示結果をプレビューできません。URL取得や入力履歴の保存も行いません。
CSS整形についてのよくある質問
整形とminifyはどう違いますか？
整形は読みやすい改行と字下げを追加し、圧縮は不要な空白と通常のコメントを減らします。どちらも元の入力から実行します。
プロパティを並べ替えても安全ですか？
後に書いた宣言が前の宣言を上書きする場合があります。このページでは並べ替えを行わず、元の順序を維持します。
SCSSやSassも整形できますか？
いいえ。標準CSSのみを対象にしています。前処理構文は専用ツールでコンパイルしてください。
メディアクエリやCSS変数、calc()も扱えますか？
標準CSSとして解析できるものは整形できます。@mediaは規則一覧にも表示されますが、ブラウザー対応の判定は別途必要です。
クラス名の変更がどこに影響するか調べられますか？
規則一覧でこの入力内のセレクターを探せます。ただしHTMLやJavaScriptは読み込まないため、プロジェクト全体の参照箇所は調べられません。
疑問が残りましたか？