最終更新日 2021年6月6日

list-style-positionプロパティ

list-style-positionは、リストの先頭に表示するマーカーの位置を指定するプロパティです。

値はキーワードで指定します。初期値は「outside」で、マーカーはブロックボックスの外側に配置されます。「inside」を指定すると、マーカーはブロックボックスの内側に配置されます。

CSS3ではさらに、「hanging」というキーワードも指定可能です。その場合、マーカーは「inside」と同様、ブロックボックスの内側に配置されますが、マーカーの領域の大きさが同一に揃えられます。

リスト関連のプロパティをまとめて指定する場合は、list-styleを使用します。

CSS3での変更点

・値に「hanging」が追加されました。

初期値	適用先	継承
outside	「display: list-item;」を指定された要素	あり

値	説明
outside	マーカーはブロックボックスの外側に配置されます。（初期値）
inside	マーカーはブロックボックスの内側に配置されます。
hanging	マーカーは「inside」と同様、ブロックボックスの内側に配置されますが、マーカーの領域の大きさが同一に揃えられます。

サンプルコード

list-style-position: outside;
list-style-position: inside;
list-style-position: hanging;

当サイトの活動をサポートしてみませんか？気軽にクリエイターの支援ができます。