HTML DOMのlistStyleTypeプロパティとは？使い方と設定できる値を解説
listStyleTypeプロパティとは
HTML DOMのStyleオブジェクトが持つlistStyleTypeプロパティは、リスト項目の先頭に表示されるマーカー（記号や番号）の種類を設定したり、現在設定されている値を取得したりするために使用されるプロパティです。
構文
listStyleTypeプロパティを設定する場合の構文は以下のとおりです。
object.style.listStyleType = value
主なプロパティ値の一覧
listStyleTypeプロパティに指定できる主な値は以下のとおりです。
| 値 | 説明 |
|---|---|
| armenian | 伝統的なアルメニア数字をマーカーとして表示します。 |
| circle | 白抜きの円をマーカーとして表示します。 |
| cjk-ideographic | 漢数字（一、二、三…）をマーカーとして表示します。 |
| decimal | アラビア数字（1、2、3…）をマーカーとして表示します。デフォルト値です。 |
| decimal-leading-zero | 数字の先頭に0を付けた形式（01、02、03…）でマーカーを表示します。 |
| disc | 塗りつぶしの円をマーカーとして表示します。<ul>要素のデフォルト値です。 |
| hiragana | 平仮名（あ、い、う…）をマーカーとして表示します。 |
| katakana | 片仮名（ア、イ、ウ…）をマーカーとして表示します。 |
| lower-alpha | 小文字のアルファベット（a、b、c…）をマーカーとして表示します。 |
| lower-greek | 小文字のギリシャ文字（α、β、γ…）をマーカーとして表示します。 |
| lower-roman | 小文字のローマ数字（i、ii、iii…）をマーカーとして表示します。 |
| none | マーカーを表示しません。 |
| square | 四角形をマーカーとして表示します。 |
| upper-alpha | 大文字のアルファベット（A、B、C…）をマーカーとして表示します。 |
| upper-roman | 大文字のローマ数字（I、II、III…）をマーカーとして表示します。 |
| initial | このプロパティを初期値に設定します。 |
| inherit | 親要素のプロパティ値を継承します。 |
サンプルコード
以下は、listStyleTypeプロパティを使ってリストのマーカーを動的に変更する例です。ボタンをクリックすると、リストのマーカーが大文字ローマ数字に切り替わります。
<!DOCTYPE html>
<html>
<head>
<script>
function changeListType() {
document.getElementById("LIST1").style.listStyleType = "upper-roman";
document.getElementById("Sample").innerHTML = "リストスタイルの種類が大文字ローマ数字に変更されました";
}
</script>
</head>
<body>
<ul id="LIST1">
<li>リスト項目1</li>
<li>リスト項目2</li>
<li>リスト項目3</li>
<li>リスト項目4</li>
</ul>
<p>下のボタンをクリックすると、上のリストのスタイルが変更されます</p>
<button type="button" onclick="changeListType()">リストの種類を変更</button>
<p id="Sample"></p>
</body>
</html>
実行結果
ページを表示した直後の状態は以下のとおりです。
「リストの種類を変更」ボタンをクリックすると、マーカーが大文字ローマ数字に変わり、以下のように表示されます。
まとめ
listStyleTypeプロパティを使えば、JavaScriptからリストのマーカーを自由に切り替えることができます。数字やアルファベットだけでなく、平仮名・片仮名・漢数字など日本語向けの値も用意されているため、Webページのデザインに合わせて柔軟に活用できます。
-
HTML DOMスタイルのlistStylePositionプロパティとは？使い方と設定値を徹底解説
HTML DOMのlistStylePositionプロパティは、リスト項目（li要素）のマーカー（箇条書きの記号）の位置を設定または取得するために使用されるスタイルプロパティです。このプロパティを使うことで、JavaScriptから動的にリストマーカーの表示位置を変更できます。 listStylePositionプロパティの構文 listStylePositionプロパティを設定する場合の構文は以下の通りです。 object.style.listStylePosition = outside|inside|initial|inherit 指定できる値は次の通りです。 値説明 outs
-
HTML DOMのlistStyleImageプロパティとは？使い方をコード例付きで解説
HTML DOM の listStyleImage プロパティは、リスト項目（<li>）のマーカーとして画像を設定したり、現在設定されている画像を取得したりするために使用されるプロパティです。通常の「●」や「■」といった箇条書き記号の代わりに、任意の画像をリストマーカーとして表示できます。 listStyleImageプロパティの構文 listStyleImage プロパティを設定する場合の構文は以下のとおりです。 object.style.listStyleImage = none|url|initial|inherit 指定できる値の一覧 それぞれの値の意味は次の表のとおり