例
いくつかの異なるリストスタイルを設定します。
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"以下の例。
定義と使用法
リストスタイル型は、リスト内のリスト項目マーカーの種類を指定します。
| デフォルト値： | disc |
|---|---|
| 継承されました： | yes |
| アニメーション： | no. Read about animatable |
| バージョン： | CSS1 |
| JavaScriptシンタックス： | object .style.listStyleType="square" Try it |
ブラウザのサポート
表中の数字は完全にプロパティをサポートする最初のブラウザのバージョンを指定します。
| プロパティ | |||||
|---|---|---|---|---|---|
| list-style-type | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
Note: Internet ExplorerとOperaの12およびそれ以前のバージョンは、値をサポートしていません：CJK表意文字、ヘブライ語、ひらがな、ひらがないろは旅館、カタカナ、およびカタカナ-いろは。
Note: IE8、以前では、プロパティ値だけをサポートしています。小数をリードゼロ、低ギリシャ、低ラテン上位ラテン、アルメニア、グルジア語、およびDOCTYPEが指定されている場合は継承！
CSSの構文
list-style-type:value;プロパティ値
| 値 | 説明 | それを再生します |
|---|---|---|
| disc | デフォルト値。 マーカーは黒丸であります | それを再生します» |
| armenian | マーカーは、伝統的なアルメニアのナンバリングであります | それを再生します» |
| circle | マーカーは円であります | それを再生します» |
| cjk-ideographic | マーカーは、普通の表意文字の数字であり、 | それを再生します» |
| decimal | マーカーは、数あります | それを再生します» |
| decimal-leading-zero | マーカーは、先行ゼロ（01、02、03、など）を持つ数であり、 | それを再生します» |
| georgian | マーカーは、伝統的なジョージ王朝様式のナンバリングであります | それを再生します» |
| hebrew | マーカーは、伝統的なヘブライ語のナンバリングであります | それを再生します» |
| hiragana | マーカーは、伝統的なひらがなの番号であります | それを再生します» |
| hiragana-iroha | マーカーは、伝統的なひらがないろはの番号であります | それを再生します» |
| katakana | マーカーは、伝統的なカタカナの番号であります | それを再生します» |
| katakana-iroha | マーカーは、伝統的なカタカナいろはの番号であります | それを再生します» |
| lower-alpha | マーカーは低アルファ(a, b, c, d, e, etc.) | それを再生します» |
| lower-greek | マーカーは、低ギリシャ語で | それを再生します» |
| lower-latin | マーカーは低ラテン語である(a, b, c, d, e, etc.) | それを再生します» |
| lower-roman | マーカーは低ローマンである(i, ii, iii, iv, v, etc.) | それを再生します» |
| none | いいえマーカーは表示されません | それを再生します» |
| square | マーカーは正方形であります | それを再生します» |
| upper-alpha | マーカーは、上位アルファである(A, B, C, D, E, etc.) | それを再生します» |
| upper-latin | マーカーは、上位ラテン語である(A, B, C, D, E, etc.) | それを再生します» |
| upper-roman | マーカーは、上位ローマンである(I, II, III, IV, V, etc.) | それを再生します» |
| initial | このプロパティがデフォルト値に設定します。 初期についての記事を読みます | それを再生します» |
| inherit | その親要素からこのプロパティを継承します。 継承についての記事を読みます |
その他の例
例
この例では、すべての別のリスト項目マーカーを示しています。
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;} »それを自分で試してみてください 例
以下のための弾丸の色を追加する方法<ul>や<ol>そのデフォルトの弾丸を除去し、弾丸のように見えるHTMLエンティティ追加することで、 (•)
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 */
} »それを自分で試してみてください 関連ページ
CSSチュートリアル： CSSリスト
CSSリファレンス： list-style property
HTML DOMリファレンス： listStyleType property