displayは、どのようなボックスを生成するのかを指定するプロパティです。
インライン要素をブロックレベル要素に変更する、といったことが可能です。
プロパティ
値 |
inline | block | list-item | run-in | compact | marker | table |
inline-table | table-row-group | table-header-group | table-footer-group |
table-row | table-column-group | table-column | table-cell | table-caption | none | inherit |
初期値 |
inline |
適用対象 |
すべての要素 |
継承性 |
なし |
パーセント値 |
適用不可 |
メディアグループ |
all |
値には、次のものが指定できます。
- block
- 要素に基本ブロックボックスを生成させます。
- inline
- 要素に一つ以上のインラインボックスを生成させます。
- list-item
- HTMLの li などの要素に基本ブロックボックス及びリスト項目行内ボックスを生成させます。
- marker
- ボックスの前又は後の生成される内容をマーカと宣言します。
この値は、ブロックレベル要素に対する擬似要素 :before, :after と共に使われます。その他の場合は、'inline' と解釈されます。
- none
- 要素が全くボックスを生成しません。そのため、レイアウトに影響しません。
- 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
- テーブル関連の要素に類似した要素を定義する。
サンプルコード
h4{
display:inline;
}
span#disp{
display:block;
}
結果
ここは、<h4>要素内です。
この段落内では、<span>をブロックレベルに指定しています。
positionは、ボックスの位置を計算するために指定するプロパティです。
プロパティ
値 |
static | relative | absolute | fixed | inherit |
初期値 |
static |
適用対象 |
すべての要素。ただし、生成される内容は除く |
継承性 |
なし |
パーセント値 |
適用不可 |
メディアグループ |
visual |
値には、次のものが指定できます。
- static
- 通常のフローに従ってレイアウトされます。'left', 'top' は適用されません。
- relative
- 通常のフローに従って位置が計算され、その通常の位置(基準)に対して相対的にずらされてレンダリングされます。
後続のボックスの位置は、このボックスが通常の位置からずらされていないものとして計算されます。
- absolute
- ボックスの位置を包含ブロックからの距離として計算します。(絶対配置)
ボックスの位置及びサイズは、'left','right','top', 'bottom' を用いて、ボックスの包含ブロックに関するオフセットを指定します。
独立したレイヤーとしてレンダリングされ、後続のボックスの位置の計算には影響しません。
- fixed
- 'absolute' を指定した場合と同様に計算されます。
ただし、ページやウィンドウなどの表示域に対して固定され、スクロールやページ分割に対して移動しません。
absoluteの場合、包含ブロックは、最も近い'static'以外の'position'をもつ先祖(親)によって次の方法で設定されます。
- 先祖がブロックレベルである場合、包含ブロックは、先祖のパディング辺によって形成されます。
- 先祖が行内レベルである場合、包含ブロックは、先祖の'direction'特性に依存します。
'position' の値が static 以外の場合、ボックスの包含ブロックに対するオフセット値を指定するプロパティです。
プロパティ
値 |
<length> | <percentage> | auto | inherit |
初期値 |
auto |
適用対象 |
位置指定されている要素 |
継承性 |
なし |
パーセント値 |
包含ブロックの幅又は高さを 100% としてパーセントで指定する |
メディアグループ |
visual |
値には、次のものが指定できます。
- <length>
- 長さを指定します。定義は別項参照
- <percentage>
- 包含ブロックの幅又は高さを 100% としてパーセントで指定します。
'top', 'bottom' に対しては、包含ブロックの高さが明示的に指定されない場合は、
'auto' の場合と同様に解釈されます。
- auto
- 0 で置換するか、利用可能な包含ブロックのサイズに対する変数値と解釈されます。
floatは、ボックスの浮動化方法を指定するプロパティです。
'position' が absolute か fixed である要素(絶対位置決めされた要素)を除いた、任意の要素に指定可能です。
プロパティ
値 |
left | right | none | inherit |
初期値 |
none |
適用対象 |
すべての要素。ただし、絶対位置決めされた要素又は生成された内容は除く。 |
継承性 |
なし |
パーセント値 |
適用不可 |
メディアグループ |
visual |
値には、次のものが指定できます。
- left
- 左に浮動するブロックボックスを生成します。先行する内容はボックスの右側に配置されます。
- right
- 右に浮動するブロックボックスを生成します。先行する内容はボックスの左側に配置されます。
- none
- ボックスは浮動しません。
値が left か right の場合は、'display' の値は無視されます。
clearは、ボックスのどの辺が先行するボックスに隣接しないかを指定するプロパティです。
プロパティ
値 |
none | left | right | both | inherit |
初期値 |
none |
適用対象 |
ブロックレベル要素 |
継承性 |
なし |
パーセント値 |
適用不可 |
メディアグループ |
visual |
値には、次のものが指定できます。
- left
- 左に浮動するブロックボックスよりも下に、新しい行を作ってレンダリングされます。
- right
- 右に浮動するブロックボックスよりも下に、新しい行を作ってレンダリングされます。
- both
- 浮動するブロックボックスよりも下に、新しい行を作ってレンダリングされます。
- none
- 浮動するブロックボックスに対する、位置決め上の制約はありません。
z-indexは、位置指定されている要素のZ軸方向の重ね合わせ順序を指定するプロパティです。
プロパティ
値 |
auto | <integer> | inherit |
初期値 |
auto |
適用対象 |
位置指定されている要素 |
継承性 |
なし |
パーセント値 |
適用不可 |
メディアグループ |
visual |
値には、次のものが指定できます。
- <integer>
- 相互に重なり合うボックス間で、
垂直方向のレイヤーのレベルを表し、数字が大きい程、上に表示されます。負の値が許されます。
- auto
- 親要素のボックスと同じレイヤー上にフォーマットされます。
directionは、表記方向を指定するプロパティです。
プロパティ
値 |
ltr | rtl | inherit |
初期値 |
ltr |
適用対象 |
すべての要素 |
継承性 |
あり |
パーセント値 |
適用不可 |
メディアグループ |
visual |
値には、次のものが指定できます。
- ltr
- 書字方向を左から右(left to right)に設定します。
- rtl
- 書字方向を右から左(right to left)に設定します。
unicode-bidiは、Unicodeの文字表記の方向を上書するよう指定するプロパティです。
プロパティ
値 |
normal | embed | bidi-override | inherit |
初期値 |
normal |
適用対象 |
すべての要素 |
継承性 |
なし |
パーセント値 |
適用不可 |
メディアグループ |
visual |
値には、次のものが指定できます。
- normal
- 双方向アルゴリズムに追加/変更を施しません。
- embed
- マッチする対象がインライン要素の場合、双方向アルゴリズムに追加/変更を施し、
'direction' の値が採用されながら、Unicode による暗黙的な指定値が反映される余地が残されます。
- bidi-override
- マッチする対象がインライン要素か、インラインレベルの内容だけを持つブロックレベルの要素の場合、
双方向アルゴリズムに追加/変更を施し、'direction' の値が採用され、Unicode による暗黙的な指定値が反映される余地を残しません。
Copyright 1997-2010 BBB All rights reserved.