CSS list-style 属性

定義と用法

list-style ショートカット属性は1つの宣言ですべてのリスト属性を設定します。

説明

この属性はすべての他のリストスタイル属性をカバーするショートカット属性です。すべての display が list-item の要素に適用されるため、通常の HTML と XHTML では li 要素にのみ使用できますが、実際にはどの要素にも適用でき、list-item 要素によって継承されます。

以下の順序で属性を設定できます:

値の設定を省略することもできます。例えば、「list-style:circle inside;」も許可されています。設定されていない属性はデフォルト値を使用します。

さらに参照:

CSS チュートリアル:CSS 列表

HTML DOM リファレンスマニュアル:listStyle 属性

画像をリスト内のリストアイテムのマークとして設定:

ul
  {
  list-style:square inside url('/i/arrow.gif');
  }

実際に試してみる

CSS 言語

list-style: list-style-type list-style-position list-style-image|initial|inherit;

属性値

説明
list-style-type リストアイテムのマークのタイプを設定します。参照:list-style-type 中の可能な値。
list-style-position リストアイテムのマークをどこに配置するかを設定します。参照:list-style-position 中の可能な値。
list-style-image リストアイテムのマークを画像で置き換えます。参照:list-style-image 中の可能な値。
inherit 親要素から list-style 属性の値を継承するべきことを規定しています。

技術的詳細

デフォルト値: disc outside none
継承性: はい
バージョン: CSS1
JavaScript 言語: object.style.listStyle="decimal inside"

さらに多くの例

すべてのリスト属性を1つの宣言で定義
この例では、すべてのリストに対する属性を1つのショートカット属性に設定しています。

ブラウザのサポート

テーブルの数字には、その属性を完全にサポートする最初のブラウザのバージョンが記載されています。

Chrome IE / Edge Firefox Safari Opera
1.0 4.0 1.0 1.0 7.0