CSS list-style

スタイルシート属性 list-style は、リスト項目のスタイルを指定します。

書式

list-style: position image type

position、image 及び type の順序は任意で、いずれも省略可能である。

属性値

positon

マーカーの位置を指定します。次の値から指定できます。

値	説明
outside	外側（規定値）
inside	内側
inherit	継承

<ul style="list-style: inside">
  <li>first<br>second</li>
  <li>third<br>fourth</li>
</ul>

first
second
third
fourth

<ul style="list-style: outside">
  <li>first<br>second</li>
  <li>third<br>fourth</li>
</ul>

first
second
third
fourth

image

にはマーカーの画像を指定します。url(url)でURLを指定するか、以下の値を指定します。

値	説明
none	なし
inherit	継承

<ul style="list-style: url(https://segakuin.com/css/img/marker.gif)">
  <li>first</li>
  <li>second</li>
</ul>

first
second

type

リスト項目の頭に付けられる記号の種類を指定します。スタイルシート属性list-style-typeでも指定することができます。

値	説明
disc	黒丸（規定値）
circle	白丸
square	四角
decimal	アラビア数字
decimal-leading-zero	アラビア数字（先頭に0が付く）
lower-roman	ローマ数字（小文字）
upper-roman	ローマ数字（大文字）
lower-alpha	英文字（小文字）
upper-alpha	英文字（大文字）
armenian	アルメニア文字
georgian	グルジア文字
lower-greek	ギリシャ文字（小文字）
none	なし
inherit	継承

list-style-type

スタイルシート属性 list-style-type は、リスト項目の頭に付けられる記号の種類を指定します。順序なしリストの項目に順序をつけることもできますし、順序つきリストの項目に順序をつけないこともできます。つまりスタイルシートを指定すれば、UL要素タイプとOL要素タイプを使い分ける必要はありません。

書式

list-style-type: type

属性値

type

リスト項目の頭に付けられる記号の種類を指定します。次の値から指定できます。

値	説明
disc	黒丸（規定値）
circle	白丸
square	四角
decimal	アラビア数字
decimal-leading-zero	アラビア数字（先頭に0が付く）
lower-roman	ローマ数字（小文字）
upper-roman	ローマ数字（大文字）
lower-alpha	英文字（小文字）
upper-alpha	英文字（大文字）
armenian	アルメニア文字
georgian	グルジア文字
lower-greek	ギリシャ文字（小文字）
none	なし
inherit	継承

スタイルシート属性 list-style-type の使用例と表示サンプルを次に示します。ブラウザによって表示結果が異なることがあります。

<ul>
  <li style="list-style-type: disc">disc</li>
  <li style="list-style-type: circle">circle</li>
  <li style="list-style-type: square">square</li>
  <li style="list-style-type: none">none</li>
</ul>

disc
circle
square
none

<ol>
  <li style="list-style-type: decimal">decimal</li>
  <li style="list-style-type: lower-roman">lower-roman</li>
  <li style="list-style-type: lower-alpha">lower-alpha</li>
</ol>

decimal
lower-roman
upper-roman
lower-alpha

<LI>だけでなく、<OL>やlt;UL>に list-style-type を指定することもできます。この場合、リスト項目のスタイルを一括して指定することができます。

<ol style="list-style-type: decimal-leading-zero">
  <li>first</li>
  <li>second</li>
  <li>third</li>
</ol>

first
second
third

<ol style="list-style-type: upper-alpha">
  <li>first</li>
  <li>second</li>
  <li>third</li>
</ol>

first
second
third

<ol style="list-style-type: armenian">
  <li>first</li>
  <li>second</li>
  <li>third</li>
</ol>

first
second
third

<ol style="list-style-type: georgian">
  <li>an</li>
  <li>ban</li>
  <li>gan</li>
</ol>

<ol style="list-style-type: lower-greek">
  <li>alpha</li>
  <li>beta</li>
  <li>gamma</li>
</ol>

alpha
beta
gamma

list-style-position

スタイルシート属性 list-style は、リスト項目の頭に付けられる記号の位置を指定します。

書式

list-style-position: position

属性値

positon

リスト項目の頭に付けられる記号の位置を指定します。次の値から指定できます。

値	説明
outside	外側（規定値）
inside	内側
inherit	継承

使用例

<ul style="list-style-position: inside">
  <li>first<br>second</li>
  <li>third<br>fourth</li>
</ul>

first
second
third
fourth

<ul style="list-style-position: outside">
  <li>first<br>second</li>
  <li>third<br>fourth</li>
</ul>

first
second
third
fourth

list-style-image

スタイルシート属性 list-style-image は、リスト項目の頭に付けられる記号として画像を表示するよう指定します。主に <ul> や <ol> 、<li> に対して指定します。

書式

list-style-image: image

属性値

image

リスト項目の頭に付けられる記号の画像を指定します。url(url)でURLを指定するか、以下の値を指定します。

値	説明
none	なし
inherit	継承

urlはurl(http://itref.fc2web.com/img/maeker.gif)のように指定する。url(file:///C:/work/sample.gif")のようにローカルディスクのファイルを指定することもできる。

相対URLを指定することもできる。基準となるURLは、スタイルシートが存在するURLである。HTML文書から外部スタイルシートを参照している場合、HTML文書のURLではなく、外部スタイルシートのURLが基準となる。

使用例

スタイルシート属性 list-style-image の使用例と表示サンプルを次に示します。表示結果はブラウザによって異なることがあります。

<ul style="list-style-image: url(https://segakuin.com/css/img/marker.gif);">
  <li>first</li>
  <li>second</li>
</ul>

first
second

<ul>
  <li style="list-style-image: url(./img/marker.gif);">first</li>
  <li>second</li>
</ul>

first
second

CSSプロパティ

CSSには次のプロパティがある。

参考文献

World Wide Web Consortium (2020) CSS Lists and Counters Module Level 3