[CSS] リストマーカーをliタグの内側に表示する

リストマーカーは初期設定では以下のように、liタグの外側に表示されます。

リストマーカーをliタグの内側に表示させるには「list-style-position」を使用します。

【liタグに枠線を付けた例 】

  • いぬ
  • ねこ
  • うさぎ

黄色の部分がliタグ領域です。

サンプルソース

例)リストのマーカーをliタグの内側に表示する

【結果】

  • いぬ
  • ねこ
  • うさぎ

黒丸がliタグの内側に入りました。

備考

list-style-positionには以下の値を設定できます。

【list-style-positionの値】

意味
outsideマーカーをリストの外側に表示する(デフォルト)
insideマーカーをリストの内側に表示する

スポンサーリンク

CSS

Posted by tora