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 プロパティに従ってボックスの種類などが決定される。
多少複雑であるが,配置に関して複雑な指定を行ったときは避けられない事項である。まずは,“絶対配置または回り込み配置された要素は必ずブロックボックスを描く”ことを覚えていただければよいだろう。