【37】空白を詰めるかどうか決める white-spaceプロパティ

white-spaceプロパティは、空白（ホワイトスペース）をどう扱うかを指定します。

テキスト内で わざとスペースを複数入力しているのに、ブラウザで見ると1つ分に詰まっている...なんてこと、ありますよね。
それは、white-spaceプロパティのデフォルト値が「複数のスペースは1つに詰める」仕様だから。
そんなときは、「white-space: pre」とか「white-space: pre-wrap」を指定してあげればOKです。

ここで言う空白（ホワイトスペース）とは、具体的には、
・半角スペース（スペースバーを押してできるやつ）
・タブスペース（tabキーを押してできるやつ）
・改行文字（改行コード）（enterキー・returnキーを押して）

改行キー（enterキー・returnキー）を押すと、目には見えないけど「改行文字（改行コード）」が入力されているんですね。

white-spaceは、ホワイトスペースを「複数あるなら1つにまとめる」か、「そのまま表示する」か、改行コードなら「折り返すかどうか」などを指定するプロパティです。

本日のINDEX

1. white-spaceプロパティの値
2. 「改行文字（改行コード）」は不可視のコード
3. white-spaceプロパティの指定サンプル

参考：
・CSS Text Module Level 3 | W3C Working Draft
・white-space - CSS | MDN

white-spaceプロパティの値

white-spaceは CSS1、CSS2 からあるプロパティなので、IE8といった古いブラウザでも実装しています。
CSS3（Text Module Level 3）から、折り返しの仕方についての定義が詳細になっているんだそうです。

では white-spaceプロパティの値を見ていきましょう。
値は すべてキーワードです。

white-spaceプロパティの値
キーワード	normal がデフォルト値。 nowrap、pre、pre-wrap、pre-line
グローバル値	white-space: inherit; 親の値を継承（コレ書かなくても継承するけど） white-space: initial; 継承した親の値を解消しデフォルト値に戻す white-space: unset; 値を解除。親から継承されてるなら inherit、継承されてないなら initial と同じ動作

値の継承	あり	適用できる要素	すべての要素

それぞれのキーワードは、以下の意味があります。

normal

デフォルト値。white-spaceプロパティを特に指定しなければこの値になります。
連続する複数の半角スペース・タブスペースは詰められて、半角スペース1個分（または0個。ブラウザ・状況によって異なる）になります。
改行コードも半角スペース1個分（または0個）になります。
普通の折り返し（行の反対の端に行き着いての改行）はします。

nowrap

「normal」と同じようにホワイトスペースを詰めますが、折り返しだけしません。
改行コードでの改行、普通の折り返し（行の反対の端に行き着いての改行）をしない指定です。

pre

とにかくテキストを書いたそのまんまで表示します。
半角スペース・タブスペースが複数あってもそのまま表示。
改行コードもそのまま改行として表示。
<br>要素を使った強制改行もそのまま表示します。
それ以外の折り返し（行の反対の端に行き着いての改行）はしません。

pre-wrap

「pre」と同じですが、普通の折り返し（行の反対の端に行き着いての改行）はします。

pre-line

「normal」と同じようにホワイトスペースを詰めますが、改行に関しては「pre」と同じ。改行コードや <br>要素の改行はするけど、それ以外の折り返し（行の反対の端に行き着いての改行）はしません。

値による効果のまとめです。
＊「詰める」は、半角スペース1個にします。（ブラウザ・状況によっては0個に）

	改行コード	半角スペース・タブ	折り返し
normal	詰める	詰める	する
nowrap	詰める	詰める	しない
pre	残す（そのまま表示）	残す（そのまま表示）	しない
pre-wrap	残す（そのまま表示）	残す（そのまま表示）	する
pre-line	残す（そのまま表示）	詰める	する

「改行文字（改行コード）」は不可視のコード

改行文字（改行コード）は、HTML文書上でテキストを改行したときに不可視で付くコード（テキストエディタによっては不可視じゃないけど）。
厳密には文字じゃなくコードですね。

white-spaceプロパティの「改行コード」への作用は、普段も身近に感じているはず。
例えば、<img>要素を HTML文書内で改行して配置した時に、

<img src="../image/image1.png" alt="image1"> <!--ここに改行コードがあります-->
<img src="../image/image2.png" alt="image2"> <!--ここに改行コードがあります-->
<img src="../image/image3.png" alt="image3">

こんなふうに画像の間に隙間ができる場合がありますが、

image1

image2

image3

この隙間は「改行コード」が white-space: normal（デフォルト値）によって「半角スペース」に置き換えられたもの。
<img>要素はインラインなので white-spaceプロパティ が効いています。

残念ながら white-spaceプロパティに「改行コード」をチャラにする（改行せずホワイトスペースを0にする）値は無いので、この場合は font-size: 0 を指定するしか無い。半角スペースは0になり隙間が解消します。

image1

image2

image3

<div style="font-size:0">
<img src="../image/image1.png" alt="image1">
<img src="../image/image2.png" alt="image2">
<img src="../image/image3.png" alt="image3">
</div>

white-spaceプロパティの指定サンプル

それでは、white-spaceプロパティの値をぜんぶ使ってみます。

white-space: normal 春はあけぼの。 やうやう白くなりゆく山際、少しあかりて、 紫だちたる雲の細くたなびきたる。

white-space: nowrap 春はあけぼの。 やうやう白くなりゆく山際、少しあかりて、 紫だちたる雲の細くたなびきたる。

white-space: pre 春はあけぼの。 やうやう白くなりゆく山際、少しあかりて、 紫だちたる雲の細くたなびきたる。

white-space: pre-wrap 春はあけぼの。 やうやう白くなりゆく山際、少しあかりて、 紫だちたる雲の細くたなびきたる。

white-space: pre-line 春はあけぼの。 やうやう白くなりゆく山際、少しあかりて、 紫だちたる雲の細くたなびきたる。

サンプルのソースコードはこちら。

<div class="mihon" style="white-space: normal">
<b>white-space: normal</b>
春はあけぼの。
    <!--半角スペース4つ-->やうやう白くなりゆく山際、少しあかりて、
		<!--tab 2つ-->紫だちたる雲の細くたなびきたる。
</div>

<div class="mihon" style="white-space: nowrap">
<b>white-space: nowrap</b>
春はあけぼの。
    <!--半角スペース4つ-->やうやう白くなりゆく山際、少しあかりて、
		<!--tab 2つ-->紫だちたる雲の細くたなびきたる。
</div>

<div class="mihon" style="white-space: pre">
<b>white-space: pre</b>
春はあけぼの。
    <!--半角スペース4つ-->やうやう白くなりゆく山際、少しあかりて、
		<!--tab 2つ-->紫だちたる雲の細くたなびきたる。
</div>

<div class="mihon" style="white-space: pre-wrap">
<b>white-space: pre-wrap</b>
春はあけぼの。
    <!--半角スペース4つ-->やうやう白くなりゆく山際、少しあかりて、
		<!--tab 2つ-->紫だちたる雲の細くたなびきたる。
</div>

<div class="mihon" style="white-space: pre-line">
<b>white-space: pre-line</b>
春はあけぼの。
    <!--半角スペース4つ-->やうやう白くなりゆく山際、少しあかりて、
		<!--tab 2つ-->紫だちたる雲の細くたなびきたる。
</div>

white-spaceプロパティって、スペースやタブをそのまま表示できたりして、一見便利そうですが、デバイスによって表示幅がぜんぜん違うので注意が必要です。
「white-space: pre」などを使うと、スマホの場合は画面から外れた文字が読めなかったりするからね。ユーザビリティを考えて慎重に使おう。

テキストの表示でホワイトスペースを使う時、たいていは他のもっとふさわしいプロパティがあります。

例えば、段落の最初の文字を字下げ（1文字分スペースを空けること。インデントとも言います）したい時は、text-indentプロパティを使ったほうが便利です。
また、文字間を開けたい時は letter-spacingプロパティ、単語間を開けたい時は word-spacingプロパティを使うほうが手っ取り早いしふさわしい。
（これらは次回から順番に記事にします）

それらのプロパティを使うシーンではなくて、ホワイトスペースの表示を調整したい時に white-spaceプロパティを使うって感じですかね。

次回予告

さて次回は、先程ちょっと触れた text-indentプロパティを使ってみよう。
これは、テキストの「インデント（字下げ）」を指定します。
インデント（字下げ）とは、新聞や本などで、文章の段落ごとに1行目の最初の文字を下げて「ここから新しい段落」とわかりやすくすることです。