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※ マーカーとの間隔を指定する 

戻る

TOP