HTMLフォーマッター：HTMLを無料で整形・圧縮 | オンラインツール

A フォーマット（「美化」とも呼ばれます）は、乱雑なコードを読みやすくするために、きれいなインデントと空白を追加します。ミニファイは、ファイルサイズを小さくするために、スペースやコメントのような不要な文字をすべて削除します。通常、開発中はフォーマットを使用し、ウェブサイトをデプロイする直前にミニファイを使用します。たとえば、100行のHTMLファイルは、ミニファイ後に30％縮小される可能性があります。

A いいえ、壊れたコードは修正されません。このツールはHTMLが構造的に正しいことを前提に、インデントを整えるだけです。タグの閉じ山括弧が欠けていると、エラーが表示されるか出力が乱れます。最初にW3Cバリデーターでコードを検証してください。例えば、<div>に対応する</div>がない場合、自動補正はされません。

A まったく変わりません。空白やインデントはブラウザに無視されます。整形後のコードは汚いバージョンとまったく同じように表示されます。唯一の例外は<pre>タグ内で、そこでは空白が保持されます。だから安心して整形してください。ただし、壊れたロジックや不足している属性による表示バグは修正されませんよ。

A オンラインフォーマッターに厳格なファイルサイズ制限はありません。ただし、500KBのHTMLファイルをブラウザに直接貼り付けると、パソコンが遅くなったり、タブが一時的にフリーズする可能性があります。200KBを超えるファイルは、まずミニファイしてからフォーマットすることをお勧めします。あるいは、文書を小さなチャンクに分割してから整形してください。実用的なコツ：最初にミニファイで空白を削除し、そのコンパクトな結果をフォーマットすると処理が速くなります。

A いいえ、壊れません。当フォーマッターは{{ 補間 }}、*ngForディレクティブ、v-bind属性などのテンプレート構文をそのまま保持します。インデントエンジンはこれらをHTML属性やタグ内のプレーンテキストとして扱います。150行のAngularコンポーネントでテストしましたが、完璧に整形されました。唯一の注意点：フレームワークが引用符なしの属性内で特殊文字を使う場合、フォーマッターが空白を追加してずれる可能性があります。属性値を引用符で囲めば問題を完全に回避できます。

A ブラウザのキャッシュに古いコードが残っているのが原因です。Ctrl+F5（Windows）またはCmd+Shift+R（Mac）でハードリロードしてみてください。でも本質的には、このツールはサーバー側にデータを保存しません。タブを閉じたら、フォーマット結果は消えます。閉じる前にコードをファイルにコピーしておくのが確実です。200行のテンプレートを失った経験から言えます。

A 古いタグでも問題なく処理できます。ただし重要なのは、そのままの形で保持されることです。<center>をモダンなflexboxに変換したり、<font>をCSSに置き換えたりはしません。インデントが整うだけで、中身はそのままです。2010年頃のコードベースをリビルド前に監査する場合には便利です。先日、<marquee>だらけの300行のページを整形しましたが、完璧に読みやすくなりました。実践的な手順として、整形後に非推奨タグを検索して、何を置き換えるべきか正確に把握することをお勧めします。

A はい、<!-- -->で囲まれたコメントはフォーマット後もそのまま残ります。<!--[if IE]>のような条件付きコメントも保持されるので、ブラウザ別ハックが入った古いサイトのメンテナンスにも対応できます。ただしminifyするとコメントはデフォルトで削除され、コメントが多いファイルでは15〜20%のサイズ削減になります。ライセンス表記だけ残したい場合は、minify前に「最初のコメントを保持」オプションをチェックしてください。フォーマット後に「TODO」を検索して、残っている開発メモを見つけるのがおすすめです。

A 基本的にはありませんが、ひとつ落とし穴があります。引用符なしの属性値にスラッシュやイコールが含まれていると、フォーマッタがスペースを挿入して2つの属性に分割してしまうことがあります。`<a href=/blog?id=5>` は問題ありませんが、`<div data-x=1/2>` は壊れる可能性があります。整形前にすべての属性値を引用符で囲んでおけば安全です。エディタの置換機能を使えば30秒で済みます。

A いいえ、埋め込みスクリプトやスタイルブロックはそのまま保持されます。パーサーは`<style>`タグやJavaScriptの関数に触れません。調整されるのは空白とインデントの深さだけです。先週、複雑なロジックを持つテンプレートで試しましたが、すべてのコードが無傷のままで読みやすくなりました。デバッグを続ける場合は、圧縮モードではなく整形モードを必ず選択してください。