リストマーカー位置プロパティ

最終更新：2026-09-13

list-style-position リストマーカー位置プロパティ

list-style-position は、リストマーカーがリスト項目のコンテンツブロックの内側か外側かに配置するかを制御します。デフォルトの outside はマーカーをコンテンツブロックの外側に置き、テキストの最初の行がきれいに揃います。inside はマーカーをコンテンツブロック内に引き込み、テキストがその周りを回り込みます。リストの流れとインデントに影響します。

カテゴリ
初期値	outside
継承	いいえ
適用対象
アニメーションタイプ
CSS バージョン	CSS1
状態	標準

📝 構文

list-style-position: outside | inside;

⚙️ 値

値	タイプ	説明
`outside \| inside`	キーワード	マーカーの位置

▶ 例

以下のコードを編集して、プレイグラウンドでライブ結果を確認してください：

▶ 試す

🌐 ブラウザーサポート

ブラウザー	Chrome	Edge	Firefox	Safari	Opera
list-style-position	✓ v1	✓ v12	✓ v1	✓ v1	✓ v1
すべての主要ブラウザーでサポート

ヒント： outside はデフォルトで、後続の行を最初の行と揃えます。inside は短いテキストに適しており、マーカーとテキストを視覚的にコンパクトにします。

❓ よくある質問

Qoutside と inside はリストのレイアウトにどう影響しますか？

Aoutside（デフォルト）：マーカーは li のコンテンツブロックの外側にあり、テキストブロック全体が左揃えで、すべての行が揃い、マーカーはテキストから標準的な間隔を保ちます。inside：マーカーはコンテンツブロック内にあり、最初の行が内側に押し込まれ、後続の行はマーカーの下に揃います。outside は複数行の長文に適し、inside はよりコンパクトに見えます。

Qなぜ outside の方がテキストがきれいに見えるのですか？

Aoutside モードではマーカーがコンテンツブロックの幅を占有しないため、テキストブロックは左端がすべての行で揃うきれいな長方形になります。inside モードでは最初の行がマーカー分だけインデントされるため、最初の行が後続の行と揃わなくなります。複数行のリストでは、各行が揃うようデフォルトの outside を維持してください。

Qリストマーカーをテキストと垂直方向に中央揃えするには？

Alist-style-position ではマーカーの配置を細かく調整できません。一般的な方法は、list-style: none でマーカーを削除し、li::before で content: "•"（またはアイコン）を挿入、flex の align-items: center でマーカーをテキストに対して中央揃えにし、間隔を統一して制御します。