CSS で要素の配置に関わるボックスは,ブロック要素とインライン要素とで大きく異なっている。この要素の分類は,HTML とともに使う範囲においては,基本的にブラウザが HTML 要素の種類に応じて定めるが,CSS で変えることもできる。
要素がブロック要素かインライン要素かというのは HTML や CSS の上でひじょうに重要であることは,ここまでの説明からであれ経験からであれよくご存じのことだろう。こと CSS に関しては前後に改行を伴うブロック要素はその外の要素いっぱいの幅のボックスを描き,前後に改行のないインライン要素はその部分だけに複数行にまたがる可能性のあるボックスを描くという違いがあった。
このブロック要素・インライン要素というのは,HTML が定義している文書の構造から簡単に類推できるようにブラウザが定めている。だからといって,その表示において要素の種類を変えることも可能である。
display: (キーワード);
これは,すべての要素について適用される。キーワードは 4 つから選択する。
この属性は継承されない。
多少ややこしい話であるが,この属性の既定値は block である。したがって,display 属性を指定しないとすべての要素がブロック要素になってしまいそうだが,現実はそうなってはいない。HTML の規格にしたがってブラウザがそれぞれの要素の display 属性の初期値を変えているのである。
CSS2 においては,この属性の初期値は inline に変更されている。
たとえば,
のような定義があらかじめなされていると,事実上考えてよいのである。
<H3 STYLE="display: inline; background: #69F;">display-属性</H3>
<P>初期値はブラウザによって <SPAN STYLE="display: block;">HTML の構造に合うよう</SPAN>設定されます。display 属性をむやみに変えると,構造と見た目の対応がとれなくなることがあります。</P>
初期値はブラウザによって HTML の構造に合うよう 設定されます。display 属性をむやみに変えると,構造と見た目の対応がとれなくなることがあります。
ブラウザは,display 属性はサポートしていなくてもよいことなっている(ブラウザが定める初期値から変えられない)。
IE4 display 属性は none を与えるかそれ以外かで表示・非表示を変えることしかできない。
IE3 display 属性はサポートされていない。
HTML 文書では,改行や連続した半角空白は <PRE> 以外ではとくに本質的な意味を持たないのが原則だが,この white-space 属性で HTML の原稿中にある空白の扱いを決めたり,行末での文字の流れの折り返しを設定することができる。
white-space : (キーワード);
キーワードは次の 3 つ。
ブロック要素に適用され,継承される。
これも,先ほどの display 属性と同じように,初期値は normal だが,要素に合わせてブラウザが初期値を設定し直すことになる。たとえば,<PRE> の white-space 属性の初期値は pre になる。
<P STYLE="white-space: pre;">white-space 属性は空 白 の 扱 い を設定します。</P>
white-space 属性は空 白 の 扱 い を設定します。
white-space 属性はブラウザによってはサポートされていなくてもよいということになっている(ブラウザが設定する初期値が使用される)。
IE3/4/5 white-space 属性はサポートされていない。