Skip to content

HTMLフォーマッター・美化・圧縮ツール

HTMLをブラウザ内で即座に整形・美化・圧縮。乱雑なマークアップをきれいに整えるか、配信用に圧縮できます。無料・プライベートで、HTMLが端末外に送信されることはありません。

トラッキングなし ブラウザで動作 無料
インデント
整形済みHTML

🔒 100%ブラウザ内処理 — HTMLが端末外に出ることはありません。

レンダリング安全な整形と空白を考慮した圧縮についてレビュー済み — Go Toolsエンジニアリングチーム · Jun 5, 2026

HTML整形とは？

HTML整形（美化・プリティプリントとも呼ばれます）は、マークアップの構造が読んで編集しやすくなるように、一貫したネスト、インデント、改行でマークアップを書き直すことです。ページは整形の前後で同一にレンダリングされます — 変わるのは空白だけです。圧縮はその逆で、コメントを取り除いて空白（埋め込みCSSとJSを含む）を折りたたんでページの読み込みを高速化します。このツールはその両方を、完全にブラウザ内で実行します。

主な機能

整形と圧縮

乱雑なマークアップを可読性のために美化するか、インラインCSSとJSを含めて本番用に圧縮します。

バイト削減量の表示

毎回の実行で圧縮によって何バイト削減されたかを正確に確認できます。

100%プライベート

すべての処理はブラウザ内で実行されます。HTMLがサーバーに送信されることはありません。

スタイル設定

規約に合わせて2スペース・4スペース・タブのインデントを選択できます。

サンプル

圧縮されたマークアップ

<nav><ul><li><a href="/">Home</a></li><li><a href="/about">About</a></li></ul></nav>

1行のマークアップを読みやすいインデント付きのツリーに展開します。

属性付きフォーム

<form action="/submit" method="post"><input type="email" name="email" required><button type="submit">Send</button></form>

フォームのコントロールとその属性を1行ずつ整列させます。

テーブル

<table><thead><tr><th>Name</th><th>Role</th></tr></thead><tbody><tr><td>Ada</td><td>Engineer</td></tr></tbody></table>

ネストされたテーブルのセクションをインデントして構造を明確にします。

インラインSVG

<svg viewBox="0 0 24 24"><path d="M5 12h14"/><path d="M12 5v14"/></svg>

インラインSVGマークアップを見やすく整形します。

よくある使用場面

生成マークアップの整理
CMSやビルダーが出力したHTMLを美化し、読んで編集できる状態にします。
コードレビュー
プルリクエスト前にマークアップを整形し、一貫した差分を確認できるテンプレートにします。
軽量なページ配信
本番用HTMLを圧縮してバイト数を削減し、読み込み時間を改善します。
スニペットの検査
ページからコピーしたマークアップを貼り付けて整形し、その構造を理解します。

技術的詳細

js-beautifyによる美化
実績のあるjs-beautify HTMLエンジンを使用し、予測可能で設定可能なインデントを提供します。
CSSO + Terserによる圧縮
空白を折りたたみ、コメントを取り除き、レンダリングに影響を与えずに埋め込みCSSとJSを圧縮します。
ブラウザベース
完全にクライアントサイドで動作し、HTMLが端末外に出たりサーバーに送られたりすることはありません。

ベストプラクティス

ソースは整形、本番は圧縮
リポジトリには可読性の高いHTMLを保持し、ビルドステップとして圧縮を行います。
インデントスタイルを統一する
差分をきれいに保つため、チーム全体で2スペース・4スペース・タブのどれかに統一します。
pre/textareaの空白に注意
圧縮はpreやtextareaなど空白が意味を持つ要素に影響する場合があります — 圧縮後に確認してください。

よくある質問

HTMLをオンラインで整形するには？
入力ボックスにHTMLを貼り付けて「整形」をクリックします。ツールが適切なネストと改行でマークアップを再インデントし、コピーできるようにします。すべての処理はブラウザ内でローカルに実行され、何もアップロードされません。
HTMLを圧縮するには？
HTMLを貼り付けて「圧縮」をクリックします。ツールがコメントを取り除いて空白（埋め込みCSSとJavaScriptを含む）を折りたたみ、最も小さい同等のマークアップを生成し、削減されたバイト数を表示します。
HTMLの整形と圧縮の違いは何ですか？
整形（美化）はインデントと改行を追加してマークアップを読みやすくします。圧縮はコメントと空白を取り除いてファイルを縮小し、読み込みを高速化します。どちらもブラウザで同一にレンダリングされます。
整形するとページのレンダリングが変わりますか？
整形は空白を追加するだけなので、通常のマークアップに対しては安全です。ただし、preやtextareaなど空白が意味を持つ要素は、整形や積極的な圧縮によって影響を受ける場合があります — 処理後に確認してください。
このツールでHTMLは安全ですか？
はい。すべての整形と圧縮はJavaScriptを使ってブラウザ内でローカルに実行されます — HTMLがサーバーに送信されたり、記録されたり、保存されたりすることはありません。貼り付けたものすべてのコピーを受け取るサーバーサイドのツールとは異なり、独自または未公開のマークアップでも安全に使用できます。
インラインCSSとJavaScriptも圧縮されますか？
はい。圧縮ツールはstyleとscriptの内容も圧縮するため、1回のパスでドキュメント全体 — マークアップ、スタイル、スクリプト — をまとめて縮小できます。
HTMLにはどのインデントを使うべきですか？
2スペースは最も一般的なデフォルトで、差分をコンパクトに保ちます。4スペースは深くネストされたレイアウトの可読性を高めます。タブを使えば開発者ごとに好みの幅で表示できます。1つを選んで一貫して適用してください — このツールは3つすべてに対応しています。

関連ツール

すべてのツールを見る →

CSSフォーマッター・美化・圧縮ツール

コード

CSSをブラウザ内で即座に整形・美化・圧縮。乱雑なスタイルシートをきれいに整えるか、配信用に圧縮できます。無料・プライベートで、CSSが端末外に送信されることはありません。

JavaScriptフォーマッター・圧縮ツール

コード

JavaScriptをブラウザ内で即座に整形・美化・圧縮。乱雑なコードをきれいに整えるか、Terserで圧縮して配信できます。無料・プライベートで、コードが端末外に送信されることはありません。

SQLフォーマッター・整形ツール

コード

SQLをブラウザ内で即座に整形・美化・圧縮。PostgreSQL、MySQL、SQL Server、BigQuery、Snowflake、Oracle、SQLiteに対応。無料・プライベートで、SQLが端末外に送信されることはありません。

進数変換ツール — 2進数・16進数・10進数・8進数

単位変換

無料オンライン進数変換ツール。2進数、8進数、10進数、16進数および任意の基数（2-36）間で数値を瞬時に変換。BigInt対応で桁数制限なし。登録不要・サーバー送信なし、すべての処理がブラウザ内で完結。コピーボタンやコードリテラル出力で開発作業を効率化。

Base64エンコーダー＆デコーダー

エンコーディングとフォーマット

Base64のデコード・エンコードが無料でオンラインで行えます。リアルタイム変換、UTF-8・絵文字対応。100%ブラウザ上で動作しデータは外部に送信されません。登録不要。

Base64 画像変換ツール

エンコーディングとフォーマット

Base64 文字列やデータURIをブラウザ上で画像に戻します。プレビューし、寸法と MIME を確認して、PNG・JPG・GIF・SVG としてダウンロード。アップロード不要。