list-style

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

書式

list-style: type position image

属性値

type
リスト項目の頭に付けられる記号の種類を指定します。スタイルシート属性list-style-typeでも指定することができます。
positon
マーカーの位置を指定します。次の値から指定できます。
説明
outside外側(規定値)
inside内側
inherit継承
image
にはマーカーの画像を指定します。url(url)でURLを指定するか、以下の値を指定します。
説明
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>
<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>
  1. decimal
  2. lower-roman
  3. upper-roman
  4. 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>
  1. first
  2. second
  3. third
<ol style="list-style-type: upper-alpha">
  <li>first</li>
  <li>second</li>
  <li>third</li>
</ol>
  1. first
  2. second
  3. third
<ol style="list-style-type: armenian">
  <li>first</li>
  <li>second</li>
  <li>third</li>
</ol>
  1. first
  2. second
  3. third
<ol style="list-style-type: georgian">
  <li>an</li>
  <li>ban</li>
  <li>gan</li>
</ol>
  1. an
  2. ban
  3. gan
<ol style="list-style-type: lower-greek">
  <li>alpha</li>
  <li>beta</li>
  <li>gamma</li>
</ol>
  1. alpha
  2. beta
  3. gamma

list-style-position

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

書式

list-style-position: position

属性値

positon
リスト項目の頭に付けられる記号の位置を指定します。次の値から指定できます。
説明
outside外側(規定値)
inside内側
inherit継承

使用例

<ol>
  <li style="list-style-position: outside">outside</li>
  <li style="list-style-position: inside">inside</li>
</ol>
  1. outside
  2. inside

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

CSSプロパティ

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

参考文献

W3C (2021) CSS Lists and Counters Module Level 3