順不同リスト（ul）のリストマーカーを、スタイルシート（CSS）で指定する方法。
順不同リストとは、下記のようなリストタグのこと。
|
ソース
|
表示
|
1
2
3
4
| <ul>
<li>項目</li>
<li>項目</li>
</ul> |
|
|
リストマーカーを指定するには、list-style-type プロパティを、使う。
HTML4.01 では、ul 要素の type 属性が使えたが、HTML 5 において、廃止されたので、今後は、list-style-type を、使う機会が増えることだろう。
概要
list-style-type: ***;
***には、disc、circle、square、none のいずれかを入れる。
list-style-type は、CSS 1 で定義されたプロパティ。
list-style-type と、list-style-image を、同時に使用した場合、list-style-image が優先される。
disc
黒い丸。CSS 1 で定義された。ほとんどのブラウザが対応している。
|
ソース
|
表示
|
1
2
3
4
| <ul style="list-style-type: disc;">
<li>項目</li>
<li>項目</li>
</ul> |
|
|
circle
白い丸。CSS 1 で定義された。ほとんどのブラウザが対応している。
|
ソース
|
表示
|
1
2
3
4
| <ul style="list-style-type: circle;">
<li>項目</li>
<li>項目</li>
</ul> |
|
|
square
黒い四角。CSS 1 で定義された。ほとんどのブラウザが対応している。
|
ソース
|
表示
|
1
2
3
4
| <ul style="list-style-type: square;">
<li>項目</li>
<li>項目</li>
</ul> |
|
|
none
リストマーカーなし。CSS 1 で定義された。ほとんどのブラウザが対応している。
|
ソース
|
表示
|
1
2
3
4
| <ul style="list-style-type: none;">
<li>項目</li>
<li>項目</li>
</ul> |
|
|