カテゴリー: 開発ツール

HTML フォーマッター

サイト側で企画したツールツールが見つからない?

script や style の内容を変更せずに、ローカルで HTML をインデント整形

HTML を貼り付けると、ネストされたタグを再インデントして読みやすくします。<script>、<style>、<textarea>、<pre> 内のコンテンツはそのまま保持されるため、埋め込まれたコードや書式が壊れることはありません。すべてブラウザ内で完結します。

整形しました。

元のサイズ166 B整形後のサイズ204 B
整形後の HTML
<main>
  <!-- LocalTools example -->
  <h1>Offline browser tools</h1>
  <p>
    Everything runs
    <b>on your device</b>
    .
  </p>
  <ul>
    <li>No upload</li>
    <li>No account</li>
  </ul>
</main>

これは軽量なインデント整形ツールであり、検証ツールではありません。対応が崩れたタグや閉じられていないタグは修正されません。

このページの処理はすべてブラウザ内で行われます。アップロードは一切ありません。

このツールでできること

HTML フォーマッターは、ネストされた要素を再インデントすることで、開発者ツールを使わなくても深くネストされたページ構造を見渡せるようにします。このツールは完全なパーサーではなく軽量なインデント整形ツールです。タグ、コメント、doctype は認識しますが、マークアップの検証や対応の崩れたタグの修復は行いません。

使い方

  1. HTML を入力欄に貼り付けるか、サンプルを読み込みます。
  2. 2 または 4 スペースのインデントを選びます。
  3. 整形結果をコピーしてプロジェクトに戻します。

プライバシー

このツールはすべてブラウザ内で動作します。入力した内容がアップロード・保存・共有されることはなく、タブを閉じれば消えます。

よくある質問

HTML はどこかにアップロードされますか?
いいえ。整形はページ内で実行される JavaScript によって行われるため、マークアップが端末から出ることはありません。
<script> や <style> タグ内の内容は変更されますか?
いいえ。埋め込まれた JavaScript と CSS は書かれた通りにそのままコピーされます。再整形すると意味が変わる可能性があるためです。
壊れた HTML や対応の崩れた HTML は修正されますか?
いいえ。見つけたタグに基づいて再インデントするだけで、無効なマークアップの検証や修復は行いません。