マーカーの一括指定 (Lists)

 
リストの点や数字
ホーム > CSS2 Note > マーカーの一括指定
C1- ie4- N4-

説明

list-style: type position image; C1- ie4- N4-
値:  [ <'マーカーの種類'> || <'マーカーの表示位置'> || <'マーカーに画像'> ] | inherit
初期値:disc outside none適用要素:display:list-item」の要素継承:する%値:なしメディア:ビジュアル
このプロパティは、リストの点や数字(マーカー)に関するプロパティをまとめて指定するプロパティです。必要な値を任意の順序で半角スペース[ ]で区切って指定します。

*1 CSS2、CSS2.1の仕様書における適用要素は「display:list-item」の要素になります。HTMLにおける適用要素は ol ul dir|menu li要素です。
*2 list-style:none;と指定した場合、すべてのブラウザにおいてマーカーは表示されません(list-style-image:none;とは解釈されず、list-style-type:none;として解釈されます)。
 

使用例

ol {list-style:upper-roman inside;}
 
 

ブラウザごとによる点の形状

グリフ(glyph: 絵文字)の形状はブラウザによってレンダリング(描画)が異なります。特にIE8の点の形状は特徴があるので注意が必要です。
 *1 CSS2では、グリフのレンダリングは特に定めず、ブラウザに依存します。
typeW3Cie7ie8ff3o9gc2sf4
disc塗りつぶされた丸IE7IE8Firefox3Opera9Chrome2Safari4
square塗りつぶされた四角
circle線で描かれた丸
 

マーカーの種類 <'list-style-type'>

グリフ(glyph: 絵文字)の表示

 (*1)
discC1- ie4- N4- 塗りつぶされた丸。初期値。
circleC1- ie4- N4- 線で描かれた丸。
squareC1- ie4- N4- 塗りつぶされた四角。
 *1 CSS2では、グリフのレンダリングは特に定めず、ブラウザに依存します。

番号振り

decimalC1- ie4- N4- 10進法で1から数えます。(1, 2, 3, 4, 5)
decimal-leading-zeroC1- ie8- N4- 10進法で上位桁に0を付加します。(01, 02, ..., 98, 99)
lower-romanC1- ie4- N4- 小文字のローマ数字。(i, ii, iii, iv, v)
upper-romanC1- ie4- N4- 大文字のローマ数字。(I, II, III, IV, V)
hebrewC1- N4- 伝統的なヘブライ数字。
georgianC1- ie8- N4- 伝統的なグルジア数字。(an, ban, gan, ..., he, tan, in, in-an)
armenianC1- ie8- N4- 伝統的なアルメニア数字。
cjk-ideographicC1- N4- 漢数字。(一, 二, 三)
hiraganaC1- N4- ひらがな。(あ, い, う, え, お)
katakanaC1- N4- カタカナ。(ア, イ, ウ, エ, オ)
hiragana-irohaC1- N4- ひらがなイロハ。(い, ろ, は, に)
katakana-irohaC1- N4- カタカナイロハ。(イ, ロ, ハ, ニ)

アルファベット

lower-alphaC1- ie4- N4- 小文字のアスキー。(a, b, c, ..., z)
upper-alphaC1- ie4- N4- 大文字のアスキー。(A, B, C, ..., Z)
lower-latinC2- ie8- N6- 小文字のラテン文字。
upper-latinC2- ie8- N6- 大文字のラテン文字。
lower-greekC2- ie8- N6- 小文字の古代ギリシャ文字。

その他

noneC1- ie4- N4- マーカーを表示しません。
 

マーカーの表示位置 <'list-style-position'>

outsideC1- ie4- N6- マーカーをリスト項目の外側に置きます。初期値。
insideC1- ie4- N6- マーカーはリスト項目の最初のインライン要素となります。

マーカーに画像 <'list-style-image'>

URIC1- ie4- N6- 画像のURI。URIの記述は「url(URI)」という形式になります。
noneC1- ie4- N6- 画像を表示せずにグリフ(glyph: 絵文字)を表示します。初期値。
トップページ CSS2 Note ページトップ
 2005/09/22発行 2009/09/01更新