概要
CSSプロパティ｢list-style-type｣は、リストの先頭に対して、中点などマーカーの種類を指定します。またマーカーに画像を指定したい場合は list-style-image を利用します。
<p>好きな動物リストです</p>
<ul>
<li class="circle">ネコ</li>
<li class="square">犬</li>
<li class="disc">ウサギ</li>
</ul>
<style>
.circle {
list-style-type: circle;
}
.square {
list-style-type: square;
}
.disc {
list-style-type: disc;
}
</style>取りうる値
キーワードを指定します。様々なキーワードが用意されてますがブラウザによって適用されない場合もあるので気をつけましょう。
{ list-style-type: キーワード;}| キーワード | 説明 |
|---|---|
| none | これが初期値です。マーカーがつきません |
| disc | 黒い丸です。 |
| circle | 白抜きの丸です。 |
| square | 黒い四角です。 |
| decimal | 1,2,3..のような数字です |
| decimal-leading-zero | 01,02などのように先頭に0のつく数字です |
| lower-roman | i, ii, iii..のような小文字のローマ数字です |
| upper-roman | I, II, III...のような大文字のローマ数字です |
| lower-greek | α, β, γ...のような小文字のギリシャ数字です |
| upper-alpha | A, B, C,大文字のギリシャ数字です |
| lower-latin | a, b, c...のような小文字のラテン文字です |
| upper-latin | A, B, C...のような大文字のラテン文字です |
| lower-alpha | a,b,c...のような小文字のアルファベットです |
| cjk-ideographic | 一萬一千一百一のような漢数字です。trad-chinese-informalと同義 |
| hiragana | 『あいうえお』が付きます。 |
| katakana | 『アイウエオ』が付きます。 |
| hiragana-iroha | 『いろはにほへと』が付きます。 |
| katakana-iroha | 『イロハニホヘト』が付きます。 |
| hebrew | ヘブライ数字が付きます。 |
| armenian | アルメニア数字が付きます。 |
| georgian | グルジア数字が付きます。 |
各値の表示例
確認するブラウザによって表示が異なる場合がありますので、使用する際には気をつけましょう。
<p>list-style-typeの種類</p>
<ul>
<li class="none">noneを指定</li>
<li class="disc">discを指定</li>
<li class="circle">circleを指定</li>
<li class="square">squareを指定</li>
<li class="decimal">decimalを指定</li>
<li class="decimal-leading-zero">decimal-leading-zeroを指定</li>
<li class="lower-roman">lower-romanを指定</li>
<li class="upper-roman">upper-romanを指定</li>
<li class="lower-greek">lower-greekを指定</li>
<li class="upper-alpha">upper-alphaを指定</li>
<li class="lower-latin">lower-latinを指定</li>
<li class="upper-latin">upper-latinを指定</li>
<li class="lower-alpha">lower-alphaを指定</li>
<li class="cjk-ideographic">cjk-ideographicを指定</li>
<li class="hiragana">hiraganaを指定</li>
<li class="katakana">katakanaを指定</li>
<li class="hiragana-iroha">hiragana-irohaを指定</li>
<li class="katakana-iroha">katakana-irohaを指定</li>
<li class="hebrew">hebrewを指定</li>
<li class="armenian">armenianを指定</li>
<li class="georgian">georgianを指定</li>
</ul>
<style>
.none {list-style-type: none;}
.disc {list-style-type: disc;}
.circle {list-style-type: circle;}
.square {list-style-type: square;}
.decimal {list-style-type: decimal;}
.decimal-leading-zero {list-style-type: decimal-leading-zero;}
.lower-roman {list-style-type: lower-roman;}
.upper-roman {list-style-type: upper-roman;}
.lower-greek {list-style-type: lower-greek;}
.upper-alpha {list-style-type: upper-alpha;}
.lower-latin {list-style-type: lower-latin;}
.upper-latin {list-style-type: upper-latin;}
.lower-alpha {list-style-type: lower-alpha;}
.cjk-ideographic {list-style-type: cjk-ideographic;}
.hiragana {list-style-type: hiragana;}
.katakana {list-style-type: katakana;}
.hiragana-iroha {list-style-type: hiragana-iroha;}
.katakana-iroha {list-style-type: katakana-iroha;}
.hebrew {list-style-type: hebrew;}
.armenian {list-style-type: armenian;}
.georgian {list-style-type: georgian;}
</style>
list-styleに関連のプロパティ一覧
| プロパティ名 | 説明 |
|---|---|
| list-style | マーカーに関する指定をまとめて行うショートハンド |
| list-style-image | マーカーに画像を指定する |
| list-style-type | マーカー文字の種類を指定する |
| list-style-position | マーカー文字の位置を指定する |
| marker-offset | マーカーとの間隔を指定する |
使用例
リストの階層で表示するマーカーを分けた例です。
<p>猫と犬の種類</p>
<ul>
<li class="square">
<p>猫</p>
<ul class="decimal">
<li>シャム</li>
<li>メインクーン</li>
</ul>
</li>
<li class="square">
<p>犬</p>
<ul class="decimal">
<li>シャム</li>
<li>メインクーン</li>
</ul>
</li>
</ul>
<style>
.square {
list-style-type: square;
}
.decimal > li {
list-style-type: decimal;
}
</style>