概要

list-style プロパティは、「list-style-type」、「list-style-image」、「list-style-position」を一括で指定するショートハンド・プロパティです。

/* type */
list-style: square;

/* image */
list-style: url('../img/dino.png');

/* position */
list-style: inside;

/* type | position */
list-style: georgian inside;

/* type | image | position */
list-style: lower-roman url('../img/dino.png') outside;

list-style: none;

/* Global values */
list-style: inherit;
list-style: initial;
list-style: unset;

初期値以下の各プロパティのショートハンドとして補完します:
適用対象 リスト項目
継承継承する
メディアvisual
計算値以下の各プロパティのショートハンドとして補完します:
Animation typediscrete
正規順序order of appearance in the formal grammar of the values

注記: このプロパティはリストアイテム、すなわち display: list-item; の要素(デフォルトでは <li> を含む)に適用されます。このプロパティは継承されるので、全てのリストアイテムに適用するために、親要素(通常は <ol> または <ul>)に指定することができます。

構文

以下の値のうち、 1~3 個を順不同で指定可能です。list-style-typelist-style-image の両方が指定され、画像が利用不可能な場合は list-style-type が使われます。

list-style-type
list-style-type を参照して下さい。
list-style-image
list-style-image を参照して下さい。
list-style-position
list-style-position を参照して下さい。

形式構文

<'list-style-type'> || <'list-style-position'> || <'list-style-image'>

HTML

List 1
<ul class="one">
  <li>List Item1</li>
  <li>List Item2</li>
  <li>List Item3</li>
</ul>
List 2
<ul class="two">
  <li>List Item A</li>
  <li>List Item B</li>
  <li>List Item C</li>
</ul>

CSS

.one {
  list-style: circle;
}

.two {
  list-style: square inside;
}

結果

仕様

仕様 状況 コメント
CSS Lists and Counters Module Level 3
list-style の定義
草案 変更なし
CSS Level 2 (Revision 1)
list-style の定義
勧告 初回定義

ブラウザ互換性

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari
基本サポート 1.0 1.0 (1.7 or earlier) 4.0 7.0 1.0
機能 Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
基本サポート 1.0 1.0 (1) 6.0 6.0 1.0

関連情報

ドキュメントのタグと貢献者

タグ: 
 このページの貢献者: sii, teoli, SphinxKnight, Sebastianz, ethertank, sosleepy
 最終更新者: sii,