blob: 6e40a21dfbe06090a31028ce7b6ce15cbd38f77a (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
|
---
title: list-style-position
slug: Web/CSS/list-style-position
tags:
- CSS
- CSS プロパティ
- CSS リスト
- リファレンス
- recipe:css-property
browser-compat: css.properties.list-style-position
translation_of: Web/CSS/list-style-position
---
{{CSSRef}}
**`list-style-position`** は [CSS](/ja/docs/Web/CSS) のプロパティで、リスト項目に対する {{cssxref("::marker")}} の位置を指定します。
{{EmbedInteractiveExample("pages/css/list-style-position.html")}}
多くの場合、一括指定の {{cssxref("list-style")}} を使ったほうが便利です。
> **Note:** このプロパティはリスト項目に対して適用されます。つまり、 `{{cssxref("display")}}: list-item;` が指定された要素です。[既定では](https://www.w3.org/TR/html5/rendering.html#lists)、 {{HTMLElement("li")}} 要素が該当します。このプロパティは継承されるので、親要素 (通常は {{HTMLElement("ol")}} や {{HTMLElement("ul")}}) に設定することで、すべてのリスト項目に適用することができます。
なお、 `list-style-position: inside` を指定したリスト要素の中で最初にブロック要素が配置された場合、その動作はブラウザーによって異なります。 Chrome と Safari では、この要素はマーカーボックスと同じ行に配置されますが、 Firefox、 Internet Explorer、 Opera では次の行に配置されます。 詳細については {{bug(36854)}} をご覧ください。
## 構文
```css
/* キーワード値 */
list-style-position: inside;
list-style-position: outside;
/* グローバル値 */
list-style-position: inherit;
list-style-position: initial;
list-style-position: revert;
list-style-position: unset;
```
`list-style-position` プロパティには、下記の値の中の一つが指定されます。
### 値
- `inside`
- : {{cssxref("::marker")}} はリスト項目の最初の要素として配置されます。
- `outside`
- : {{cssxref("::marker")}} は主要ブロックボックスの外に配置されます。
## 公式定義
{{cssinfo}}
## 形式文法
{{csssyntax}}
## 例
<h3 id="Setting_list_item_position">リスト項目の位置の設定</h3>
#### HTML
```html
<ul class="inside">List 1
<li>List Item 1-1</li>
<li>List Item 1-2</li>
<li>List Item 1-3</li>
<li>List Item 1-4</li>
</ul>
<ul class="outside">List 2
<li>List Item 2-1</li>
<li>List Item 2-2</li>
<li>List Item 2-3</li>
<li>List Item 2-4</li>
</ul>
<ul class="inside-img">List 3
<li>List Item 3-1</li>
<li>List Item 3-2</li>
<li>List Item 3-3</li>
<li>List Item 3-4</li>
</ul>
```
#### CSS
```css
.inside {
list-style-position: inside;
list-style-type: square;
}
.outside {
list-style-position: outside;
list-style-type: circle;
}
.inside-img {
list-style-position: inside;
list-style-image: url("starsolid.gif");
}
```
#### 結果
{{EmbedLiveSample("Setting_list_item_position", 200, 420)}}
## 仕様書
{{Specifications}}
## ブラウザーの互換性
{{Compat}}
## 関連情報
- {{Cssxref("list-style")}}, {{Cssxref("list-style-type")}}, {{Cssxref("list-style-image")}}
|
