| プロパティ名 | 値 | 適用対象 | 継承 |
|---|---|---|---|
| list-style-position: | 表示位置 | li要素 | 有り |
| 値 | 説明 | |
|---|---|---|
| 表示位置 | inside | リスト項目の内側に表示 |
| outside | リスト項目の外側に表示（デフォルト） |
list-style-positionプロパティは、リストの行頭に表示する記号又は画像の表示位置を指定します。値には、insideまたは、outsideを指定します。
このプロパティは、ul, li, ol 要素に指定して使用します。
このプロパティは、ul, li, ol 要素に指定して使用します。
サンプルソース
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<style type="text/css">
<!--
ul {list-style-type:square;
list-style-position:inside;}
.sampl01{list-style-image:url("../img/rist02.gif");
list-style-position:outside;}
.sampl02{list-style-image:url("../img/rist03.gif");
list-style-position:outside;}
.sampl03{list-style-image:url("../img/rist04.gif");
list-style-position:outside;}
.sampl04{list-style-image:url("../img/rist05.gif");
list-style-position:inside;}
.sampl05{list-style-image:url("../img/rist06.gif");
list-style-position:inside;}
ul {color:blue;
font-size:1.5em;
}
li {background-color:#00FFFF;}
-->
</style>
</head>
<body>
<ul>
<li>リストの画像を表示する1</li>
<li>リストの画像を表示する1</li>
<li>リストの画像を表示する1</li>
</ul>
<ul>
<li class="sampl01">リストの画像を表示する2</li>
<li class="sampl02">リストの画像を表示する3</li>
<li class="sampl03">リストの画像を表示する4</li>
<li class="sampl04">リストの画像を表示する5</li>
<li class="sampl05">リストの画像を表示する6</li>
</ul>
</body>
</html>
