[31-2] pre 要素と同じ表示をするCSS「white-space : pre」

最終更新日:2017年11月05日  (初回投稿日:2012年01月19日)

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

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

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

CSSプロパティ white-space
pre

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

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

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

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

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

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

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つの半角スペースに表示しまずが、自動改行しません

次回予告

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

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

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

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

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

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

スポンサーリンク

コメントの投稿

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

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
06 | 2018/07 | 08
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.