<<PREV(P) | ToC(T) | NEXT(N)>>

リスト

Revised: Jun./26th/2004

マーカとリスト

CSS2 では、要素が二つのボックスを生成する機構を持っています。一つは要素の内容を含む基本ブロックボックスと呼ばれ、もう一つはリストなどの記号や番号などの装飾を含む分離マーカボックスと呼ばれます。

マーカーは、'display: marker' の要素に対して、基本ボックスの外側に、行ボックスとして生成されます。このボックスはパッディングとボーダーを持ちますが、マージンがありません。マージンに類する指定は、'list-style-position' と 'marker-offset' で指定します。

  1. marker-offset
  2. list-style-type
  3. list-style-image
  4. list-style-position
  5. list-style

marker-offset

プロパティ 'marker-offset' は、'display: marker' の要素に指定可能です。'display: marker' は、擬似要素 :before か :after をセレクタとして指定し、それ以外のセレクタに対しては、'display: inline' と等価になります。セレクタにマッチした対象のマーカボックスと基本ボックスの距離を指定します。

プロパティ 'marker-offset'
プロパティ名値
marker-offset<length> | auto | inherit

'marker-offset' は子要素に継承されません。デフォルトの値は auto です。inherit は、親要素の値を明示的に継承する指定です。

'marker-offset' の例：

/* li 要素のマーカから基本ボックスまでの距離を 2em */
li:before { display: marker; marker-offset: 2em }

<ul>
<li style="marker-offset: 1em">list-item. offset 1em</li>
<li style="marker-offset: 2em">list-item. offset 2em</li>
</ul>

list-style-type

プロパティ 'list-style-type' は、'display: list-item' の要素に指定可能です。セレクタにマッチした対象のマーカボックスと基本ボックスの距離を指定します。

プロパティ 'list-style-type'
プロパティ名値
list-style-typedisc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-alpha | lower-latin | upper-alpha | upper-latin | hebrew | armenian | georgian | cjk-ideographic | hiragana | katakana | hiragana-iroha | katakana-iroha | none | inherit

'list-style-type' は子要素に継承されます。デフォルトの値は disc です。inherit は、親要素の値を明示的に継承する指定です。

'list-style-type' の例：

ul { list-style-tyupe: disc }
ul ul { list-style-tyupe: circle }
ul ul ul { list-style-tyupe: square }

disc: 黒丸

circle: 丸

square: 四角

decimal: 1,2,3,4,...

decimal-leading-zero: 01,02,03,04,...

lower-roman: i,ii,iii,iv,v,...

upper-roman: I,II,III,IV,V,...

hebrew: ヘブライ数字。Hebrew number 1,Hebrew number 2,Hebrew number 3,Hebrew number 4,Hebrew number 5,Hebrew number 6,Hebrew number 7,Hebrew number 8,Hebrew number 9,Hebrew number 10,...

georgian: グルジア数字。Gergian number 1,Gergian number 2,Gergian number 3,Gergian number 4,Gergian number 5,Gergian number 6,Gergian number 7,Gergian number 8,Gergian number 9,Gergian number 10,...

armenian: アルメニア数字。Armenian number 1,Armenian number 2,Armenian number 3,Armenian number 4,Armenian number 5,Armenian number 6,Armenian number 7,Armenian number 8,Armenian number 9,Armenian number 10,...

cjk-ideographic: 漢数字 (CJK=Chinese, Japanese, Korean)

hiragana: あ,い,う,え,...

katakana: ア,イ,ウ,エ,...

hiragana-iroha: い,ろ,は,に,...

katakana-iroha: イ,ロ,ハ,ニ,...

lower-latin: a,b,c,d,...

lower-alpha: lower-latin と同じ

upper-latin: A,B,C,D,...

upper-alpha: upper-latin と同じ

lower-greek: 小文字ギリシャ文字。α,β,γ,δ,ε,ζ,η,&theta,...

ヘブライアルメニアグルジア
ol {
  font-family: serif;
  dislilay: list-item;
  list-style-type: hebrew
  }

ol {
  font-family: serif;
  dislilay: list-item;
  list-style-type: armenian
  }

ol {
  font-family: serif;
  dislilay: list-item;
  list-style-type: georgian
  }
  1. Hebrew 1
  2. Hebrew 2
  3. Hebrew 3
  4. Hebrew 4
  5. Hebrew 5
  6. Hebrew 6
  7. Hebrew 7
  8. Hebrew 8
  9. Hebrew 9
  10. Hebrew 10
  1. Armenian 1
  2. Armenian 2
  3. Armenian 3
  4. Armenian 4
  5. Armenian 5
  6. Armenian 6
  7. Armenian 7
  8. Armenian 8
  9. Armenian 9
  10. Armenian 10
  1. Georgian 1
  2. Georgian 2
  3. Georgian 3
  4. Georgian 4
  5. Georgian 5
  6. Georgian 6
  7. Georgian 7
  8. Georgian 8
  9. Georgian 9
  10. Georgian 10

list-style-image

プロパティ 'list-style-image' は、'display: list-item' の要素に指定可能です。セレクタにマッチした対象のマーカボックスのマーカに使用する画像を指定します。

プロパティ 'list-style-image'
プロパティ名値
list-style-image<uri> | none | inherit

'list-style-image' は子要素に継承されます。デフォルトの値は none です。inherit は、親要素の値を明示的に継承する指定です。

画像が使用できれば、'list-style-type' で指定されたマーカを置換します。画像が使用できない場合に備えて、'list-style-image' と同時に指定することが望ましいでしょう。

'list-style-image' の例：

ul { list-style-type: disc;
	list-style-image: url(./disc.png) }

後で紹介する省略プロパティ 'list-style' を使うと、次のように指定できます。

ul { list-style: url(./disc.png) disc }

list-style-position

プロパティ 'list-style-position' は、'display: list-item' の要素に指定可能です。セレクタにマッチした対象のマーカボックスの基本ボックスに対する位置を指定します。

プロパティ 'list-style-position'
プロパティ名値
list-style-positioninside | outside | inherit

'list-style-position' は子要素に継承されます。デフォルトの値は outside です。inherit は、親要素の値を明示的に継承する指定です。

outside
マーカボックスは基本ブロックボックスの外側に配置されます。基本ボックスとの距離は、'display: maeker' である要素の 'marker-offset' で指定する。
inside
マーカボックスは基本ブロックボックスの最初のインラインボックスであり、その後に要素の内容が流れ込む。

'list-style-position' の例：

ol { list-style-position: inside }
  1. In the beginning God created the heaven and the earth.
  2. And the earth was without form, and void; and darkness was upon the face of the deep. And the Spirit of God moved upon the face of the waters.
  3. And God said, Let there be light: and there was light.
  4. And God saw the light, that it was good: and God divided the light from the darkness.
  5. And God called the light Day, and the darkness he called Night. And the evening and the morning were the first day.

list-style

プロパティ 'list-style' は、'display: list-item' の要素に指定可能です。セレクタにマッチした対象の、リスト関係の省略プロパティを指定します。

プロパティ 'list-style'
プロパティ名値
list-style[ <'list-style-type'> || <'list-style-position'> || <'list-style-image'> ] | inherit

'list-style' は子要素に継承されます。デフォルトの値は未定義です。inherit は、親要素の値を明示的に継承する指定です。

'list-style' の例：

/* 画像 "./eclipse.png" 又は disc を使用 */
ul { list-style: url(./eclipse.png) disc }

<<PREV(P) | ToC(T) | NEXT(N)>>

Copyright © 2004 SUGAI, Manabu. All rights reserved.
2004-06-26 published.