ITエンジニアのための技術支援サイト
list-style-type
リスト項目の先頭に付加するマークの種類を指定します。
ブラウザ
IE4 / IE5 / IE5.5 / IE6 / N4 / N6 / N7 / O6 / O7 / O9 / Fx1 / Fx2 / IE5 mac
書式
要素[.class名][#id名]{ list-style-type : 値; }
指定できる値
| 値 | 初期値 | 意味 |
| disk | ○ | 塗りつぶされた円をリストのマークにします。 |
| circle | 白抜きの円をリストのマークにします。 | |
| square | 塗りつぶされた四角をリストのマークにします。 | |
| decimal | 数字(1～)をリストのマークにします。 | |
| decimal-leading-zero | 数字(01～)をリストのマークにします。 | |
| lower-roman | 小文字のローマ数字をリストのマークにします。 | |
| upper-roman | 大文字のローマ数字をリストのマークにします。 | |
| lower-greek | 小文字のギリシャ文字をリストのマークにします。 | |
| lower-alpha | 小文字のアルファベットをリストのマークにします。 | |
| upper-alpha | 大文字のアルファベットをリストのマークにします。 | |
| lower-latin | アルファベットの小文字をリストのマークにします。 | |
| upper-latin | アルファベットの大文字をリストのマークにします。 | |
| hebrew | ヘブライ数字をリストのマークにします。 | |
| armanian | アルメニア数字をリストのマークにします。 | |
| georgian | グルジア数字をリストのマークにします。 | |
| cjk-ideographic | 漢数字をリストのマークにします。 | |
| hiragana | ひらがな(あ～)をリストのマークにします。 | |
| katakana | カタカナ(カ～)をリストのマークにします。 | |
| hiragana-iroha | ひらがな(いろは～)をリストのマークにします。 | |
| katakana-iroha | カタカナ(イロハ～)をリストのマークにします。 | |
| none | 何も表示しません。 | |
| inherit | 親要素の値を継承します。 |
サンプル
ソースコード
<html>
<head>
<title>サンプルコード</title>
<style type="text/css">
#sample1 {
list-style-image : none;
list-style-type : disk;
}
#sample2 {
list-style-image : none;
list-style-type : circle;
}
#sample3 {
list-style-image : none;
list-style-type : square;
}
#sample4 {
list-style-image : none;
list-style-type : decimal;
}
#sample5 {
list-style-image : none;
list-style-type : decimal-leading-zero;
}
#sample6 {
list-style-image : none;
list-style-type : lower-roman;
}
#sample7 {
list-style-image : none;
list-style-type : upper-roman;
}
#sample8 {
list-style-image : none;
list-style-type : lower-greek;
}
#sample9 {
list-style-image : none;
list-style-type : lower-alpha;
}
#sample10 {
list-style-image : none;
list-style-type : upper-alpha;
}
#sample11 {
list-style-image : none;
list-style-type : lower-latin;
}
#sample12 {
list-style-image : none;
list-style-type : upper-latin;
}
#sample13 {
list-style-image : none;
list-style-type : hebrew;
}
#sample14 {
list-style-image : none;
list-style-type : armenian;
}
#sample15 {
list-style-image : none;
list-style-type : georgian;
}
#sample16 {
list-style-image : none;
list-style-type : cjk-ideographic;
}
#sample17 {
list-style-image : none;
list-style-type : hiragana;
}
#sample18 {
list-style-image : none;
list-style-type : katakana;
}
#sample19 {
list-style-image : none;
list-style-type : hiragana-iroha;
}
#sample20 {
list-style-image : none;
list-style-type : katakana-iroha;
}
#sample21 {
list-style-image : none;
list-style-type : none;
}
#sample22 {
border-collapse : collapse;
border : solid #999999 1px;
width : 100%;
}
#sample22 td {
width : 30%;
border : solid #999999 1px;
}
</style>
</head>
<body>
<table id="sample22">
<tr>
<td><ul id="sample1">
<li>list-style-typeサンプル</li>
<li>list-style-type : disk</li></ul>
</td>
<td><ul id="sample2">
<li>list-style-typeサンプル</li>
<li>list-style-type : circle</li></ul>
</td>
<td><ul id="sample3">
<li>list-style-typeサンプル</li>
<li>list-style-type : square</li></ul>
</td>
</tr>
<tr>
<td><ul id="sample4">
<li>list-style-typeサンプル</li>
<li>list-style-type : decimal</li></ul>
</td>
<td><ul id="sample5">
<li>list-style-typeサンプル</li>
<li>list-style-type : </li></ul>
</td>
<td><ul id="sample6">
<li>list-style-typeサンプル</li>
<li>list-style-type : lower-roman</li></ul>
</td>
</tr>
<tr>
<td><ul id="sample7">
<li>list-style-typeサンプル</li>
<li>list-style-type : upper-roman</li></ul>
</td>
<td><ul id="sample8">
<li>list-style-typeサンプル</li>
<li>list-style-type : lower-greek</li></ul>
</td>
<td><ul id="sample9">
<li>list-style-typeサンプル</li>
<li>list-style-type : lower-alpha</li></ul>
</td>
</tr>
<tr>
<td><ul id="sample10">
<li>list-style-typeサンプル</li>
<li>list-style-type : upper-alpha</li></ul>
</td>
<td><ul id="sample11">
<li>list-style-typeサンプル</li>
<li>list-style-type : lower-latin</li></ul>
</td>
<td><ul id="sample12">
<li>list-style-typeサンプル</li>
<li>list-style-type : upper-latin</li></ul>
</td>
</tr>
<tr>
<td><ul id="sample13">
<li>list-style-typeサンプル</li>
<li>list-style-type : hebrew</li></ul>
</td>
<td><ul id="sample14">
<li>list-style-typeサンプル</li>
<li>list-style-type : armanian</li></ul>
</td>
<td><ul id="sample15">
<li>list-style-typeサンプル</li>
<li>list-style-type : georgian</li></ul>
</td>
</tr>
<tr>
<td><ul id="sample16">
<li>list-style-typeサンプル</li>
<li>list-style-type : cjk-ideographic</li></ul>
</td>
<td><ul id="sample17">
<li>list-style-typeサンプル</li>
<li>list-style-type : hiragana</li></ul>
</td>
<td><ul id="sample18">
<li>list-style-typeサンプル</li>
<li>list-style-type : katakana</li></ul>
</td>
</tr>
<tr>
<td><ul id="sample19">
<li>list-style-typeサンプル</li>
<li>list-style-type : hiragana-iroha</li></ul>
</td>
<td><ul id="sample20">
<li>list-style-typeサンプル</li>
<li>list-style-type : katakana-iroha</li></ul>
</td>
<td><ul id="sample21">
<li>list-style-typeサンプル</li>
<li>list-style-type : none</li></ul>
</td>
</tr>
</table>
</body>
</html>
表示結果
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
関連項目
HTML
CSS
list-style / list-style-image / list-style-position