HTML整形
読むために広げる。送るために詰める。
例を読み込むと入力と設定が一時的に変わります。元の内容に戻せます。
0文字
出力
上に貼り付けるか入力すると、ここに結果が表示されます。
ファイルは端末の外に出ません
このツールはすべてブラウザ内で動作します。貼り付けた内容は端末内で処理され、サーバーには送信されないため、トークンや鍵、未公開の文章でも安心して使えます。
使用例
自治会サイトのごみ出し表を、タブで整形して読める形に
さくら台自治会のホームページで、ごみ出しの日の表が1行261文字のHTMLになっています。見出し、4行2列の表、粗大ごみのふりがな（ruby）、太字にした収集時刻が入っています。役員が曜日を確かめるため、「整形する」・インデント「タブ」で貼り付けます。
- 42行になります。表の各行（tr）の下に見出しセル（th）とセル（td）が1段ずつ深く並び、セルの中身はさらに1段下の行に入ります。
- 「粗大（そだい）ごみ」のふりがなは1行のまま残ります。rubyとrtはインライン要素なので、前後の文字と切り離されません。
- 「朝8時半までに出してください。」も太字の部分ごと1行です。日本語の文中に空白が足されることはありません。
- スペース2つにしても42行のまま。文字数はタブの408字から514字に増えます。
| 設定 | 行数 | 文字数 |
|---|---|---|
| 元のHTML | 1 | 261 |
| 整形する・タブ | 42 | 408 |
| 整形する・スペース2つ | 42 | 514 |
| タブ版を「圧縮する」 | 1 | 261（36%減） |
表は1セル1行で読めるようになり、資源ごみが水曜なのもすぐ分かります。「圧縮する」に切り替えると元の261字の1行にそのまま戻るので、ホームページに貼り戻せます。
使い方
- HTMLを貼り付けます。打つそばから整形されます。
- 「圧縮する」に切り替えると、インデントとコメントを取り除きます。
- スペース2つ・4つ・タブから選びます。
- 結果をコピーするか、ファイルとして保存します。
よくある質問
- 少し壊れている文書でも整形できますか。
- できます。これはマークアップを木構造に解析するのではなく、タグとテキストの並びとして読みます。整形したいHTMLはたいてい「理解しようとしているHTML」であり、それを突き返す道具は役に立たないからです。閉じていないタグもそのまま通ります。
- 文章の中の空白が壊れませんか。
- 壊れません。ここがこの仕事の面倒なところです。<b>一</b>と<i>二</i>のあいだの空白は表示されるので残し、<div>の前後の空白は表示されないので取り除きます。インライン要素は前後の語と同じ行に残ります。
- <pre>の中身は触られますか。
- 1文字も触りません。<pre>と<textarea>の中の空白はすべて表示されるので、書かれたとおりに出力します。左に寄せることすらしません。scriptとstyleは別で、こちらの空白には意味がないのでタグの下に揃えます。
- 圧縮すると名前が変わりますか。
- 変わりません。コメントと、表示に影響しない空白を取り除くだけです。名前も順序も変えないので、出てきた文書は入れた文書と同じように表示されます。
- 圧縮すると<style>や<script>の中のCSS・JavaScriptも縮みますか。
- 縮みません。コードの前後の空白を取るだけで、中の空白や改行は書かれたとおり残ります。2行で書いた<style>は2行のまま出てきます。コード自体を縮めたいときは、先にCSS整形やJavaScript圧縮を通してください。
- 入力した内容はどこかに送られますか。
- いいえ。ブラウザの中で動くので、貼り付けた内容はお使いのパソコンから出ません。