Cookie の使用について.本サイトでは、基本機能の提供に必要な必須 Cookie を使用しています。さらに、同意いただいた場合に限り、アクセス解析 Cookie を利用して利用状況を把握し、サービス改善に役立てます。詳しくは .
Cookie の使用について.本サイトでは、基本機能の提供に必要な必須 Cookie を使用しています。さらに、同意いただいた場合に限り、アクセス解析 Cookie を利用して利用状況を把握し、サービス改善に役立てます。詳しくは .
このツールは使いやすかったですか？
フィードバックは改善に役立ちます
整理CSS代码格式，提升可读性和维护性，支持自定义缩进规则
概要
解決できる課題、処理の仕組み、データの範囲を確認できます。
CSS整形は、圧縮されて一行になったスタイルシートや、空白のばらついたコードを、規則のまとまりが見える形に並べ直す処理です。たとえば .card{color:#333;margin:0 auto} のような入力を、セレクター、波かっこで囲まれた宣言ブロック、プロパティと値の関係を追いやすい表示にします。出力を読む人がルールの境目や入れ子を探しやすくするための整形です。
CSSではスタイル規則のほか、条件などを記述するアットルールも使われます。W3CのCSS Syntax仕様は、スタイルシートの構造や構文解析の基本を説明しています。ここで行うのは見た目の整形であり、CSSの構文検証や表示結果の診断ではありません。入力した宣言や値を意図どおりに修正する機能とも異なります。
使い方
手順に沿って操作し、例を使って入力と結果を確認します。
整形したいスタイルシートまたは短い規則を入力欄に貼り付けます。HTML全体やSCSSのソースではなく、CSSとして扱いたいテキストを用意してください。
字下げ幅は2・4・8スペースから選べます。スペースの代わりにタブを使う設定もあります。設定変更後は出力が自動で更新されるので、チームの規約や読みやすさに合わせて選択します。
入力欄と結果欄に文字数・行数が表示されます。結果をコピーするか、formatted.css としてダウンロードできます。既存ファイルを置き換える前に差分を確認してください。
.card{color:#333;margin:0 auto}整形すると、セレクターと宣言ブロックの位置関係が複数行で追いやすくなります。値の意味やプロパティの組み合わせは入力どおりです。出力では字下げ幅を変えたときに、ブロック内の見た目がどう変わるかを確認できます。
活用例
仕事や日常の流れの中での活用方法を紹介します。
ビルド済みの一行CSSを受け取った開発者が、ルールのまとまりを見つけるために整形します。変更箇所の判断や修正は、元のプロジェクトと照合して行います。
不具合の相談にCSS断片を添えるとき、インデントをそろえて共有すれば、セレクターと宣言の対応を読み手が追いやすくなります。
短い規則を整形して、波かっこの内側に宣言が並ぶ構造を確認できます。見た目の整形を、構文が正しいことの判定と混同しないようにしましょう。
Q&A
よくある疑問や迷いやすい点をまとめて確認できます。
このページの対象はCSSです。変数、mixin、補間などのプリプロセッサ構文をコンパイルしたり、SCSS・Less用の整形規則で処理したりする機能は確認できません。必要に応じて対応するツールでCSSへ変換してから使ってください。
いいえ。整形はレイアウトを整える処理で、構文エラーの検出・修復やブラウザー互換性の確認は行いません。波かっこ、コメント、文字列などに不自然な箇所があれば、CSS検証機能や開発環境でも確認してください。
圧縮への切替項目はありますが、CSS圧縮のページに移動します。整形ページを開いた時点では美化モードです。目的に応じて整形と圧縮のページを選んでください。
空白の変更だけで意味が変わらないとは一概に保証できません。特に空白を含む文字列や、複雑なカスタムプロパティ、崩れた入力は結果を慎重に比較してください。変更後はブラウザー表示やプロジェクトの検証手順で確かめるのが確実です。
注意
利用範囲、結果の制限、必要な注意点を事前に確認します。
整形結果は読みやすさを助けるテキストです。構文の正しさ、ブラウザーでの表示、プロジェクトのコード規約を証明するものではありません。
関連
関連ツール、特集、利用可能なAPIを探せます。