[31-2] pre 要素と同じ効果のCSS「white-space : pre」

最終更新日:-0001年11月30日  (初回投稿日:2012年01月19日)

前回の<pre>要素はソースコードを表示するのに適しています。
詩歌などを掲載したい場合は、
CSSの「white-space : pre」を使う方法がベスト。
CSSだったら、HTML上はテキスト形式であり、視覚的にはWeb制作者の意図通りにプレビューできますので、画像を使うよりアクセシビリティ的に良いですね。

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

CSSプロパティ white-space
pre

この white-spaceプロパティの他の値は、「normal(初期値)」「nowrap(改行しない)」があります。これも下で説明します。
HTMLの<pre>要素と同じ働きをするのは、CSSの「white-space : pre」指定です。

white-space のサンプルで見てみましょう

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

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

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

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

CSSソースはこちらです。
<p>要素のid名を、上から「wsnormal」「wspreview」「wsnowrap」とつけています。
「white-space」の値をそれぞれ「normal」「pre」「nowrap」にしていますよ。

div#whitespace { border: 1px solid #CCC; padding:1em; }
div#whitespace p { padding:1em; background:#FBFBF0; width:70%; }
div#whitespace p#wsnormal { white-space: normal; }
div#whitespace p#wspreview { white-space: pre; }
div#whitespace p#wsnowrap { white-space: nowrap; }

HTMLソースはこうなっています。<p>のid名が異なるだけで、テキストの改行や字下げは全くおなじにしていますよ。

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

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

● normal
改行や複数の半角スペース(タブも)を、1つの半角スペースに表示し、表示領域の幅に合わせて自動改行します。
● pre
そのまんま表示します。HTMLの<pre>要素と同じプレビュー。
● nowrap
normal同様、改行や複数の半角スペース(タブ)を1つの半角スペースに表示しまずが、自動改行しません。

次回予告

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

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

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

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

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

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

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
09 | 2017/10 | 11
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.