HTML フォーマッター
乱れた・圧縮された HTML をブラウザで整形・インデント。
使用例
圧縮HTMLを整形
入力
<ul><li>One</li><li>Two</li></ul>
出力
<ul> <li>One</li> <li>Two</li> </ul>
ネスト構造をインデント
入力
<div><p>Hi <a href="#">there</a></p></div>
出力
<div> <p>Hi <a href="#">there</a></p> </div>
このツールについて
この無料オンラインHTMLフォーマッターは、乱雑・圧縮・手編集されたマークアップをきれいにインデントされたHTMLに変えます — 高速なHTML整形・pretty-printツールです。HTMLを貼り付けてインデントスタイルを選ぶと、整形結果が即座に表示されます。すべてアップロードなしにブラウザ内で動作するので、コードが端末を離れることはありません。
使い方
- 入力ボックスにHTMLを貼り付けます（サンプルを押して試せます）。
- スペース2つ・4つ・タブからインデントを選びます。
- 右の出力ボックスで整形されたHTMLを確認します。
- コピーボタンで結果をコピーします。
HTMLフォーマッターを使う場面
ビルド済みページから圧縮HTMLをコピーしたとき、チームメイトから一貫性のないマークアップを引き継いだとき、あるいは編集前にメールテンプレートやコンポーネントを読みたいときに便利です。一貫したインデントはネストを明確にし、差分をきれいにします。
よくある質問
このHTMLフォーマッターは無料ですか?
はい — 登録も制限もない完全無料オンラインHTMLフォーマッター・整形ツールです。好きなだけHTMLを整形・インデントできます。
HTMLはサーバーにアップロードされますか?
いいえ。アップロードなしのツールです — HTMLはすべてブラウザ内で整形されるため、マークアップが端末を離れません。非公開・内部コードにも安全です。
HTML整形ツールは実際に何をしますか?
マークアップを再インデントし、タグと内容をそれぞれの行に置き、間隔を正規化して、乱雑・圧縮されたHTMLをきれいで読みやすくします。ページの表示結果は変わりません。
インデントを選べますか?
はい — スペース2つ、4つ、またはタブを選べます。選択はブラウザに保存され、次回も保たれます。
圧縮されたHTMLも扱えますか?
はい。1行や圧縮されたHTMLを貼り付けると、適切にインデントされた読みやすい構造に展開し直します。
インラインのJavaScriptやCSSが壊れますか?
いいえ。インラインの<style>・<script>ブロックはそのまま保たれ、周囲のマークアップとともにインデントされるので、コードは動き続けます。
オフラインやモバイルでも動きますか?
ページ読み込み後はローカルで動作するので不安定な接続でも機能し、レイアウトはスマホ・タブレットで完全レスポンシブです。
関連ツール