list-style-type
- none (無し)
- disc (白い丸)
- circle (黒い丸)
- square (黒い四角)
- lower-roman (小文字ローマ数字)
- upper-roman (大文字ローマ数字)
- lower-greek (小文字ギリシャ文字)
- decimal (数字)
- decimal-leading-zero (先頭にゼロを付けた数字)
- lower-alpha (小文字アルファベット)
- uppwe-alpha (大文字アルファベット) など
list-style-position
- outside
- inside
list-style-image
- url(‘bullet.png’);
サンプル
|
1 2 3 4 5 6 |
<ul> <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li> <li>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</li> <li>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</li> <li>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li> </ul> |
|
1 2 3 |
<style> ul { list-style-type: circle; } </style> |
|
1 2 3 |
<style> ul { list-style-type: square; } </style> |
|
1 2 3 |
<style> ul { list-style-type: decimal; } </style> |
|
1 2 3 |
<style> ul { list-style-type: decimal; list-style-position: inside; } </style> |
参考サイト
list-style-type－スタイルシートリファレンス
http://www.htmq.com/style/list-style-type.shtml
list-style-position－スタイルシートリファレンス
http://www.htmq.com/style/list-style-position.shtml
list-style-image－スタイルシートリファレンス
http://www.htmq.com/style/list-style-image.shtml