CSSのwhite-spaceプロパティについて

CSSのwhite-spaceプロパティの意味がわかりません。まず、「半角空白、改行、タブ...msmssatさん

CSSのwhite-spaceプロパティの意味がわかりません。まず、「半角空白、改行、タブ」という言葉が出てきますが「タブ」とはなんなのかがわかりません。

そしてwhite-spaceプロパティには、normal,pre,nowrapと３つの値があるようですが、その違いが何なのかがわかりません。
ネット上で調べたのですが、どのような違いがあるのかがわからないのです。
CSS初心者です。
是非、お知恵を頂きたいと思っております。わかりやすくご説明をお願いします。

なお、Webクリエイター上級試験の勉強を独学でしております。
そのために、ご協力ください。
大変恐縮ですが、よろしくお願いいたします。

No.1 ベストアンサー 回答者： noname#158634 回答日時： 2011/12/28 18:56

＞タブ

タブキーを押したときに挿入される、一般にはスペースキー時の空白の数個分を一塊とする空白文字です。
まあ普段使わない人は知らないでしょうね。

＞normal,pre,nowrap
「CSS　white-space」で検索して最初に出るサイトにすごく簡潔にわかりやすく説明されてるわけですが。
http://www.htmq.com/style/white-space.shtml

normal
ソース中の連続する半角スペース・タブ・改行を、1つの半角スペースとして表示します。「ボックスの大きさが指定されている場合には、その大きさに応じて自動的に改行されます」。
pre
ソース中の連続する半角スペース・タブ・改行を、「そのまま表示」します。
nowrap
ソース中の連続する半角スペース・タブ・改行を、1つの半角スペースとして表示します。「ボックスの大きさが指定されている場合にも、自動的に改行されません」。

このままです。ただし括弧は私による強調。
合わせて、下の「ブラウザ上の表示」というところを見れば違いは一目瞭然です。


独学で上級試験を受けるつもりならこれくらい自力で調べて自力で理解できないと覚束無いと思いますので頑張ってください。

この回答へのお礼

ご回答まことにありがとうございます。。

なんとなく、理解できました。

あとは、これを自分で使えるように確かめながら、練習したいと思います。

単に、覚えるのではなく、単に、資格を取得するのではなく、それを使えるように
したいと思います。

頑張りたいと思います。

お礼日時：2011/12/29 21:18

No.2 回答者： ORUKA1951 回答日時： 2011/12/28 19:03

white-spaceの値はCSS2では３つでしたが、現行のCSS2.1では、

normal | pre | nowrap | pre-wrap | pre-line | inherit
の５個と、inheritです。

16.6 Whitespace: the 'white-space' property ( http://www.w3.org/TR/2004/CR-CSS21-20040225/text … )

【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
normal
　This value directs user agents to collapse sequences of whitespace, and break
　lines as necessary to fill line boxes.
pre
　This value prevents user agents from collapsing sequences of whitespace.
　Lines are only broken at newlines in the source, or at occurrences of "\A"
　in generated content.
nowrap
　This value collapses whitespace as for 'normal', but suppresses line breaks
　within text.
pre-wrap
　This value prevents user agents from collapsing sequences of whitespace.
　Lines are broken at newlines in the source, at occurrences of "\A" in generated
　content, and as necessary to fill line boxes.
pre-line
　This value directs user agents to collapse sequences of whitespace. Lines are
　broken at newlines in the source, at occurrences of "\A" in generated content,
　and as necessary to fill line boxes.
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Text( http://www.w3.org/TR/2004/CR-CSS21-20040225/text … )］より

normalはHTMLの標準的な処理です。
nowrapは、単語境界で改行しない・・HTMLの<nowrap>と同じ
prewrapは、HTMLのpreと同じ

以上はHTMLの仕様と同じですから、HTML仕様書を確認してください。
★9.1 空白類 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )


[CSS独自の値は]
pre-wrap
　連続した空白文字はそのままですが、改行コード\Aで折り返されます。
pre-line
　連続した改行を除く空白文字はひとつに整理され、ボックスをはみ出すと自動的に改行されます。
　

連続する空白がひとつに整理される(HTMLデフォルト) normal,nowwrap,pre-line
改行文字で折り返される　　　　　　　　　　　　　　　pre,pre-wrap,pre-line
自動的に折り返される　　　　　　　　　　　　　　　　normal,pre-wrap,pre-line

No.3 回答者： ORUKA1951 回答日時： 2011/12/28 19:18

No.2です。

　これは質問への直接の回答ではありませんが、『Webクリエイター上級試験の勉強を独学でしております。』と言うことなのでアドバイスです。
　ネットや掲示板で情報を得られたとしても、それが正しいか、そうでないかはわかりません。どんなときでも必ず仕様書を確認することが基本です。
white-spaceのみならず、空白類などは重要な基礎知識で、必ず仕様書に記載されています。勧告の準備が進んでいるHTML5も、HTML4.01を知っていれば、
★HTML5 における HTML4 からの変更点
　http://standards.mitsue.co.jp/resources/w3c/TR/h …
　http://www.w3.org/TR/2011/WD-html5-diff-20110525/
で済みます。

　少なくとも
HTML 4.01 仕様書邦訳 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
　位は隅々まで目を通しておきましょう。CSS2.1の邦訳は知りませんが、現行ではHTML4.01strict(transitinalじゃない)とCSS2.1がウェブ標準とみなされています。

この回答へのお礼

ORUKA1951 さん。

回答とアドバイスをいただきありがとうございます。

知れば知るほど、深いですね。。

単に資格をとろうとするだけなら良いのですが
HTMLにもバージョンがあることを考えるときりがないですね。

仕様書をきちんと読んで理解したいと思います。

お礼日時：2011/12/29 21:23