HTML DOMスタイルのlistStylePositionプロパティとは？使い方と設定値を徹底解説
HTML DOMのlistStylePositionプロパティは、リスト項目（li要素）のマーカー（箇条書きの記号）の位置を設定または取得するために使用されるスタイルプロパティです。このプロパティを使うことで、JavaScriptから動的にリストマーカーの表示位置を変更できます。
listStylePositionプロパティの構文
listStylePositionプロパティを設定する場合の構文は以下の通りです。
object.style.listStylePosition = "outside|inside|initial|inherit"
指定できる値は次の通りです。
| 値 | 説明 |
|---|---|
| outside | デフォルト値です。テキストの外側（左側）にリストマーカーを配置します。 |
| inside | リストマーカーをテキストの内側に少しインデントして配置します。 |
| initial | このプロパティを初期値に設定します。 |
| inherit | 親要素のプロパティ値を継承します。 |
listStylePositionプロパティの使用例
それでは、listStylePositionプロパティを使用した具体的なサンプルコードを見てみましょう。ボタンをクリックすると、リストマーカーの位置が「outside」から「inside」に切り替わる仕組みです。
<!DOCTYPE html>
<html>
<head>
<style>
li{
background-color:lightgreen;
}
</style>
<script>
function changeListPosition() {
document.getElementById("LIST1").style.listStylePosition = "inside";
document.getElementById("Sample").innerHTML=" リストスタイルの位置は、デフォルトのoutsideからinsideに変更されました。";
}
</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="changeListPosition()">リスト位置を変更</button>
<p id="Sample"></p>
</body>
</html>
実行結果
ページを開いた直後の初期状態では、リストマーカーはテキストの外側（outside）に表示されます。
「リスト位置を変更」ボタンをクリックすると、次のようにリストマーカーがテキストの内側（inside）に移動します。
まとめ
listStylePositionプロパティは、CSSのlist-style-positionに対応するDOMプロパティであり、「outside」と「inside」を切り替えることで、リストマーカーをテキストの外側に置くか内側に置くかを制御できます。JavaScriptと組み合わせれば、ユーザーの操作に応じてリストの見た目を動的に変更することも可能です。Webページのデザイン調整やインタラクティブなUIの実装にぜひ活用してみてください。
-
HTML DOMのlistStyleTypeプロパティとは？使い方と設定できる値を解説
listStyleTypeプロパティとはHTML DOMのStyleオブジェクトが持つlistStyleTypeプロパティは、リスト項目の先頭に表示されるマーカー（記号や番号）の種類を設定したり、現在設定されている値を取得したりするために使用されるプロパティです。構文listStyleTypeプロパティを設定する場合の構文は以下のとおりです。object.style.listStyleType = value主なプロパティ値の一覧listStyleTypeプロパティに指定できる主な値は以下のとおりです。値説明armenian伝統的なアルメニア数字をマーカーとして表示します。circle白抜きの
-
HTML DOMのlistStyleImageプロパティとは？使い方をコード例付きで解説
HTML DOM の listStyleImage プロパティは、リスト項目（<li>）のマーカーとして画像を設定したり、現在設定されている画像を取得したりするために使用されるプロパティです。通常の「●」や「■」といった箇条書き記号の代わりに、任意の画像をリストマーカーとして表示できます。 listStyleImageプロパティの構文 listStyleImage プロパティを設定する場合の構文は以下のとおりです。 object.style.listStyleImage = none|url|initial|inherit 指定できる値の一覧 それぞれの値の意味は次の表のとおり