Part 1. Let's begin CSS : Chapter 4. “要素の操作”

4.6 ボックスの形態(1)

 CSS では,要素が視覚的に出力されるとき,“ボックス”と呼ばれる矩形領域を用いて整形される。ここでは,ボックスの生成およびその形態をコントロールする方法と,さまざまなボックスについての基本事項を解説する。

ボックスの生成と形態:display プロパティ

 display プロパティは,ボックスの生成とその形態(種類)を指定するものである。簡単には,その要素が出力されるか,出力されるときに,ブロックボックスを描くか,インラインボックスを描くか(または,コンテキストに応じてどちらかになるようなボックス形態にするか)を指定する。

display: キーワード;

このプロパティは,

  • すべての要素に適用される。
  • 初期値は,キーワード inline である。
  • プロパティの値は,継承されない。

 CSS1 では,このプロパティの初期値はキーワード block である。

 多くの HTML ブラウザでは,ブラウザの既定のスタイルシートでその初期値が inline から書き換えられている。このおかげで,文書の要素の,文書の構造に対応したボックスが意識せず生成されている。

 diaplay プロパティは,次のようなキーワードをとる。HTML において多くのブラウザがそれを初期値と書き換えるような要素も同時に示した。

block
ブロックボックスを描く。HTML では,ADDRESSBLOCKQUOTEBODYDDDIVDLDTFIELDSETFORMHnOBJECTOLPULHRPRE などがこれにあたる。
inline
インラインボックスを描く。HTML では,AABBRACRONYMBBDOBIGBRBUTTONCITECODEDFNEMIIMGINPUTKBDLABELLEGENDQSAMPSPANSTRONGSUBSUPTTVAR などがこれにあたる。
list-item
箇条書きの項目。内容が収められるブロックボックスと,行頭記号・番号のためのボックスを生成する。HTML では,LI がこれにあたる。
marker
マーカボックス。ブロックボックスに対して,:after または :before 擬似要素で生成されるボックスにのみ指定できる。この条件を満たさずこの値を使用すると,inline と解釈される。
none
要素はボックスを生成せず,したがって出力されない。これが指定された要素の下位要素は,それらの display プロパティの値に関わらず出力されない
run-incompact
ランインボックスおよびコンパクトボックスは,前後の状況によりブロックボックスを描いたり,インラインボックスを描いたりする。詳細は 4.7 で述べる。
tableinline-tabletable-row-grouptable-columntable-column-grouptable-header-grouptable-footer-grouptable-rowtable-cell および table-caption
これらの値は,表に関わる要素について指定するものである。詳しくは後述する。

 display プロパティを使用して生成されるボックスを変える簡単な例をご覧いただこう。

P { line-height: 150%; }
STRONG { display: block; margin: 0 4em; font-weight: bolder; }

<P> 過酸化水素水は,密封しないで,ふたに穴のあいた容器に保存する。さもないと,分解して生じた酸素が容器の内圧を上げ,<STRONG>容器が破裂する</STRONG>恐れがある。</P>

 過酸化水素水は,密封しないで,ふたに穴のあいた容器に保存する。さもないと,分解して生じた酸素が容器の内圧を上げ,容器が破裂する恐れがある。

IE4
値が none かそれ以外かで要素の表示・非表示をコントロールすることしかできない。
IE5, 5.5, 6
noneblockinline および 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 プロパティに従ってボックスの種類などが決定される。

多少複雑であるが,配置に関して複雑な指定を行ったときは避けられない事項である。まずは,“絶対配置または回り込み配置された要素は必ずブロックボックスを描く”ことを覚えていただければよいだろう。