Utils365

HTML整形・圧縮ツール

HTMLをきれいにインデントされたマークアップに整えるか、公開サイト用に小さくします。

HTMLを貼り付けるか、.htmlファイルを開くかここにドロップしてください

次: CSS整形・圧縮 · JavaScript整形・圧縮

このツールの不具合を報告

HTML整形の使い方

  1. HTMLを貼り付け

    ページやコードの一部を貼り付けるか、.htmlファイルを開くかドロップします。入力と同時に整形されます。

  2. 整形か圧縮を選ぶ

    整形ではすべてのタグをスペース2つ・4つかタブでインデントします。圧縮ではコメントと表示されない空白を取り除きます。

  3. コピーまたはダウンロード

    結果をコピーするか、.htmlファイルとしてダウンロードします。圧縮すると削減したバイト数が表示されます。

Utils365が選ばれる理由

  • 安全な圧縮

    <pre>、<textarea>、<script>、<style>の中身には一切手を加えず、インライン要素の間には空白を1つ残すので、ページの見た目は変わりません。

  • 読みやすいマークアップ

    入れ子のタグは階層ごとに1段インデントされるので、1行に詰め込まれたページも読みやすく編集しやすくなります。

  • 削減量がわかる

    圧縮するとすぐに、圧縮前後のサイズと削減率が表示されます。

  • プライバシーを守る設計

    HTMLはブラウザ内で整形され、アップロードされないので、公開前のページやテンプレートが外に出ることはありません。

よくある質問

HTMLの圧縮では何が削除されますか?

コメント、改行、インデント、そしてブラウザが表示しないタグ間の空白です。古いInternet Explorerの条件付きコメントは今も機能するため残します。

圧縮するとページの見た目は変わりますか?

変わらないはずです。<div>や<p>のようなブロック要素の隣の空白は表示されないので削除します。リンクやボタンのようなインライン要素の間では空白が見えるため、1つ残します。

スクリプトやスタイルは変更されますか?

いいえ。<script>と<style>の中身は書いたとおりのままです。これらも小さくしたい場合は、JavaScript整形ツールとCSS整形ツールを使ってください。

<pre>に手を加えないのはなぜ?

<pre>と<textarea>の中ではすべての空白と改行がページに表示されるので、1つでも削除すると訪問者に見える内容が変わってしまいます。

壊れたHTMLを修正できますか?

いいえ。変わるのはレイアウトだけで、タグはそのままです。閉じタグの抜けもそのままなので、インデントを確認してください。閉じられていないタグがあると、それ以降がすべて1段深くなります。