CSS: リストのマークの配置を、内側か外側かに指定する
CSS のリストマークの配置を、ボックスの内側か外側かに指定するには list-style-position プロパティを使用します。
ボックスの外側に配置する場合は「outside」を指定し、 ボックスの内側に配置する場合は「inside」を指定します。 デフォルトは「outside」です。
リストマークの配置を指定するサンプル
リストを２つ用意し、最初のリストは「list-style-position: outside;」を指定し、 マークを外側に表示します。 ２番目のリストは「list-style-position: inside;」を指定し、マークを内側に表示します。
外側と内側の違いがわかりやすいように、li 要素に対して枠線（border）を指定しています。
リスト1（外側）
- リスト1
- リスト1
- リスト1
リスト2（内側）
- リスト2
- リスト2
- リスト2
<p><b>リスト1（外側）</b></p>
<ul id="sample1">
<li>リスト1</li>
<li>リスト1</li>
<li>リスト1</li>
</ul>
<p><b>リスト2（内側）</b></p>
<ul id="sample2">
<li>リスト2</li>
<li>リスト2</li>
<li>リスト2</li>
</ul>
<style>
/* 外側 */
ul#sample1 {
list-style-position: outside;
}
/* 内側 */
ul#sample2 {
list-style-position: inside;
}
#sample1 li, #sample2 li {
border: 1px solid silver;
}
</style>