入力

出力

HTMLフォーマッターとは？

HTMLフォーマッターは、乱雑な、圧縮された、またはインデントが不適切なHTMLを取得し、きれいで適切にインデントされたコードに変換します。スニペットでもページ全体でも、一貫したインデントを追加し、開始タグと終了タグを整列させ、ドキュメント構造を即座に見えるようにします。

適切にフォーマットされたHTMLは、読みやすく、デバッグしやすく、保守しやすくなります。フォーマッターはHTML標準の規約を尊重します：要素の正しいネスト、<br>、<img>、<input>などのvoid要素の処理、<pre>、<script>、<style>ブロック内のコンテンツの保持。

すべてブラウザ内で実行されます。サーバーへのアップロードもデータ保存もありません。HTMLを貼り付けて、整形された出力を取得し、コピーまたはダウンロードしてください。コードのプライバシーは守られます。

HTMLフォーマッターの使い方

これらの3つのステップに従ってHTMLを美化します。

貼り付け、アップロード、またはサンプルを読み込む

左の入力パネルにHTMLを貼り付けるか、アップロードをクリックして.html、.htm、.txtファイルを読み込みます。サンプルをクリックして乱雑なHTMLの例を見ます。

<div class="wrapper"><h1>こんにちは</h1><p>世界</p><ul><li>項目1</li><li>項目2</li></ul></div>

フォーマッターはあらゆるHTMLに対応：doctypeのある完全なドキュメント、部分的なスニペット、単一の要素。

フォーマットされた出力を確認

右の出力パネルに美化されたHTMLが即座に表示されます。ネストされた要素は2スペースのインデントが付き、タグの階層が一目で分かります。

コピー、ダウンロード、または圧縮

コピーをクリックしてクリップボードにコピー。ダウンロードをクリックして.htmlファイルとして保存。コンパクトなHTMLが必要？圧縮をクリックして空白を除去。

活用シーン

圧縮されたHTMLの整理

本番環境のHTMLはパフォーマンスのために圧縮されていることが多いです。検査や編集が必要な場合、このフォーマッターが適切なインデントを復元し構造を理解しやすくします。

メールテンプレートの整形

メールHTMLは深くネストされたテーブルやインラインスタイルで非常に乱雑です。整形することでメールクライアント間のレンダリング問題をデバッグしやすくなります。

CMS出力の整理

コンテンツ管理システムは、肥大化した整形不良のHTMLを生成することがよくあります。編集やコンテンツ移行前にフォーマッターで整理してください。

チームコードの統一

複数の開発者がHTMLに貢献する場合、フォーマットスタイルにばらつきが出ます。このツールを使ってプロジェクト全体で一貫したインデントと構造を適用しましょう。

よくある質問

フォーマッターはHTMLの構造を変更しますか？

いいえ。空白とインデントのみを調整します。HTML要素、属性、コンテンツの追加、削除、並べ替えは行いません。

void要素はどう処理されますか？

<br>、<hr>、<img>、<input>などのvoid要素は自己閉鎖として認識され、独自の行に配置されます。

HTMLデータはどこかに保存されますか？

いいえ。すべてのフォーマットはJavaScriptを使ってブラウザ内で行われます。HTMLはコンピューターから離れません。

どのようなインデントが使用されますか？

1レベルあたり2スペースのインデントを使用します。HTMLで最も一般的な規約です。

scriptやstyleタグ内のコンテンツは保持されますか？

はい。<pre>、<script>、<style>、<textarea>タグ内のコンテンツはそのまま保持されます。

部分的なHTMLスニペットをフォーマットできますか？

もちろんです。完全なHTMLドキュメントは不要です。任意のHTMLフラグメントで動作します。

HTMLフォーマッター

入力

出力