CSSをフォーマットして読みやすく整える方法
CSSを入力し、beautifyまたはminifyとインデント幅を選んで実行すると、CSSを読みやすく、または空白を減らした形に整えられます。空または空白だけの入力では、結果も空になります。
CSS整形の目的とモードの選び方
CSS Formatterは、CSSコードのインデントや改行を整えて、内容を確認しやすくするためのツールです。CSSを入力した後、読みやすさを優先するbeautify、または空白を減らすminifyを選べます。既存のCSSをレビュー用に見やすくしたいときや、記述をコンパクトに整えたいときに使い分けてください。
整形はコードの見た目をそろえる処理です。入力したCSSの意味を検証する用途ではないため、整形後の内容も必要に応じて確認しましょう。
CSSを入力して整形結果を確認する手順
- CSSコードを入力欄に貼り付けます。文字列として入力できるCSSテキストを用意してください。入力が空、または空白だけでも処理できますが、その場合の結果は空になります。
- 整形方法を選択します。改行とインデントで構造を見やすくするならbeautify、ブロックコメントを削除し、空白をまとめて短く整えるならminifyを指定します。モードを指定しない場合はbeautifyとして扱われます。
- インデント幅を設定します。空でないCSSでは、0から8までの整数を指定できます。通常の読みやすさを重視する場合は2を基準にし、プロジェクトの記法に合わせて調整してください。
- 実行して、出力されたCSSを確認します。beautifyでは宣言が改行され、階層に応じたインデントが付いた形を確認できます。minifyでは波括弧、セミコロン、コロンの周囲にある空白も取り除かれます。
- 結果が意図したモードになっているか、コメントや空白の変化が作業目的に合っているかを見直します。入力を文字列以外の値で渡した場合や、処理条件を満たさない場合は成功しないことがあります。
出力に反映される整形内容と境界
空でない入力では、インデント値を整数として扱います。0から8の範囲に入らない値や整数に変換できない値は2に置き換えられるため、意図した幅にならないときは設定を見直してください。空白だけの入力はこの正規化より先に空の結果となります。
入力が1,000,000 UTF-8バイトを超える場合は、整形前に失敗します。一方、空白だけの入力はサイズ確認を経ずに処理されます。空でないCSSでは、整形に必要な機能が利用できない場合にも処理が失敗する可能性があります。
minifyの結果は、ブロックコメントの削除や空白の圧縮を含みます。出力が短くなったことだけでCSSの妥当性や規格への適合が確認できたとは判断せず、必要なら別の確認手段も併用してください。
使用例
1行に詰めたカード用CSSを、レビューしやすい複数行の形に整えたい状況です。
.card{color:red;margin:0}を入力し、beautifyとインデント幅2を選択して実行します。
beautifyではセレクター、波括弧、宣言が改行され、指定したインデント幅で階層がそろった結果になります。
制限事項
- このツールはCSSの見た目を整えるものであり、妥当性や規格への適合を判定するものではありません。
よくある間違い
- CSSテキストではなく文字列以外の値を渡すと、入力形式の確認で失敗することがあります。入力欄にはCSSをテキストとして貼り付け、値の種類を見直してから再実行してください。
よくある質問
CSSを入力しない場合はどうなりますか？
空または空白だけの入力は、空の結果として成功します。この条件では、サイズやインデント、モードの確認より前に処理が終わります。
インデント幅は何を指定すればよいですか？
空でないCSSなら、インデント幅は0から8の整数を指定できます。変換できない値や範囲外の値は2に置き換えられるため、迷ったときは2から試してください。
beautifyとminifyは何が違いますか？
モード欄を空にしたときの既定値はbeautifyです。minifyを選択すると、ブロックコメントや空白を減らし、記号の周囲も詰めた結果になります。