list-style-position
: <li>
のマーカーの位置 CSSプロパティ
このページで解説するコードの実行結果。(タイトルの文字列をクリックすると、コードに移動)
- 牛丼
- かつ丼
- 親子丼
- 牛丼
- かつ丼
- 親子丼
- 牛丼
- かつ丼
- 親子丼
デフォルト
HTML
& CSS
このページでは、以下のコードをデフォルトとして使用している。
list-style-position
の概要
<li>
要素のマーカーの位置を指定する。
親要素である<ol>
or <ul>
要素に対して設定する。
設定値 | マーカーの表示位置 | デフォルト |
---|---|---|
outside | ボックスの外側 | ○ |
inside | ボックスの内側 |
outside
: ボックスの外側
CSS : outside
.parent { list-style-position: outside; }
実行結果
- 牛丼
- かつ丼
- 親子丼
これはデフォルト値なので、無指定の場合でも同じ。
CSS : outside
.parent { }
実行結果
- 牛丼
- かつ丼
- 親子丼
inside
: ボックスの内側
CSS : inside
.parent { list-style-position: inside; }
実行結果
- 牛丼
- かつ丼
- 親子丼
上記のように、内側(inside
)にすると、list-style-type
によってはドット(.
)の位置がずれていくことに注意。
また、上記のように内側(inside
)にすると、子要素(<li>
)の左側にスペースが空く。
これは親要素(.parent
)に指定されているpadding-left
プロパティによるものである。
よって、padding-left
を調整することで変更できる。 0
にすると、そのスペースを無くせる。
CSS : スペースを無くす
.parent { list-style-position: inside; padding-left: 0; }
実行結果
- 牛丼
- かつ丼
- 親子丼
このままlist-style-position
をoutside
にすると、マーカーが親要素(parent
)からあふれ出ることに注意。
CSS : outside
.parent { list-style-position: outside; padding-left: 0; }
実行結果
- 牛丼
- かつ丼
- 親子丼
Emmet
記述 | Visual Studio Code |
---|---|
lisp | list-style-position: inside; |
lispo | list-style-position: outside; |