トップページの中の プロパティの中の Lのプロパティ一覧の中の list-style

list-style

  • 最終更新:2009年11月18日 14:42

list-styleプロパティは、リスト関係の指定を一括で行えるショートハンドプロパティです。
各値は順不同で、半角スペースなどの空白類文字で区切って書き、省略した値は初期値になります。

リストの場合、個別のリスト関係プロパティを使う必要性があまり無いため、大半がショートハンドで書くと思います。

対応ブラウザ
  • IE6対応
  • IE7対応
  • IE8対応
  • Firefox3.5対応
  • Opera10対応
  • Safari4対応
  • Chrome3対応

プロパティの解説

[ <list-style-type> || <list-style-position> || <list-style-image> ]|inherit
初期値
個別のプロパティを参照してください
適用される要素
li要素、display: list-item;の要素
継承
します
パーセント値
N/A
メディア
visual

リストスタイルはli要素に直接指定できますが、直接指定してしまうと、ol要素とul要素が入れ子になっている場合、継承や個別性の計算に問題が出てしまいます。
その為、ol要素やul要素などにリストスタイルを指定し継承させた方が効率よく記述する事ができます。

list-styleのサンプル

ul {
  list-style: square;
}
<ul>
<li>リストスタイルのサンプルです。</li>
<li>リストスタイルのサンプルです。</li>
</ul>

このサンプルを今見ているブラウザで表示すると以下のようになります。

サンプルのブラウザ上の表示
  • リストスタイルのサンプルです。
  • リストスタイルのサンプルです。

このページの上部へ