CreaTools LogoCreaTools
Tech Notes
HTML Formatter

HTML圧縮で壊れやすいパターン｜空白に意味があるケースまとめ

2026-03-29

HTMLの空白は「ある/なし」が表示に影響する

HTML Formatter の「圧縮」を使ったあと、レイアウトが微妙に変わるケースがあります。原因はほぼ全て**「ブラウザが空白を文字として扱うから」**です。

本記事では圧縮で壊れる典型パターンと、起きないようにする工夫を整理します。

1. インライン要素間の空白

<a href="#">前へ</a>
<a href="#">次へ</a>

ブラウザは2つの <a> の間にある改行を半角スペース1個として描画します。

これが圧縮で <a>前へ</a><a>次へ</a> になると、スペースが消えて文字が密着します。

回避方法

方法例
flexbox / grid で並べるdisplay: flex; gap: 8px;
明示的に &nbsp; を入れる<a>前へ</a>&nbsp;<a>次へ</a>
空白依存しないマークアップにリファクタリスト要素で囲む

最近のCSSならflexbox/gridに移行するのが本筋。空白依存マークアップは古い書き方です。

2. inline-block 要素の隙間

<div class="card">A</div>
<div class="card">B</div>

.card { display: inline-block; } のとき、整形済みHTMLではカード間に空白が入って描画されます。圧縮すると密着します。

これも逆に圧縮した方がデザイン的に正しいケースもあるため、「壊れる」とは言い切れません。意図を確認してください。

3. テキストノード周辺の空白

<p>
  これは
  <strong>大事</strong>
  な情報です
</p>

整形時はインデントで読みやすいですが、ブラウザは「これは ⎵ 大事 ⎵ な情報です」と表示します。圧縮すると「これは大事な情報です」のように空白が消えて違和感のある日本語になることがあります。

日本語は単語間スペース不要なので、圧縮後の方が正しいケースも。英語の <p>This is <strong>important</strong>.</p> のような場合は注意。

4. <pre> ・ <textarea> の中身

ここは HTML Formatter で保護対象になっているため、本ツールでは安全です。ただし他の圧縮ツールでは壊すものもあります。

<pre>
  function hello() {
    console.log("hi");
  }
</pre>

<pre> 内のインデント・改行を消すとコードが1行になるため、表示が完全に崩れます。

5. 条件付きコメント（IE）

<!--[if IE 9]>
<link rel="stylesheet" href="ie9.css">
<![endif]-->

IE向け条件付きコメントは機能的なコメントで、削除すると動作が変わります。本ツールでは <!--[if で始まるコメントを保護しています。

ただしIE自体がサポート終了しているため、そもそも残す必要があるかを確認するのが先決。

6. <script> 内の // コメント と最終行

<script>
// これはコメント
console.log("hi")
</script>

<script> は本ツールで保護されますが、改行を全て削るとJSの // コメント 以降が全部コメント化してしまうため、保護なしの圧縮は致命的です。

本ツールでは <script> 中身を保護してから圧縮するため、この事故は起きません。

7. 属性値内の空白

<div class="  foo   bar  ">

class属性の前後・内部の余分な空白は、本ツールでは圧縮しません（regex方式の限界）。表示には影響しませんが、サイズ削減効果が下がる程度。

「圧縮していい」「悪い」の判断

場面圧縮
純粋な日本語コンテンツ◎
英語・多言語コンテンツ△（要レビュー）
inline-block で並べる古いマークアップ△
メールHTML◎
AMP HTML◎（規約遵守なら）
flexbox/grid で組まれたモダンHTML◎
<pre><code> 多用のドキュメント◎（保護されるため安全）

関連記事

HTMLの空白は「無意味な装飾」ではなく「ブラウザが文字として処理する要素」です。これを意識すれば圧縮の事故は防げます。