コード整形 / MULTIVERTO

CSS を整形

ルールと宣言を表示するために CSS スタイルシートをインデントします。

変換ツール入力内容はこのブラウザ内にとどまり、変換のために送信されません。

CSS - 入力

CSS - 結果

ローカルファイルを開くファイルはブラウザー内にとどまります。

ツールを連結

前の結果に各テキストツールを適用します。テキスト変換ワークフロー ↗

次のツールを選択

手順の名前

保存した手順

このブラウザーには手順の名前とツールの順序だけを保存します。入力内容と結果は保存しません。

01 / 例

例

入力h1{color:#334155;margin:0;}p{line-height:1.5;}

結果

h1 {
  color:#334155;
  margin:0;
}
p {
  line-height:1.5;
}

02 / ガイド

CSS を整形 — 仕組み

このツールで変わること

CSS のルールと宣言を読みやすくするため、インデントと改行を付けます。短いスタイルシートでセレクターや宣言が一行に詰め込まれているときに使ってください。結果ではルールや宣言の境界を行ごとに追えるため、閉じ波括弧の位置を確認しやすくなります。対応する構文のトークンは保ちますが、プロパティーを並べ替えたり、あるセレクターが実際のページで使われているかを判断したりはしません。

対応する構文と制約

CSS にはセレクター、@ 規則、宣言ブロック、値、コメントがあります。セレクターの間の空白が子孫関係を表す場合があるため、空白を無差別に変更すると適用先が変わります。文字列、calc() のような関数、カスタムプロパティー、URL にも区切りに見える記号が含まれます。この整形器は文字列やコメント、入れ子を見て配置を調整しますが、カスケードの結果やブラウザーの対応状況を評価するものではありません。

実際に使うときの手順

整形はコードの確認やデバッグで特に役立ちます。インデントを見ると、入れ子の不足や予期しない同階層の要素を発見しやすくなります。全体像が分かる代表的な断片を貼り付け、一度整形してください。最も外側の構造から内側へ読み、各要素、ブロック、句がどこで始まり終わるか確認します。このページは言語のあらゆる拡張に対応するコンパイラーではありません。この例では「h1{color:#334155;margin:0;}p{line-height:1.5;}」から、簡潔に表示した結果「h1 { ⏎ color:#334155; ⏎ margin:0; ⏎ } ⏎ p { ⏎ line-height:1.5; ⏎ }」が得られます（⏎は改行を表します）。単語だけでなく句読点も読み、元の一箇所を変えて結果の同じ箇所を比べてください。CSS では @media の内側と直後に規則を一つずつ置いてください。展開された波括弧を読めば、それぞれの適用範囲が分かります。両方のセレクターが一致するページで元と整形後を比較してください。閉じ括弧の位置が誤ると、優先される宣言が変わる可能性があります。

結果を検証する

メディア規則やセレクターの範囲を追いにくいスタイルシートで使います。整形結果の波括弧と宣言を順に読み、子孫セレクターの空白が保たれているか比べてください。整形器は、あるプロパティーにブラウザーが対応するか、カスケードで意図した要素に適用されるかまでは判断しません。まず小さな例を整形して表示を確認し、元の CSS も保存します。ファイルの行数だけでなく、セレクター名、引用文字列、非 ASCII 文字、改行を比べてください。

入力から出力への変換過程

CSS - 入力

構文を読み取り、形式を変換

CSS - 結果

ガイドを探す

変換ガイド