圧縮されたCSSを読みやすく展開
ミニファイ(圧縮)されて1行にまとまったCSSファイルは、そのままでは人間にとって解読が困難です。本ツールは、ブラウザに搭載された構文解析エンジンを使用して、入力されたCSSコードを自動的にフォーマットします。
セレクタごとに改行を挿入し、ブロック内の各プロパティ宣言を独立した行に配置することで、コードの可読性を劇的に向上させます。また、各ブロックの最後の宣言には自動的にセミコロンを補完するため、デバッグ作業や他人が作成したスタイルシートの構造を把握したい場面で非常に役立ちます。
メディアクエリや入れ子構造にも対応
単純なプロパティの羅列だけでなく、@media(メディアクエリ)や@supports、@layerといったネスト(入れ子)を伴うアットルールも正確に解析します。親ブロックの階層に合わせて適切なインデントを付与するため、複雑なレスポンシブデザインのCSSでも構造を見失うことがありません。
さらに、コード内に含まれる文字列やurl()内のBase64データURIなどは一切改変せず、そのままの状態を保持します。これにより、埋め込まれた画像データや特殊なフォント指定が壊れるのを防ぎます。
完全なブラウザ完結型で安全に処理
入力されたCSSコードはすべて、ユーザーの端末(クライアントサイド)のJavaScriptのみを用いて整形されます。外部サーバーへの送信や保存は一切行われないため、開発中の未公開デザインや、機密性の高いプロジェクトのソースコードでも安全に扱うことができます。
なお、本ツールはコードの見た目を整えることに特化しており、CSSの構文エラーの修正や、セレクタ・プロパティ自体のロジック変更は行いません。また、独自にカスタマイズされた社内コーディング規約などに完全に一致させる機能はないため、ベースとなるフォーマット用途としてご活用ください。
よくある質問
入力したCSSコードはサーバーにアップロードされますか?
いいえ、一切アップロードされません。すべての整形処理はお使いのブラウザ上(ローカル環境)で実行されるため、外部にデータが漏洩する心配はありません。
整形後のCSSを使用すると、ブラウザでの表示(レンダリング)に影響が出ますか?
表示には影響しません。本ツールはスペースや改行、インデントなどの空白文字を調整するだけで、CSSのロジックやプロパティの値を変更することはないため、デザインはそのまま維持されます。
Base64でエンコードされた画像データや、文字列内の特殊文字はどう扱われますか?
<code>url()</code>関数内のデータURIや、引用符で囲まれた文字列などは解析の対象外となり、そのままの状態で保持されます。データが破壊されることはありません。
インデントの幅や種類を変更することはできますか?
はい、設定オプションからお好みのインデントスタイルを選択可能です。2スペース、4スペース、またはタブ文字の中から、ご自身のコーディング規約に合ったものをお選びください。
構文エラーのあるCSSを入力した場合、自動的に修正されますか?
本ツールは構文エラーの修正機能は持っていません。与えられたコードを規則に従ってフォーマットするだけですので、あらかじめ正しい構文のCSSをご用意いただく必要があります。
ツールの不具合や改善案はありますか。 フィードバックを送る