HTML フォーマッター

HTMLの整形・圧縮、インラインCSS/JSの整形、結果のプレビューを行います。

HTML の整形・圧縮・プレビューはすべてブラウザ内で行われ、サーバーにアップロードされることはありません。

スタイルシートも整理しますか? CSS Formatter を試してください。

HTML フォーマッター について

この html フォーマッターは、生のマークアップを整形または圧縮し、インラインの CSS と JavaScript を Prettier で自動的に整形します。乱雑なテンプレート出力、スクレイピングしたページ、手書きのマークアップを貼り付けると、一貫してインデントされたクリーンな HTML を一度に得られます。圧縮モードに切り替えれば空白を除去して本番向けにドキュメントを縮小できます。サンドボックスプレビューはスクリプトを無効にしてマークアップを安全に描画するため、埋め込みスクリプトが実行されることはありません。html 整形ツールとして、コンテキストを切り替えずに html をオンラインで整形したいフロントエンド開発者、QA エンジニアなどに向けて作られています。すべてはブラウザ内のローカルで動作するため、データが端末から外に出ることはありません。インデントはタブまたはスペースを選んでプロジェクトのスタイルに合わせられます。

機能

HTML フォーマッター の使い方

  1. 入力欄に HTML を貼り付けます。
  2. 整形には Beautify、圧縮には Minify、描画には Preview を選びます。
  3. Tabs をオン・オフしてインデントスタイルを設定します。
  4. 出力パネルから整形済み・圧縮済み HTML をコピーします。

例

入力

<div   class="card"><h1>こんにちは</h1><p>Hello   world</p></div>

出力

<div class="card">
  <h1>こんにちは</h1>
  <p>Hello world</p>
</div>

Beautify モードがマークアップを再インデントし、空白を正規化。

よくあるエラーとトラブルシューティング

よくある質問

HTML フォーマッターとは何ですか?
HTML フォーマッターは、Prettier で HTML マークアップを整形または圧縮し、インラインの CSS と JavaScript を整形し、サンドボックス化された iframe で結果をプレビューするブラウザ内ツールです。
圧縮された HTML を整形するには?
圧縮された HTML を入力欄に貼り付けて Beautify を選びます。HTML フォーマッターはマークアップを再インデントし、インラインの <style> と <script> ブロックを読みやすく再整形します。
HTML フォーマッターはインライン CSS と JavaScript を整形しますか?
はい。Prettier がページの整形の一環として <style> と <script> ブロックを自動的に整形します。
整形だけでなく HTML を圧縮することもできますか?
はい。Minify モードに切り替えると空白を除去し、本番向けに最小の等価マークアップを生成します。
スペースの代わりにタブを選べますか?
はい。HTML フォーマッターの Tabs オプションを切り替えるとタブでインデントし、オフにするとスペースを使います。
HTML を整形するときどこかにアップロードされますか?
いいえ。整形とプレビュー描画はすべてブラウザ内のローカルで行われるため、マークアップが端末から外に出ることはありません。

関連ツール

すべての ArrayKit ツール