Softonic

HTML 整形ツール

ステップ 1 / 3

10万文字までの HTML を貼り付けられます。コードは実行されません。

次へ: インデントを選択

HTML を貼り付け、インデントを 2 または 4 スペースから選ぶと、読みやすく整えたコピーを確認できます。構造が明確な部分だけをインデントし、行内のテキスト、属性、変更に注意が必要なブロックは入力どおりに保ちます。構造を判断できない場合は入力を変更せず、整形結果を表示せずに警告を出します。

3 ステップで HTML を整形

  1. 1

    HTML を貼り付ける

    整えたいマークアップを入力します。一部分でも文書全体でもかまいません。

  2. 2

    インデントを選ぶ

    入れ子になったブロックに使うスペースを 2 個または 4 個から選びます。タグや属性ではなく、出力の配置が変わります。

  3. 3

    結果を確認して使う

    元のコードと比較し、目的に合えばコピーまたはダウンロードします。警告が出た場合は整形結果を表示しません。

変わる部分と保持される部分

このツールは、文中にあるタグの前後で文章を分断せず、構造が明確なブロックにインデントを付けます。たとえば、次のように詰めて書かれた HTML は、

<main><section><h2>ニュース</h2><p>詳しくは <a href="/news">最新情報</a>をご覧ください。</p></section></main>

次のように配置できます。

<main>
  <section>
    <h2>ニュース</h2>
    <p>詳しくは <a href="/news">最新情報</a>をご覧ください。</p>
  </section>
</main>

リンクの前後の語句と href の値は入力どおりです。プロジェクトの書式に合わせて 4 スペースにも切り替えられます。属性の並べ替え、引用符の変更、文字参照の書き換え、コードの圧縮、HTML の修復は行いません。

要素間の空白が CSS、スクリプト、テンプレートの動作に影響する場合があります。明確なブロックをインデントすると、タグ間に改行やスペースが加わることがあります。空白の扱いが重要な文書では、使用前に結果を確認してください。<pre>、<code>、<textarea>、<script>、<style> の中身は入力どおりに保持します。

マークアップの構造を安全に判断できない場合は、構文が崩れている場合や閉じタグの省略に依存する場合を含め、元の入力を変更せず警告を表示します。整形結果は生成されません。この警告は整形上の限界を示すもので、HTML の妥当性を判定するものではありません。規格への適合を調べるには HTML バリデーターを使ってください。

よくある質問

いいえ。構造が明確な場合に限り、インデントを変更します。すべての HTML エラーの診断や不足したタグの補完は行いません。警告は、確実に整形できなかったことを示します。

行内要素の前後の空白を含め、行内のテキストはひとまとまりに保ちます。ただし、明確なブロック要素の間に空白が加わることがあるため、空白に敏感なテンプレートでは使用前に比較してください。

完全な pre、code、textarea、script、style ブロックは入力どおりに保持されます。中身は再整形しません。

整形はブラウザ内で行われます。複数の手順にわたって入力を引き継ぐため、このタブのセッションストレージに保存します。

閉じタグの省略によってインデントが不確かになる場合、入力を変更せず、整形結果を表示せずに警告を出します。予測しやすい配置にするには閉じタグを明示してください。

関連ツール

Webpack設定ジェネレーター

素の JavaScript、React、Vue 向けに webpack 5 の webpack.config.js を生成します。TypeScript、Babel、CSS や Sass、画像、HtmlWebpackPlugin、開発サーバー、npm install のコマンドまでそろいます。

CSSローディングアニメーション生成ツール

純粋なCSSで円形スピナーを作成できます。直径、枠の太さ、アクセントカラー、回転速度を設定し、ライブプレビューを確認して、そのまま使えるCSSをコピー。SVGもJavaScriptも不要です。

OpenAPI 検証ツール

OpenAPI または Swagger のドキュメントを JSON か YAML で貼り付けて、コア構造をチェックします: バージョンフィールド、info オブジェクト、paths を、わかりやすいエラーと警告つきで。

カラーティントジェネレーター

ベースカラーの明るい色合いを生成します。デザイン システム トークン、背景、ホバー状態を 3 ～ 20 段階でスケールします。

CMYK から RGB への変換

標準的な計算式で CMYK の割合をおおよその RGB 値と Hex 値に変換し、画面用にすばやく確認できます。

PHPフォーマッター

単純なPHPコードに改行と2または4スペースのインデントを追加します。結果は必ず確認してください。PHPパーサーでもPSR-12準拠ツールでもありません。

このツールは他の言語でも利用できます