list-style-position 【リストマーカーの表示位置指定】
[IE5] [IE6] [IE7] [Fx1] [Fx2] [Op6] [Op7] [Ns6] [Ns7]
list-style-positionプロパティは、リストマーカーの表示位置を指定する際に使用します。
outoside
マーカーがリスト内容の領域の外側に表示され、マーカー以外の部分がインデント(字下げ)された形になります。
inside
マーカーがリスト内容の領域の内側に表示され、マーカーとマーカー以外の部分の高さが揃います。
list-style-positionの使用例
CSSファイル
.sample001 {
list-style-type: disc;
list-style-position: outside;
margin: 10px;
}
.sample002 {
list-style-type: disc;
list-style-position: inside;
margin: 10px;
}
li {
padding : 10px;
}
HTMLソース
<ul class="sample001">
<li>リストスタイルポジションoutside</li>
<li>リストスタイルポジションoutside</li>
<li>リストスタイルポジションoutside</li>
</ul>
<ul class="sample002">
<li>リストスタイルポジションinside</li>
<li>リストスタイルポジションinside</li>
<li>リストスタイルポジションinside</li>
</ul>
表示すると
- リストスタイルポジションoutside
- リストスタイルポジションoutside
- リストスタイルポジションoutside
- リストスタイルポジションinside
- リストスタイルポジションinside
- リストスタイルポジションinside
リスト関連項目
| list-style | マーカーに関する指定をまとめて行う |
| list-style-type | マーカー文字の種類を指定する |
| list-style-image | マーカー画像を指定する |
| list-style-position | マーカーの表示位置を指定する |
| marker-offset※ | マーカーとの間隔を指定する |
