リストマーカーの表示位置についての設定

CSS - list-style-position

概要

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

使用例

仕様書

関連CSSプロパティ