list-styleプロパティ。

CSSに於けるリストアイテムのマーカ関連プロパティの一括指定・list-styleプロパティに関する解説です。

list-styleプロパティとは。

list-styleプロパティは、リストアイテムのマーカ関連プロパティの一括指定です。

具体的には、以下の三つのプロパティを一括して指定します。

list-styleプロパティの扱い。

list-styleプロパティの書式。

list-styleプロパティの書式は、以下のようになります。

list-style:

値としては、以下のものが取れます。

inherit
一番近い上位要素で指定された値を継承します。
各プロパティでの値
以下の各プロパティで定義されている値を、空白で区切って順不同に並べます。

尚、値を指定していないプロパティに関しては、デフォルト値が指定されたものと見なされます。

また、none値はlist-style-typeプロパティlist-style-imageプロパティの双方で利用出来る値ですが、この値を指定した場合は、双方にnone値が適用されます。

list-styleプロパティの記述例。

例えば、HTMLの<ul>要素直下の<li>要素において、

  • マーカにGIF画像「http://www.fiction.ne.jp/image/marker.GIF」を用いたい
  • GIF画像が表示出来ない場合には塗り潰した円を代用したい
  • マーカはリストアイテムボックスの一番目の直下インラインボックスとしたい

のであれば、

ul>li {
    list-style-image: url("http://www.fiction.ne.jp/image/marker.GIF");
    list-style-type: disc;
    list-style-position: inside;
    }

と記述しますが、これを、

ul>li {
    list-style: url("http://www.fiction.ne.jp/image/marker.GIF") disc inside;
    }

と記述出来ます。

list-styleプロパティに関する注意事項。

list-styleプロパティの実装上の注意。

ネットスケープ 4.xでの注意事項。

ネットスケープ 4.xではlist-style-imageプロパティlist-style-positionプロパティは実装されておりませんが、list-typeプロパティは有効です。

WAP 2.0での注意事項。

WAP 2.0では、list-typeプロパティは必須ではありません。

  • オープンウェーヴ社のWAP 2.0 ウェブブラウザではlist-typeプロパティは実装されております。

関連項目。


しらぎくのウェブサイト作成入門サイトマップ