CSS list-style-type プロパティ

❮ 前章へ 完全な CSS リファレンス 次へ ❯

いろいろなリストスタイルを設定します:

ul.circle {list-style-type: circle;}
ul.square {list-style-type: square;}
ol.upper-roman {list-style-type: upper-roman;}
ol.lower-alpha {list-style-type: lower-alpha;}
Try it Yourself ❯

他の "Try it Yourself" 例が下にあります。


定義と用法

list-style-type プロパティは、リストのリスト項目マーカのタイプを指定します。

デフォルト値: disc
継承: yes
アニメーション可否: 不可。animatable を参照
バージョン: CSS1
JavaScript 構文: object.style.listStyleType="square" Try it

ブラウザ・サポート

表中の数字は、完全にプロパティをサポートした最初のブラウザのバージョンです。

プロパティ
list-style-type 1.0 4.0 1.0 1.0 3.5

注: Internet Explorer と Opera 12 以前のバージョンは、次をサポートしていません:cjk-ideographic、 hebrew、hiragana、hiragana-iroha、katakana、katakana-iroha。

注: IE8 以前は、!DOCTYPE を指定した場合のみ次のプロパティ値をサポートします: decimal-leading-zero、lower-greek、lower-latin、upper-latin、armenian、georgian、inherit


CSS 構文

list-style-type: value;

プロパティの値

説明 Play it
disc デフォルト値。黒丸 Play it ❯
armenian アルメニア数字 Play it ❯
circle 白丸 Play it ❯
cjk-ideographic 漢数字 Play it ❯
decimal 算用数字 Play it ❯
decimal-leading-zero 先頭に0をつけた算用数字 (01, 02, 03, 等) Play it ❯
グルジア数字 marker is traditional Georgian numbering Play it ❯
hebrew ヘブライ数字 Play it ❯
hiragana ひらがな - あいうえお順 Play it ❯
hiragana-iroha ひらがな - いろは順 Play it ❯
katakana カタカナ - アイウエオ順 Play it ❯
katakana-iroha カタカナ - イロハ順 Play it ❯
lower-alpha 小文字のアルファベット (a, b, c, d, e 等) Play it ❯
lower-greek 小文字のギリシャ文字 Play it ❯
lower-latin 小文字のアルファベット(a, b, c, d, e 等) Play it ❯
lower-roman 小文字のローマ数字 (i, ii, iii, iv, v 等) Play it ❯
なし マーカなし Play it ❯
square 黒四角 Play it ❯
upper-alpha 大文字のアルファベット (A, B, C, D, E 等) Play it ❯
upper-latin 大文字のアルファベット (A, B, C, D, E 等) Play it ❯
upper-roman 大文字のローマ数字 (I, II, III, IV, V 等) Play it ❯
initial プロパティにデフォルト値を設定します。initial を参照 Play it ❯
inherit このプロパティは親要素を継承します。inherit を参照

Examples

その他の例

この例は、全て異なる種類のリスト項目マーカのデモです:

ul.a {list-style-type: circle;}
ul.b {list-style-type: disc;}
ul.c {list-style-type: square;}

ol.d {list-style-type: armenian;}
ol.e {list-style-type: cjk-ideographic;}
ol.f {list-style-type: decimal;}
ol.g {list-style-type: decimal-leading-zero;}
ol.h {list-style-type: georgian;}
ol.i {list-style-type: hebrew;}
ol.j {list-style-type: hiragana;}
ol.k {list-style-type: hiragana-iroha;}
ol.l {list-style-type: katakana;}
ol.m {list-style-type: katakana-iroha;}
ol.n {list-style-type: lower-alpha;}
ol.o {list-style-type: lower-greek;}
ol.p {list-style-type: lower-latin;}
ol.q {list-style-type: lower-roman;}
ol.r {list-style-type: upper-alpha;}
ol.s {list-style-type: upper-latin;}
ol.t {list-style-type: upper-roman;}

ol.u {list-style-type: none;}
ol.v {list-style-type: inherit;}
Try it Yourself ❯

デフォルトの中点を削除し、中点のように見える HTML エンティティ (&bull;) を追加することにより、 <ul> または <ol> の中点に色を追加する方法:

ul {
    list-style: none; /* Remove list bullets */
    padding: 0;
    margin: 0;
}

li {
    padding-left: 16px;
}

li:before {
    content: "•"; /* Insert content that looks like bullets */
    padding-right: 8px;
    color: blue; /* Or a color you prefer */
}
Try it Yourself ❯

関連ページ

CSS チュートリアル: CSS List

CSSリファレンス:list-style プロパティ

HTML DOM リファレンス:listStyleType プロパティ


❮ 前章へ 完全な CSS リファレンス 次へ ❯