UL, OLタグの各項目の先頭に表示される記号、マーク、数値の表現を変更する - HTML

ULタグやOLタグ内の項目の先頭に表示される記号、マークや数値の表現を変更するコードを紹介します。

概要

ULタグやOLタグ内のLIタグでリストの項目を表現できます。 Webブラウザで表示した際には、ULタグであれば、項目の先頭には「・」の記号が表示されます。OLタグの場合は、アラビア数字で1から順番に数値が付加されます。
項目の内容や用途によっては、先頭の記号や数値の表現を変えたい場合があります。この記事では、ULタグ、OLタグ内の項目のマークを変更するコードを紹介します。

指定方法

UL,OLタグの項目のマークを変更するには、スタイル指定で "list-style-type" プロパティを利用します。

書式

list-styleプロパティは以下の値がが指定可能です。

値	意味
disc	黒丸
circle	白丸
square	四角形
decimal	数値
decimal-leading-zero	先頭の桁が0の数値
lower-roman	小文字のローマ数字
upper-roman	大文字のローマ数字
lower-greek	小文字のギリシア文字
lower-latin	小文字のラテン文字
upper-latin	大文字のラテン文字
armenian	アルメニア文字
georgian	グルジア文字
lower-alpha	小文字のアルファベット
upper-alpha	大文字のアルファベット
none	なし

コード例

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
	<meta charset="utf-8" />
</head>
<body>
  <div>リストのデモです</div>
  <ul style="list-style-type:circle;">
    <li>項目A</li>
    <li>項目B</li>
    <li>項目C</li>
    <li>項目D</li>
    <li>項目E</li>
    <li>項目F</li>
  </ul> 
</body>
</html>