Bloggerなどのブログ記事作成において普段のページ文章作成には「作成ビュー（WYSIWYGエディタ）」を利用するのですが、ブログカードなどのリンクの貼り付けやCSS、Javascriptの挿入などを行う際には「HTMLビュー」に切り替えて編集します。

しかし、エディタが自動記述したHTML構文は１行などに圧縮されている事が多く、挿入する箇所を探すことがかなり大変です。画像リンクや文字色サイズ替えした文章などによるコピペで不用意に挿入された不要な属性タグなどを整理するのも大変です。

そこでそれらの問題を解消し活用するためにHTML/Javascriptなどの整形・圧縮ツールを設置しました。本ツールはユーザの利用するブラウザ上で処理が完結しているので生成した情報取得などは行いません。
ブログ記事作成にHTML編集を主としている人やHTMLコード開発などにも利用できますが、あくまで補助的なものであることをご理解願います。


使用方法

  1. 解析したいHTMLコードを入力ボックスに貼り付けます。
  2. 整形・圧縮オプションの入力や選択を行います。
  3. 必要に応じ、整形ボタン、準圧縮ボタン、または圧縮ボタンを押します
  4. 処理された結果が出力ボックスに表示されます。

  • 整形・・・HTMLコード、CSS、Javascriptのタグを分割しインデント処理を行います。不要なコードを探すのに便利ですが、WYSIWYGにて圧縮した行が展開されるので逆に見づらくなることがあります。
  • 準圧縮・・・HTMLコードのタグを設定文字数上限にてまとめて１行にし左詰めにします。CSS、Javascriptは、そのまま左詰めを行います。主に単純に見やすく編集したい人向けです。
  • 圧縮・・・すべてコードを１行にまとめます。速度重視や編集予定がないコードをまとめられます。

ブログ記事などでの利用では、全てを一括処理すると戻すのが大変になることがありますので必要な部分のみ整形するのが無難です。※戻せるようにバックアップを取った上での利用を推奨。

整形・圧縮オプション

  • インデント・・・整形で利用する空白インデント数です。
  • スペース／タブ選択・・・整形のインデントに利用する文字コードを空白（スペース）とタブから選択できます。
  • 空行を保持・・・整形と準圧縮にて入力HTMLに元からある空行を保持します。空行にスペースが入っている場合には削除され、改行のみになります。
  • １行最大文字数・・・準圧縮にてHTMLを１行にする際の最大文字数を設定します。エディタ上で見やすい長さに調整することが出来ます。
  • HTMLコメント除去・・・HTMLコメント（<!-- ～ -->）を除去します。<!--more--> など重要なコメントがある場合には使用しないで下さい。
  • JSコメント除去・・・JavaScript の // や /* ～ */ コメントを除去します。コメント行は削除されるため、HTMLモードでは空白行が増える場合があります。
  • 整形モード・・・HTMLとCSS/Javascriptでは記述ルールが異なるので３つの整形モードで対応しています。
  1. HTMLモード（通常）：HTML/CSS/Javascript 混在の整形モードです。<script> / <style>内は安全に整形されます。ただし外側にある JSコードは HTMLとして扱われるため、< や > を含む場合にインデントが乱れることがあります。
  2. コードモード（JS/CSS単体）：JavaScript や CSS のコード単体を整形するモードです。HTMLタグ判定を行わないため、関数単体やスタイル単体の整形に適しています。
  3. 部分コードモード（HTML＋JS混在）：HTMLと JavaScript が混在した部分コードを整形するモードです。<script> を検知して整形しますが、HTMLモードほど厳密な構造解析は行いません。

HTML整形・圧縮ツール

HTML整形や圧縮したい入力HTMLボックスに貼り付けてオプションを選択し、整形・準圧縮・圧縮ボタンにて処理を実行し、結果が出力HTMLボックスに表示されます。

入力HTML

行数: 0／ 文字数: 0
インデント:
１行最大文字数:

整形モード:





出力HTML

行数: 0／ 文字数: 0