すべての記事

HTML圧縮:マークアップの空白がそもそもなぜ重要なのか

一見、HTMLマークアップ内の空白は無関係に思えます — ブラウザはどのみち正しく描画してくれるからです。しかし文書内のいくつかの箇所は例外で、空白を取り除くと実際にページの見た目が変わってしまいます。

安全に削除できるもの

圧縮ツールはHTMLコメント<!-- ... -->、タグ間の余分な空白や改行、値の中に空白を含まない属性を囲む引用符、そして</li>のような省略可能な閉じタグを削除します。

典型的な不具合:2つの単語がくっついてしまう

インライン要素どうしの間にある空白は、ソースコード上の整形ではなく、描画されたページ上で実際に見える隙間です。<span>foo</span> <span>bar</span>は隙間のある「foo bar」として表示されますが、その空白を無条件に取り除くと「foobar」とくっついてしまいます。ただし日本語のように単語間にスペースを置かない言語では、そもそも要素間の空白が「単語の区切り」として意味を持つ場面自体が少なく、この種の不具合は英語のテキストほど目立ちません。

開発時の可読性と圧縮の使い分け

開発中はインデント付きで整形されたHTMLのままにしておくのが普通です。そのほうがDevToolsで構造を追いやすいためです。圧縮は公開直前の最終ビルドにのみ適用し、人間が読む必要がなくなった段階で行います。

何のために使うか

  • 本番公開前にHTMLページのサイズを小さくする。
  • 開発用コメントを最終的なマークアップから取り除く。
  • 本当に安全な箇所だけ空白を取り除くことでミスを避ける。

分かち書きしない言語と改行位置の関係

英語のように単語間にスペースを置く言語では、そのスペースが意味の区切りであると同時に、ブラウザが改行できる位置の目印にもなっています。日本語には単語間のスペースがなく、ブラウザは形態素解析に近いルールや文字種の変わり目(かな・漢字・記号の境界など)を手がかりに改行位置を判断します。そのため、HTML圧縮でタグ間の空白を詰めても、日本語テキストの改行の挙動そのものにはほとんど影響しません — 英語のように「空白の有無が改行可否を左右する」構造ではないためです。ただし全角文字と半角の英数字が混在する箇所では、圧縮によって意図しない改行が起きないか一応確認しておくと安心です。

ツールを試す