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

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

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


使用方法

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

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

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

整形・圧縮オプション

  • インデント・・・整形で利用する空白インデント数です。
  • スペース／タブ選択・・・整形のインデントに利用する文字コードを空白（スペース）とタブから選択できます。
  • 空行を保持・・・整形と準圧縮にて入力HTMLに元からある空行を処理対象外にします。空行にスペースが入っている場合には削除され改行のみになります。
  • １行最大文字数・・・準圧縮にてHTMLを１行にする際の最大文字数を設定します。エディタ上で見やすい長さに調整することが出来ます。
  • HTMLコメントを除去・・・HTML上に記述されているコメントを除去できます。重要なコメントがある場合には使用しないで下さい。

HTML整形・圧縮ツール

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

入力HTML

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



出力HTML

行数: 0／ 文字数: 0