CSS では,要素が視覚的に出力されるとき,“ボックス”と呼ばれる矩形領域を用いて整形される。ここでは,ボックスの生成およびその形態をコントロールする方法と,さまざまなボックスについての基本事項を解説する。
display
プロパティ display
プロパティは,ボックスの生成とその形態(種類)を指定するものである。簡単には,その要素が出力されるか,出力されるときに,ブロックボックスを描くか,インラインボックスを描くか(または,コンテキストに応じてどちらかになるようなボックス形態にするか)を指定する。
display:
キーワード;
このプロパティは,
inline
である。
CSS1 では,このプロパティの初期値はキーワード block
である。
多くの HTML ブラウザでは,ブラウザの既定のスタイルシートでその初期値が inline
から書き換えられている。このおかげで,文書の要素の,文書の構造に対応したボックスが意識せず生成されている。
diaplay
プロパティは,次のようなキーワードをとる。HTML において多くのブラウザがそれを初期値と書き換えるような要素も同時に示した。
block
ADDRESS
,BLOCKQUOTE
,BODY
,DD
,DIV
,DL
,DT
,FIELDSET
,FORM
,Hn
,OBJECT
,OL
,P
,UL
,HR
,PRE
などがこれにあたる。
inline
A
,ABBR
,ACRONYM
,B
,BDO
,BIG
,BR
,BUTTON
,CITE
,CODE
,DFN
,EM
,I
,IMG
,INPUT
,KBD
,LABEL
,LEGEND
,Q
,SAMP
,SPAN
,STRONG
,SUB
,SUP
,TT
,VAR
などがこれにあたる。
list-item
LI
がこれにあたる。
marker
:after
または :before
擬似要素で生成されるボックスにのみ指定できる。この条件を満たさずこの値を使用すると,inline
と解釈される。
none
display
プロパティの値に関わらず出力されない。
run-in
,compact
table
,inline-table
,table-row-group
,table-column
,table-column-group
,table-header-group
,table-footer-group
,table-row
,table-cell
および table-caption
display
プロパティを使用して生成されるボックスを変える簡単な例をご覧いただこう。
P { line-height: 150%; }
STRONG { display: block; margin: 0 4em; font-weight: bolder; }
<P> 過酸化水素水は,密封しないで,ふたに穴のあいた容器に保存する。さもないと,分解して生じた酸素が容器の内圧を上げ,<STRONG>容器が破裂する</STRONG>恐れがある。</P>
過酸化水素水は,密封しないで,ふたに穴のあいた容器に保存する。さもないと,分解して生じた酸素が容器の内圧を上げ,容器が破裂する恐れがある。
none
かそれ以外かで要素の表示・非表示をコントロールすることしかできない。
none
,block
,inline
および list-item
の値のみサポートする。
display
プロパティ,float
プロパティおよび position
プロパティの関係 生成されるボックスの種類は,ただ display
プロパティのみによって決まるわけではない。float
プロパティ,position
プロパティの指定のされ方によって,互いの値が自動的に書き換えられることがある。
display
プロパティが none
であれば,ボックスは描かれないので,float
プロパティおよび position
プロパティの指定は無視される。
display
プロパティが none
でなく,position
プロパティが absolute
または fixed
の場合,display
プロパティは block
に,float
プロパティは none
に書き換えられる。したがって,絶対配置された要素は必ずブロックボックスを描く。
float
プロパティが none
でなければ,display
プロパティは block
に書き換えられる。したがって,回り込み配置された要素は必ずブロックボックスを描く。
display
プロパティに従ってボックスの種類などが決定される。
多少複雑であるが,配置に関して複雑な指定を行ったときは避けられない事項である。まずは,“絶対配置または回り込み配置された要素は必ずブロックボックスを描く”ことを覚えていただければよいだろう。