概要
CSSプロパティ｢list-style-position｣は、リストの先頭に対して、中点などのマーカーの位置を指定します。各リストに border プロパティでボックスの罫線を引いていますので、それよりマーカーの位置が外側なのか内側なのかの違いが確認してみてください。
<p>好きな動物リストです</p>
<ul>
<li class="outside">ネコ</li>
<li class="outside">犬</li>
<li class="inside">ウサギ</li>
</ul>
<style>
li {
border: 1px solid #ddd;
margin-bottom: 5px;
padding: 5px;
list-style-type : square;
}
.outside {
list-style-position: outside;
}
.inside {
list-style-position:inside;
}
</style>取りうる値
それぞれの値を指定します。指定しなかった場合はデフォルト値の｢outside｣が適用されます。
{ list-style: キーワード;}| 値 | 説明 |
|---|---|
| inside | リストマーカーはボックスの内側に表示されます |
| outside | 初期値です。リストマーカーはボックスの外側に表示されます |
list-styleに関連のプロパティ一覧
| プロパティ名 | 説明 |
|---|---|
| list-style | マーカーに関する指定をまとめて行うショートハンド |
| list-style-image | マーカーに画像を指定する |
| list-style-type | マーカー文字の種類を指定する |
| list-style-position | マーカー文字の位置を指定する |
| marker-offset | マーカーとの間隔を指定する |