ほんっとにはじめての HTML5 と CSS3

前回の<pre>要素はソースコードを表示するのに適していますが、詩歌などを掲載したい場合は、CSSの「white-space : pre」を使う方法がベスト。

CSSだったら、HTML上は <p>や <div>要素などの汎用的なマークアップで済み、視覚的には制作者の意図通りにプレビューできますので、画像などで表現するよりアクセシビリティ的に良いですね。

ということで、今回は、CSSの「white-space」を紹介します。

この white-spaceプロパティの値は、上記の pre の他に「normal（初期値）」「nowrap（改行しない）」があります。
HTMLの <pre>要素と同じ表示をするのが「white-space : pre」です。

white-spaceプロパティのサンプルを見てみよう

サンプルを見てみましょう。
上から順に normal, pre, nowrapの値です。真ん中の「pre」に注目。

HTMLはこうなっています。各 <p> 要素のテキストの改行や字下げは全く同じで、クラス名が異なるだけ。改行のための <br>要素は使っていません。

<div id="whitespace">
<p class="ws-normal">【normal】
春はあけぼの。
       やうやう白くなりゆく山際、少しあかりて、
                                    紫だちたる雲の細くたなびきたる。
</p>
<p class="ws-pre">【pre】
春はあけぼの。
       やうやう白くなりゆく山際、少しあかりて、
                                    紫だちたる雲の細くたなびきたる。
</p>
<p class="ws-nowrap">【nowrap】
春はあけぼの。
       やうやう白くなりゆく山際、少しあかりて、
                                    紫だちたる雲の細くたなびきたる。
</p>
</div>

CSSはこちらです。
<p>要素の幅をあえて60％にしています（6行目）
「nomal」はその中で自動改行し、「pre」は、はみ出してでもソースどおりに表示します。「nowrap」は、改行せず一直線に表示します。

#whitespace {
	border: 1px solid #CCC;
	padding:1em
	}
#whitespace p {
	width:60%;
	padding:1em;
	background:#FBFBF0;
	margin:0 0 1em
	}
#whitespace p.ws-normal {
	white-space: normal
	}
#whitespace p.ws-pre {
	white-space: pre
	}
#whitespace p.ws-nowrap {
	white-space: nowrap
	}

normal, pre, nowrap の作用のまとめ

● normal
改行や複数の半角スペース（タブも）を、1つの半角スペースに表示し、表示領域の幅に合わせて自動改行します。デフォルト値（white-space を指定しなければコレになってます）
● pre
そのまんま表示します。HTMLの <pre>要素と同じプレビュー。
● nowrap
normal同様、改行や複数の半角スペース（タブ）を1つの半角スペースに表示しまずが、自動改行しません。

white-spaceプロパティには上記の他に pre-wrap、pre-line という値もあります。
詳しくは、本ブログのCSSカテゴリーの
【37】空白を詰めるかどうか決める white-spaceプロパティ をご覧ください。

次回予告

次回は「プログラム用テキストを表示する要素」<samp>要素、 <var>要素、 <kbd>要素をまとめます。

関連記事

• [37] HTML5要素の「カテゴリー」を見てみよう
• [36] コンテンツをまとめる figure と、そのキャプションの figcaption
• [35] 内容の区切りを示す hr 要素
• [34] 書字方向を指定する bdo要素と 書字方向を隔離する bdi要素
• [33-2] 単語の途中でも改行させるCSS「word-wrap: break-word」
• [33-1] 改行可能位置を示す wbr要素 を使ってみよう
• [32] その他のプログラム関連を示す samp、kbd、var、data要素
• [31-2] pre 要素と同じ表示をするCSS「white-space : pre」
• [31] code要素 と pre要素 でソースコードを表示しよう
• [30] 定義語を示す dfn要素 を abbr要素や dt要素と一緒に使おう
• [29] abbr要素で略語を示そう
• [28] blockquote要素で「引用されたブロック」を示そう
• [27] q要素で引用文を示そう
• （ちょっとメモ） u要素と s要素は復活（廃止ではありません）
• [26] 参照先のタイトルを表す cite要素を使おう

Tweet

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