list-style-typeプロパティ

TOPページに戻る > CSS

list-style-typeプロパティ

リストマークの種類を変更できます
リスト項目の先頭にくるリストマークを記号や数字などに変更できます。値にnoneを指定すると、リストマークを非表示にすることもできます

使い方（書式）

セレクタ { list-style-type: 値; }                                    

list-style-typeプロパティ

対応ブラウザ
適用できる要素	リスト項目 ol要素 ul要素 li要素 displayの値がlist-itemになっている要素
子要素へのスタイルの継承	する

プロパティの値	説明
none	マークなし
disc	黒い丸
circle	白い丸
square	黒い四角
decimal	数字
lower-roman	小文字のローマ数字
upper-roman	大文字のローマ数字
lower-alpha	小文字のアルファベット
upper-alpha	大文字のアルファベット
decimal-leading-zero	0を付けた数字　※IE7以前のブラウザは未対応
lower-greek	小文字のギリシャ文字　※IE7以前のブラウザは未対応
lower-latin	小文字のアルファベット　※IE7以前のブラウザは未対応
upper-latin	大文字のアルファベット　※IE7以前のブラウザは未対応
armenian	アルメニア数字　※IE7以前のブラウザは未対応
georgian	グルジア数字　※IE7以前のブラウザは未対応
hebrew	ヘブライ数字
cjk-ideographic	漢数字
hiragana	ひらがな
katakana	カタカナ
hiragana-iroha	ひらがな　いろはにほへと順
katakana-iroha	カタカナ　イロハニホヘト順

実際の指定方法

.hoge { list-style-type: none; }   /* リストマーク非表示 */

.hoge2 { list-style-type: disc; }   /* 黒い丸 */

.hoge3 { list-style-type: circle; }   /* 白い丸 */

.hoge4 { list-style-type: square; }   /* 黒い四角 */

.hoge5 { list-style-type: decimal; }   /* 数字 */

.hoge6 { list-style-type: lower-roman; }   /* 小文字のローマ数字 */

.hoge7 { list-style-type: upper-roman; }   /* 大文字のローマ数字 */

.hoge8 { list-style-type: lower-alpha; }   /* 小文字のアルファベット */

.hoge9 { list-style-type: upper-alpha; }   /* 大文字のアルファベット */

.hoge10 { list-style-type: decimal-leading-zero; }   /* 0を付けた数字 */

.hoge11 { list-style-type: lower-greek; }   /* 小文字のギリシャ文字 */

.hoge12 { list-style-type: lower-latin; }   /* 小文字のアルファベット */

.hoge13 { list-style-type: armenian; }   /* アルメニア数字 */

.hoge14 { list-style-type: georgian; }   /* グルジア数字 */

.hoge15 { list-style-type: hebrew; }   /* ヘブライ数字 */

.hoge16 { list-style-type: cjk-ideographic; }   /* 漢数字 */

.hoge17 { list-style-type: hiragana; }   /* ひらがな */

.hoge18 { list-style-type: katakana; }   /* カタカナ */

.hoge19 { list-style-type: hiragana-iroha; }   /* ひらがな　いろはにほへと順 */

.hoge20 { list-style-type: katakana-iroha; }   /* カタカナ　イロハニホヘト順 */

html部分

<ul class="hoge">
<li>リスト項目の種類</li>
<li>none</li>
<li>リストマーク非表示</li>
</ul>

実際の表示