back / home ]

display

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

positionは、ボックスの位置を計算するために指定するプロパティです。

プロパティ

static | relative | absolute | fixed | inherit
初期値 static
適用対象 すべての要素。ただし、生成される内容は除く
継承性 なし
パーセント値 適用不可
メディアグループ visual

値には、次のものが指定できます。

static
通常のフローに従ってレイアウトされます。'left', 'top' は適用されません。
relative
通常のフローに従って位置が計算され、その通常の位置(基準)に対して相対的にずらされてレンダリングされます。 後続のボックスの位置は、このボックスが通常の位置からずらされていないものとして計算されます。
absolute
ボックスの位置を包含ブロックからの距離として計算します。(絶対配置) ボックスの位置及びサイズは、'left','right','top', 'bottom' を用いて、ボックスの包含ブロックに関するオフセットを指定します。 独立したレイヤーとしてレンダリングされ、後続のボックスの位置の計算には影響しません。
fixed
'absolute' を指定した場合と同様に計算されます。 ただし、ページやウィンドウなどの表示域に対して固定され、スクロールやページ分割に対して移動しません。

absoluteの場合、包含ブロックは、最も近い'static'以外の'position'をもつ先祖(親)によって次の方法で設定されます。

  1. 先祖がブロックレベルである場合、包含ブロックは、先祖のパディング辺によって形成されます。
  2. 先祖が行内レベルである場合、包含ブロックは、先祖の'direction'特性に依存します。

top,bottom,left,right(オフセット)

'position' の値が static 以外の場合、ボックスの包含ブロックに対するオフセット値を指定するプロパティです。

プロパティ

<length> | <percentage> | auto | inherit
初期値 auto
適用対象 位置指定されている要素
継承性 なし
パーセント値 包含ブロックの幅又は高さを 100% としてパーセントで指定する
メディアグループ visual

値には、次のものが指定できます。

<length>
長さを指定します。定義は別項参照
<percentage>
包含ブロックの幅又は高さを 100% としてパーセントで指定します。 'top', 'bottom' に対しては、包含ブロックの高さが明示的に指定されない場合は、 'auto' の場合と同様に解釈されます。
auto
0 で置換するか、利用可能な包含ブロックのサイズに対する変数値と解釈されます。

float

floatは、ボックスの浮動化方法を指定するプロパティです。 'position' が absolute か fixed である要素(絶対位置決めされた要素)を除いた、任意の要素に指定可能です。

プロパティ

left | right | none | inherit
初期値 none
適用対象 すべての要素。ただし、絶対位置決めされた要素又は生成された内容は除く。
継承性 なし
パーセント値 適用不可
メディアグループ visual

値には、次のものが指定できます。

left
左に浮動するブロックボックスを生成します。先行する内容はボックスの右側に配置されます。
right
右に浮動するブロックボックスを生成します。先行する内容はボックスの左側に配置されます。
none
ボックスは浮動しません。

値が left か right の場合は、'display' の値は無視されます。

clear

clearは、ボックスのどの辺が先行するボックスに隣接しないかを指定するプロパティです。

プロパティ

none | left | right | both | inherit
初期値 none
適用対象 ブロックレベル要素
継承性 なし
パーセント値 適用不可
メディアグループ visual

値には、次のものが指定できます。

left
左に浮動するブロックボックスよりも下に、新しい行を作ってレンダリングされます。
right
右に浮動するブロックボックスよりも下に、新しい行を作ってレンダリングされます。
both
浮動するブロックボックスよりも下に、新しい行を作ってレンダリングされます。
none
浮動するブロックボックスに対する、位置決め上の制約はありません。

z-index

z-indexは、位置指定されている要素のZ軸方向の重ね合わせ順序を指定するプロパティです。

プロパティ

auto | <integer> | inherit
初期値 auto
適用対象 位置指定されている要素
継承性 なし
パーセント値 適用不可
メディアグループ visual

値には、次のものが指定できます。

<integer>
相互に重なり合うボックス間で、 垂直方向のレイヤーのレベルを表し、数字が大きい程、上に表示されます。負の値が許されます。
auto
親要素のボックスと同じレイヤー上にフォーマットされます。

direction

directionは、表記方向を指定するプロパティです。

プロパティ

ltr | rtl | inherit
初期値 ltr
適用対象 すべての要素
継承性 あり
パーセント値 適用不可
メディアグループ visual

値には、次のものが指定できます。

ltr
書字方向を左から右(left to right)に設定します。
rtl
書字方向を右から左(right to left)に設定します。

unicode-bidi

unicode-bidiは、Unicodeの文字表記の方向を上書するよう指定するプロパティです。

プロパティ

normal | embed | bidi-override | inherit
初期値 normal
適用対象 すべての要素
継承性 なし
パーセント値 適用不可
メディアグループ visual

値には、次のものが指定できます。

normal
双方向アルゴリズムに追加/変更を施しません。
embed
マッチする対象がインライン要素の場合、双方向アルゴリズムに追加/変更を施し、 'direction' の値が採用されながら、Unicode による暗黙的な指定値が反映される余地が残されます。
bidi-override
マッチする対象がインライン要素か、インラインレベルの内容だけを持つブロックレベルの要素の場合、 双方向アルゴリズムに追加/変更を施し、'direction' の値が採用され、Unicode による暗黙的な指定値が反映される余地を残しません。

back / home ]