list-style-position
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
試してみましょう
構文
css
/* キーワード値 */
list-style-position: inside;
list-style-position: outside;
/* グローバル値 */
list-style-position: inherit;
list-style-position: initial;
list-style-position: revert;
list-style-position: revert-layer;
list-style-position: unset;
list-style-position
プロパティには、下記の値の中の一つが指定されます。
値
inside
-
::marker
はリストアイテムの最初の要素として配置されます。 outside
-
::marker
は主要ブロックボックスの外に配置されます。これはlist-style
の既定値です。
解説
公式定義
初期値 | outside |
---|---|
適用対象 | リスト項目 |
継承 | あり |
計算値 | 指定通り |
アニメーションの種類 | 離散値 |
形式文法
list-style-position =
inside |
outside
例
リストアイテムの位置の設定
HTML
html
<ul class="inside">
リスト 1
<li>リストアイテム 1-1</li>
<li>リストアイテム 1-2</li>
<li>リストアイテム 1-3</li>
<li>リストアイテム 1-4</li>
</ul>
<ul class="outside">
リスト 2
<li>リストアイテム 2-1</li>
<li>リストアイテム 2-2</li>
<li>リストアイテム 2-3</li>
<li>リストアイテム 2-4</li>
</ul>
<ul class="inside-img">
リスト 3
<li>リストアイテム 3-1</li>
<li>リストアイテム 3-2</li>
<li>リストアイテム 3-3</li>
<li>リストアイテム 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("star-solid.gif");
}
結果
仕様書
Specification |
---|
CSS Lists and Counters Module Level 3 # list-style-position-property |
ブラウザーの互換性
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
list-style-position | ||||||||||||
inside | ||||||||||||
outside |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- See implementation notes.
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
関連情報
list-style
一括指定プロパティlist-style-type
プロパティlist-style-image
プロパティ::marker
擬似要素- CSS リストとカウンターモジュール
- CSS カウンタースタイルモジュール