メインコンテンツへスキップ

HTMLのホワイトスペース

1.ホワイトスペースとは

ホワイトスペースを
訳すと、
空白となります。

ホワイトスペースとは

ホワイトスペースとは、スペース、タブ、改行 (正確には、CRLF シーケンス、キャリッジリターン、改行) のみで構成されたテキストの文字列のことです。これらの文字を使用することで、自分や他の人が読みやすいようにコードを整形することができます。 実際、私たちのソースコードの多くはこれらのホワイトスペースであふれており、コードのダウンロードサイズを減らすために、本番のビルド段階でホワイトスペースを取り除く傾向があります。

「ホワイトスペースは HTML、 CSS、そして DOM 内でどう扱われるか - Web API | MDN」

2.HTMLでのホワイトスペースの扱い

HTMLでは、
ホワイトスペースは
ほとんど無視されます。

HTMLでの改行コードの扱い

  1. <div>
  2. a
  3. b
  4. <span>c</span
  5. ><span>d</span>
  6. <span>e</span>
  7. f
  8. </div>

改行コードは、空白として扱われます。
段落の最初と最後の空白は無視されるので、実質的には段落の最初と最後の改行コードは無視されます。

４行目の改行コードはタグの中なので、ここが空白として扱われても改行として扱われても何も影響はありません。 というより、自分自身の前後に改行を生成しない要素の直後に改行コードがあると空白として扱われてしまうので、意図的にタグの中に改行コードを収める記述が必要な場合があります。

例示では、文字列の範囲(空白の有無)を視覚化する為に、CSSで文字に下線を装飾しています。

a b cd e f

HTMLでの空白の扱い

  1. <div> a b c d </div>

段落の最初と最後の空白は無視されます。段落中の２つ以上の連続する空白は１つにまとめられます。このまとめる対象は、改行コードから空白として扱われる分を含みます。

例示では、文字列の範囲(空白の有無)を視覚化する為に、CSSで文字に下線を装飾しています。

a b c d

3.対応

整形済みテキスト要素

  1. <pre>
  2. a
  3. b
  4. <div> c d </div>
  5. efg hijkl mn
  6. </pre>

pre要素を用いて、その要素内のホワイトスペース文字をそのまま表示します。
pre要素開始タグの直後, pre要素終了タグの直前の改行コードは、無視されます。

pre要素は、整形済みテキスト (Preformatted text) を表します。この要素内のテキストは一般的に、ファイル内でのレイアウトをそのまま反映して等幅 ("monospace") フォントで表示されます。この要素内のホワイトスペース文字はそのまま表示します。

例示では、文字列の範囲(空白の有無)を視覚化する為に、CSSで文字に下線を装飾しています。
(※ pre要素の子孫要素にdiv要素を記述するのは不適切なのですが、段落の最初と最後の空白の例として示しています。)

pre要素の仕様などは、「pre要素」で記述しています。 

a
 b

 c   d  

efg   hijkl mn

改行要素

  1. a<div><br>
  2. b
  3. c<br>
  4. d<br>
  5. </div>e

br要素を用いて、その要素内の改行を表示します。

４行目の最初の空白は、 (論理的に) 段落の最初となるので無視されます。改行は、その後の (論理的な) 段落が空なので無視されます。

br要素の仕様などは、「br要素」で記述しています。

a

b c
d
e

CSS

  1. <div style="white-space: ">
  2. a
  3. b
  4. <div> c d </div>
  5. efg hijkl mn
  6. </div>

CSSを用いた例示の雛型です。style属性の属性値を書き換えて例示します。
(CSS の white-spaceプロパティの既定値は normal で、継承はありです。)

a b
c d
efg hijkl mn
  1. white-space: normal;

white-spaceプロパティの値をnormalに指定しました。連続するホワイトスペースはまとめられます。行の折り返しは、改行コードによるか、br要素, wbr要素によるか、行ボックスを埋めるのに必要なときに行います。

a b
c d
efg hijkl mn
  1. white-space: nowrap;

white-spaceプロパティの値をnowrapに指定しました。連続するホワイトスペースはまとめられます。行の折り返しは行いません。

a b
c d
efg hijkl mn
  1. white-space: pre;

white-spaceプロパティの値をpreに指定しました。連続するホワイトスペースはそのまま残され、行の折り返しは改行コードによるか、br要素, wbr要素によってのみ行われます。

a b
c d
efg hijkl mn
  1. white-space: pre-wrap;

white-spaceプロパティの値をpre-wrapに指定しました。連続するホワイトスペースはそのまま残されます。行の折り返しは、改行コードによるか、br要素, wbr要素によるか、行ボックスを埋めるのに必要なときに行います。

a b
c d
efg hijkl mn
  1. white-space: pre-line;

white-spaceプロパティの値をpre-lineに指定しました。連続するホワイトスペースは詰められて 1 つになります。行の折り返しは、改行コードによるか、br要素, wbr要素によるか、行ボックスを埋めるのに必要なときに行います。

a b
c d
efg hijkl mn
  1. white-space: break-spaces;

white-spaceプロパティの値をbreak-spacesに指定しました。一部の点を除いて、動作は pre-wrapと同じです。

a b
c d
efg hijkl mn

文字参照

  1. <div>
  2. abcdefghij<br>
  3. abc e ij<br>
  4. abc e&nbsp;&nbsp;&nbsp;ij<br>
  5. abc e&#32;&#32;&#32;ij<br>
  6. </div>

"&nbsp;"と文字実体参照を用いて空白を表示します。この空白は、制御コードでありまとめられる対象にはなりません。"&#32;"と数字文字参照を用いて表示した場合の空白は、まとめられる対象です。

abcdefghij
abc e ij
abc e   ij
abc e ij

おまけ

  1. <div class="XHSample47301">
  2. <ul>
  3. <li>01</li>
  4. <li>02</li>
  5. <li>03</li>
  6. </ul>
  7. </div>
  1. .XHSample47301 ul {
  2. font-family: monospace, monospace;
  3. list-style-type: none;
  4. padding-left: 0;
  5. }
  6. .XHSample47301 li {
  7. display: inline;
  8. color: #fff;
  9. background-color: #000;
  10. }

ブロックレベルボックスに対してdisplay: inline; を指定して横並びにする事がありますが、元がブロックレベルボックスなのでソースコードで改行して書く事が多く、その為に改行コードが空白として扱われて要素間に隙間が出来てしまいます。

  • 01
  • 02
  • 03
  1. <div class="XHSample47302">
  2. <ul>
  3. <li>01</li>
  4. <li>02</li>
  5. <li>03</li>
  6. </ul>
  7. </div>
  1. .XHSample47302 ul {
  2. font-family: monospace, monospace;
  3. list-style-type: none;
  4. padding-left: 0;
  5. letter-spacing: -1em;
  6. }
  7. .XHSample47302 li {
  8. display: inline;
  9. color: #fff;
  10. background-color: #000;
  11. letter-spacing: normal;
  12. }

改行コードが空白として扱われる対応として、letter-spacing: -1em; で字間のスペースを１文字分減らしています。ただこのプロパティは継承ありの為に、子要素で元に戻す指定も合わせて行っています。

  • 01
  • 02
  • 03

4.気を付ける点

改行コードの扱い

改行コードは、無視されたり空白として１つの空白にまとめられたりと状況により扱いが違うので注意が必要です。ソースに記述している時は改行で無視されると思っていても、実際は同一行で１文字の空白がついたりとか、要素が別だからとソース上で改行して見やすさを求めると、描画で空白が空くとかあります。

全角空白

全角空白は、半角の空白とは異なりまとめられる事はありません。それでいて半角, 全角の見分けが難しいです。

タブ

タブは、エディタなどであらかじめ設定しておいた位置にカーソルを移動する機能です。空白で埋める物と、制御コードを用いる物があります。
空白で埋める場合は空白として認識していれば良いのですが、制御コードを用いる物はソースと描画の違いの認識が要注意だと思います。