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

最終更新日:2018年07月28日  (初回投稿日:2018年07月28日)

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行目の最初の文字を下げて「ここから新しい段落」とわかりやすくすることです。

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

「レンタルサーバーはどこがいい?」とご質問をよくいただきますが、自分でも使っていてオススメなのは スターサーバー (ミニバードがスターサーバになりました)。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップ!もわかりやすい管理画面で、初めてでもすんなり使えます。
両方とも、なんといっても料金が安いです。

ちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、エックスサーバー 。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

スポンサーリンク

コメントの投稿

ご注意:メールアドレスは書かないで
「コメントを送信する」ボタンを押した後の「確認画面」で、メールアドレス・URL などを入力できるようになっており、メールアドレス・URL は、そのままオートリンクになる仕様です。
当方でメールアドレスだけ削除することも、メールアドレスを非公開にすることもできません
メールアドレスは書かないでください。詳しくはこちらにまとめましたのでご覧ください。

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
11 | 2018/12 | 01
- - - - - - 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 - - - - -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.