HTML・CSSコード整形
読みにくいHTML・CSSを、見やすいインデントと改行に整えます。コードをブラウザ内で処理します。
HTML・CSSを貼り付け
コードのインデント・改行を整える補助ツールです。構文を修正するものではありません。
整形結果と保存
入力後「コードを整形」を押してください。
HTMLのタグ間に改行が入ると、インライン表示が変わることがあります。CSSの複雑な構文や特殊なテンプレートは整形後に確認してください。
HTML・CSSコードを読みやすく整形する無料ツール
HTMLやCSSを編集していると、改行が少ないコードやインデントがばらばらのコードは、タグの入れ子やスタイルのまとまりを確認しにくくなります。このHTML・CSSコード整形ツールは、入力したコードをインデントと改行を整えた形に変換するブラウザツールです。整形後のコードはその場で確認でき、コピーやファイル保存にも対応しています。
Webサイトを編集するとき、WordPressのカスタムHTMLを読み直したいとき、CSSの宣言を行ごとに見やすくしたいときなどに利用できます。整形は構文エラーの修復や動作保証ではありません。
このツールでできること
- HTMLの整形：タグのまとまりに合わせて改行とインデントを整理します。
- CSSの整形：セレクターと宣言ブロックを読みやすく配置します。
- インデント幅の選択：スペース2個または4個から選べます。
- 整形結果のコピー：整えたコードを別のエディターなどに貼り付けられます。
- ファイル保存：結果をHTMLなら
.html、CSSなら.css形式で保存できます。 - サンプル・クリア：例を読み込んで操作を試したり、入力を初期化したりできます。
HTML・CSSコード整形ツールの使い方
- コードの種類を選ぶ：「HTML」または「CSS」を選択します。HTMLとCSSを一度に混ぜず、種類ごとに整形してください。
- インデント幅を設定する：スペース2個または4個を選びます。普段の開発環境に合わせると扱いやすくなります。
- コードを貼り付ける：編集したいHTML・CSSを入力欄に貼り付けます。初めての場合は「例を入力」で確認できます。
- 「コードを整形」を押す：結果欄に改行・インデントを整理したコードが表示されます。処理後の文字数や注意メッセージも確認しましょう。
- コピーまたは保存する：内容に問題がなければ「結果をコピー」、または「ファイル保存」を選択してください。
入力できるコードは30万文字以内です。大きなファイルは必要な部分に分けて整形してください。
具体的な整形例
HTML：入れ子を見やすくする
例えば、次のように改行されていないHTMLを入力します。
<main><section><h2>お知らせ</h2><p>本文です。</p></section></main>整形後は、要素の入れ子に合わせて行が分かれ、どこからどこまでがsectionかを追いやすくなります。ただし、文字列を含むHTMLでは改行が表示上の空白に影響する場合があるため、整形後のプレビュー確認が重要です。
CSS：宣言を行ごとに整理する
例えば、以下のように1行にまとまったCSSの場合です。
.card{padding:16px;margin:0;background:#fff;}整形すると、.cardの波括弧とpadding・margin・backgroundの各宣言が行ごとに整理され、値を比較・編集しやすくなります。2スペースと4スペースは、読みやすい方を選んでください。
整形結果の見方と注意事項
結果欄に表示されるコードが整形後の内容です。整形は読みやすさを補助する処理であり、元コードを実行した結果を検証するものではありません。閉じタグや括弧などが不足している可能性がある場合、注意が表示されることがありますが、構文の正しさを網羅的に判定するものではありません。
特にHTMLのインライン要素やテキスト間の空白、CSSの複雑な構文には注意してください。 script・style・pre・textareaを含むHTML、テンプレートの特殊な記法などは、整形後に表示や動作が変わらないか確認してください。保存したファイルを実運用に使う前には、元のコードを控えておくと安心です。
コードはブラウザ内で処理され、外部APIを利用しません。ただし、共有PCなどではクリップボードや保存先の扱いに注意し、公開してはいけない情報が入ったコードを不用意に共有しないようにしてください。
よくある質問（FAQ）
Q. HTMLとCSSの両方を整形できますか？
A. はい。画面の「コードの種類」でHTMLまたはCSSを選択して整形できます。HTML内のCSSまで一括で完全に整形する機能ではないため、必要に応じてコードを分けて利用してください。
Q. インデントをスペース4個に変更できますか？
A. はい。インデント設定から「スペース2個」「スペース4個」を選択できます。変更した後に整形ボタンを押すと、選択した幅で結果が生成されます。
Q. 間違ったHTMLやCSSも自動で修正されますか？
A. いいえ。基本的に改行とインデントを整えるツールであり、閉じタグの追加やCSSの文法エラーの自動修復には対応していません。注意表示が出た場合は元コードを確認してください。
Q. 整形したコードはダウンロードできますか？
A. はい。「ファイル保存」から整形結果を保存できます。HTMLを選んだときはformatted.html、CSSの場合はformatted.cssというファイル名になります。コピーして別のエディターに貼り付けることもできます。
Q. WordPressのHTMLやCSSにも使えますか？
A. コードを貼り付けて整形することはできます。ただし、WordPressのショートコード、独自テンプレート記法、テーマやプラグインが出力する複雑なコードは、整形後に表示崩れがないか必ず確認してください。事前に元のコードを保存することをおすすめします。