端くれプログラマの備忘録 CSS [CSS] 基本メモ: list-styleプロパティ

[CSS] 基本メモ: list-styleプロパティ

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’);

サンプル

<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>
<style>
ul { list-style-type: circle; }
</style>

css_list1

<style>
ul { list-style-type: square; }
</style>

css_list2

<style>
ul { list-style-type: decimal; }
</style>

css_list3

<style>
ul { list-style-type: decimal; list-style-position: inside; }
</style>

css_list4

参考サイト

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