CSS properties references.
目次
- タグの属性分類
- display:
- 位置関連
-
position:
top:
right:
bottom:
left:
z-index:
- フローティング
-
float:
clear:
- 表示方向
-
direction:
- ボックスの幅と高さ
-
width:
min-width: max-width:
height:
min-height: max-height:
- 行に関する指定
-
line-height:
vertical-align:
- 枠からはみ出したときの処理
- overflow:
属性値
[視覚目次]
[属性値目次]
タグの属性を設定します。
- 値：block | inline | list-item | none (| 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 | inherit )
- 初期値：block
- 適用：すべてのタグ要素
- 継続性：無し
- パーセント値：無し
- 適用メディア：全て
- CSS Level:1,2
- 対応：I5.5 ○；I6.0 ○；N4.x △；N6.x ○；M1.0 ？；O6.0 ？
タグのブロックレベル、インラインレベル等を指定するための属性。CSS level 2において大幅に拡張されています。(HTMLではタグ自体の割り当てがはっきりしているので必要ありませんが、XML(XHTMLを含む)ではタグのレベル割り当てを行なっていないのでCSSを使用する時には必修の項目です。)
I5.5：block,inline,noneにのみ対応。
I6.0：block,inline,list-item,noneにのみ対応。
N4.x：block,inline,noneにのみ対応。
N6.x：block,inline,list-item,noneにのみ対応。
[視覚目次]
[属性値目次]
タグを固定するかの設定します。
- 値：static | relative | absolute | fixex | inherit
- 初期値：static
- 適用：全ての要素()
- 継続性：無し
- パーセント値：無し
- 適用メディア：visual
- CSS Level:2
- 対応：I5.5 ○；I6.0 ○；N4.x ○；N6.x ◎；M1.0 ◎；O6.0 ◎
static：初期値で何も指定していない時と同じ位置に表示され、top,bottm,right,leftの指定は無視されます。
relative：相対配置を行えるようにします。top,bottm,right,leftの指定はstaticで表示される位置からの相対位置になります。
absolute：絶対配置を行えるようにします。
fixed：絶対配置を行い更に位置を固定できるようにします。(Internet Explorer 5.5 未対応)
I5.5,I6.0,N4.x：fixedに非対応。
[視覚目次]
[属性値目次]
表示部分の上からの位置指定
[視覚目次]
[属性値目次]
表示部分の右からの位置指定
[視覚目次]
[属性値目次]
表示部分の下からの位置指定
[視覚目次]
[属性値目次]
表示部分の左からの位置指定
[視覚目次]
[属性値目次]
重なりの優先順位指定
- 値：auto | <integer> | inherit
- 初期値：auto
- 適用：位置指定のできる要素
- 継続性：無し
- パーセント値：無し
- 適用メディア：visual
- CSS Level:2
- 対応：I5.5 ◎；I6.0 ◎；N4.x ○；N6.x ○；M1.0 ○；O6.0 ◎
<integer>は整数の値を示しています。
N6.x,M1.0；負の値に対応していません。
[視覚目次]
[属性値目次]
テキストの回り込みを設定します。
- 値：left | right | none (| inherit )
- 初期値：none
- 適用：すべてのタグ要素
- 継続性：無し
- パーセント値：無し
- 適用メディア：visual
- CSS Level:1,2
- 対応：I5.5 ◎；I6.0 ◎；N4.x △；N6.x ◎；M1.0 ◎；O6.0 ◎
画像に対してテキストを回り込ませるようなときに使用します。
img{float:left;}と<img align="left">は同じ表示になります。
N4.x：場合によってはテキストと画像が重なり合うことがあります。
[視覚目次]
[属性値目次]
テキストの回り込みを解除します。
- 値：none | left | right | both (| inherit )
- 初期値：none
- 適用：すべてのタグ要素(CSS2ではブロックレベル要素のみ)
- 継続性：無し
- パーセント値：無し
- 適用メディア：visual
- CSS Level:1,2
- 対応：I5.5 ◎；I6.0 ◎；N4.x △；N6.x ○；M1.0 ○；O6.0 ◎
前述のfloatでのテキストの回り込みを解除するときに使用します。
N6.x,M1.0：属性値の反映されない要素のタグがあります。(hrなど)
[視覚目次]
[属性値目次]
文字を表示する方向を示します。
- 値：ltr | rtl | inherit
- 初期値：ltr
- 適用：すべての要素
- 継続性：有り
- パーセント値：無し
- 適用メディア：visual
- CSS Level:2
- 対応：I5.5 ？；I6.0 ？；N4.x ？；N6.x ？；M1.0 ？；O6.0 ？
[視覚目次]
[属性値目次]
ボックスの横幅を設定します。(パディングの内側の幅)
- 値：<length> | <percentage> | auto (| inherit)
- 初期値：auto
- 適用：ブロック要素とimg要素(CSS2:inline要素、table rows、row groups 以外)
- 継続性：無し
- パーセント値：親要素の横幅を基準に取る
- 適用メディア：visual
- CSS Level:1,2
- 対応：I5.5 ○；I6.0 ○；N4.x ○；N6.x ◎；M1.0 ◎；O6.0 ◎
I5.5：幅の計算方法が標準に準拠していません。(ボーダーの外側の幅になります。)
I6.0：標準互換モードの時のみ正確な値を取ります。
N4.x：変な値を取ります。
[視覚目次]
[属性値目次]
ボックスの横幅を設定します。
- 値：<length> | <percentage> | inherit
- 初期値：UA 依存(min-width) / 無し(max-width)
- 適用：inline要素、table rows、row groups 以外
- 継続性：無し
- パーセント値：親要素の横幅を基準に取る
- 適用メディア：visual
- CSS Level:2
- 対応：I5.5 ×；I6.0 ×；N4.x ×；N6.x ◎；M1.0 ◎；O6.0 ？
[視覚目次]
[属性値目次]
ボックスの高さを設定します。(パディングの内側の高さ)
- 値：<length> | auto (| inherit)
- 初期値：auto
- 適用：ブロック要素とimg要素(CSS2:inline要素、table columns、column groups 以外)
- 継続性：無し
- パーセント値：無し
- 適用メディア：visual
- CSS Level:1,2
- 対応：I5.5 ○；I6.0 ○；N4.x ○；N6.x ◎；M1.0 ◎；O6.0 ◎
I5.5：幅の計算方法が標準に準拠していません。(ボーダーの外側の幅になります。)
I6.0：標準互換モードの時のみ正確な値を取ります。
N4.x：変な値を取ります。
[視覚目次]
[属性値目次]
ボックスの高さを設定します。
- 値：<length> | <percentage> | inherit
- 初期値：0(min-height) / 無し(max-height)
- 適用：inline要素、table rows、row groups 以外
- 継続性：無し
- パーセント値：親要素の横幅を基準に取る
- 適用メディア：visual
- CSS Level:2
- 対応：I5.5 ×；I6.0 ？；N4.x ×；N6.x ◎；M1.0 ◎；O6.0 ？
[視覚目次]
[属性値目次]
行間を設定します。
- 値：normal | <number> | <length> | <percentage> (| inherit)
- 初期値：normal
- 適用：すべてのタグ要素
- 継続性：有り
- パーセント値：文字サイズを基準に取る
- 適用メディア：visual
- CSS Level:1,2
- 対応：I5.5 ◎；I6.0 ◎；N4.x △；N6.x ◎；M1.0 ◎；O6.0 ◎
N4.x：画像が文字に重なり読めなくなることがあります。
[視覚目次]
[属性値目次]
縦方向の位置を設定します。
- 値：baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length> (| inherit)
- 初期値：baseline
- 適用：インライン要素(とtable-cell要素)
- 継続性：無し
- パーセント値：line-heightを基準に取る
- 適用メディア：visual
- CSS Level:1,2
- 対応：I5.5 ○；I6.0 ◎；N4.x ○；N6.x ◎；M1.0 ◎；O6.0 ？
I5.5：<percentage>,<length>に対応していません。
N4.x：sup,super,<percentage>,<length>に対応していません。
[視覚目次]
[属性値目次]
枠からはみ出したときの処理を指示します。
- 値：visible | hidden | scroll | auto | inherit
- 初期値：visible
- 適用：ブロック要素
- 継続性：無し
- パーセント値：無し
- 適用メディア：visual
- CSS Level:2
- 対応：I5.5 ○；I6.0 ？；N4.x ×；N6.x ？；M1.0 ◎；O6.0 △
visible：枠からはみ出した部分も表示する。
hidden：枠内のみ表示。
scroll：スクロールバーが付く。
auto：UA依存。
I5.5：visibleを指定したときに枠の高さが自動調整される。
O6.0：scrollに非対応。
属性値目次
目次
- リストスタイルに関する属性値
- list-style-type:
list-style-image:
list-style-position:
list-style:
属性値
[リスト目次]
[属性値目次]
リスト要素のヘッダースタイルを設定します。
- 値：disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none (| decimal-leading-zero | lower-greek | lower-latin | upper-latin | hebrew | armenian | georgian | cjk-ideographic | hiragana | katakana |hiragana-iroha | katakana-iroha | inherit )
- 初期値：disc
- 適用：display属性がlist-itemのタグ要素
- 継続性：有り
- パーセント値：無し
- 適用メディア：list要素
- CSS Level:1,2
- 対応：I5.5 ○；I6.0 ○；N4.x ×；N6.x ◎；M1.0 ◎；O6.0 ○
各値の見え方
I5.5,I6.0：CSS 1 規定分のみ対応
N4.x：非対応
Opera 6.01：CSS 1 規定分と、lower-gree,armenian,georgian に対応。
armenian,georgian を表示させるためには特殊なフォントが必要なようです。
[リスト目次]
[属性値目次]
リスト要素のヘッダーに使用する画像を設定します。
- 値：<url> | none (| inherit )
- 初期値：none
- 適用：display属性がlist-itemのタグ要素
- 継続性：有り
- パーセント値：無し
- CSS Level:1,2
- 対応：I5.5 ◎；I6.0 ◎；N4.x ×；N6.x ◎；M1.0 ◎；O6.0 ？
[リスト目次]
[属性値目次]
リスト要素のヘッダー位置を設定します。
- 値：inside | outside (| inherit )
- 初期値：outside
- 適用：display属性がlist-itemのタグ要素
- 継続性：有り
- パーセント値：無し
- CSS Level:1,2
- 対応：I5.5 ◎；I6.0 ◎；N4.x ×；N6.x ◎；M1.0 ◎；O6.0 ？
[リスト目次]
[属性値目次]
リスト要素の設定をまとめて行います。
- 値：<keyword> || <position> || <url> (| inherit )
- 初期値：無し(省略型表記のため)
- 適用：display属性がlist-itemのタグ要素
- 継続性：有り
- パーセント値：無し
- CSS Level:1,2
- 対応：I5.5 ○；I6.0 ○；N4.x ×；N6.x ◎；M1.0 ◎；O6.0 ○
Copyright© All rights "ZABAN-SANGYO" reserved 2002.
全ての画像、及び文章の無断使用を禁じます。お問い合わせは座板産業まで。
このページの作成は「諸冨」です。