[HTML] UL, OLタグの各項目の先頭に表示される マークを変更する
このページのタグ:[HTML]
ULタグやOLタグ内の項目の先頭に表示されるマークを変更するコードを紹介します。

概要

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

指定方法

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

コード例


<!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>

表示結果

上記のHTMLファイルをWebブラウザで表示すると、下図の画面が表示されます。デフォルトの設定では、各項目の先頭に黒丸が表示されますが、"list-style-type:circle" を指定することにより、白丸が項目の先頭に表示される動作となります。

スタイルごとの表示結果

list-style-type に指定する値ごとの表示結果です。

armenian


circle

小さな白丸で表現されます。

decimal

数値で表現されます。

decimal-leading-zero

先頭の桁が0である数値で表現されます。

disc

黒丸で表現されます。

georgian


lower-alpha

小文字のアルファベットです。

lower-greek

小文字のギリシャ文字です。

lower-latin

小文字のラテン文字で表現されます。(見た目は小文字のアルファベットと変わりません。)

lower-roman

ローマ数字で表現されます。

none

マークを表示しません。

square

中が塗りつぶされた四角で表現されます。

upper-alpha

大文字のアルファベットで表現されます。

upper-latin

大文字のラテン文字で表現されます。(見た目は大文字のアルファベットと変わりません。)

upper-roman

大文字のローマ数字で表現されます。


プライバシー    iPentecについて
iPentec all rights reserverd. (ISDC)