Section 7 : 分類属性

 CSS で要素の配置に関わるボックスは,ブロック要素とインライン要素とで大きく異なっている。この要素の分類は,HTML とともに使う範囲においては,基本的にブラウザが HTML 要素の種類に応じて定めるが,CSS で変えることもできる。

要素の分類

 要素がブロック要素かインライン要素かというのは HTML や CSS の上でひじょうに重要であることは,ここまでの説明からであれ経験からであれよくご存じのことだろう。こと CSS に関しては前後に改行を伴うブロック要素はその外の要素いっぱいの幅のボックスを描き,前後に改行のないインライン要素はその部分だけに複数行にまたがる可能性のあるボックスを描くという違いがあった。

 このブロック要素・インライン要素というのは,HTML が定義している文書の構造から簡単に類推できるようにブラウザが定めている。だからといって,その表示において要素の種類を変えることも可能である。

display: (キーワード);

 これは,すべての要素について適用される。キーワードは 4 つから選択する。

block
その要素をブロック要素にする。初期値。
inline
その要素をインライン要素にする。
list-item
その要素を箇条書きの項目の扱いにする。すなわち,先頭に記号を伴うブロック要素にする。
none
その要素は表示されない。

この属性は継承されない

 多少ややこしい話であるが,この属性の既定値は block である。したがって,display 属性を指定しないとすべての要素がブロック要素になってしまいそうだが,現実はそうなってはいない。HTML の規格にしたがってブラウザがそれぞれの要素の display 属性の初期値を変えているのである。

 CSS2 においては,この属性の初期値は inline に変更されている。

 たとえば,

のような定義があらかじめなされていると,事実上考えてよいのである。

<H3 STYLE="display: inline; background: #69F;">display-属性</H3>
<P>初期値はブラウザによって <SPAN STYLE="display: block;">HTML の構造に合うよう</SPAN>設定されます。display 属性をむやみに変えると,構造と見た目の対応がとれなくなることがあります。</P>

display-属性

初期値はブラウザによって HTML の構造に合うよう 設定されます。display 属性をむやみに変えると,構造と見た目の対応がとれなくなることがあります。

ブラウザは,display 属性はサポートしていなくてもよいことなっている(ブラウザが定める初期値から変えられない)。

 IE4  display 属性は none を与えるかそれ以外かで表示・非表示を変えることしかできない。

 IE3  display 属性はサポートされていない。

white-space 属性

 HTML 文書では,改行や連続した半角空白は <PRE> 以外ではとくに本質的な意味を持たないのが原則だが,この white-space 属性で HTML の原稿中にある空白の扱いを決めたり,行末での文字の流れの折り返しを設定することができる。

white-space : (キーワード);

 キーワードは次の 3 つ。

normal
改行や連続した空白は意味を持たない。初期値。
pre
<PRE> のように,改行や空白がそのまま反映される。
nowrap
ブラウザの幅に合わせた折り返しのみを行わない。改行は <BR> で行うことになる。

ブロック要素に適用され,継承される

これも,先ほどの display 属性と同じように,初期値は normal だが,要素に合わせてブラウザが初期値を設定し直すことになる。たとえば,<PRE> の white-space 属性の初期値は pre になる。

<P STYLE="white-space: pre;">white-space 属性は空  白  の  扱  い  を設定します。</P>

white-space 属性は空 白 の 扱 い を設定します。

 white-space 属性はブラウザによってはサポートされていなくてもよいということになっている(ブラウザが設定する初期値が使用される)。

 IE3/4/5  white-space 属性はサポートされていない。