list-style-positionプロパティは何に使用されますか？

list-style-positionプロパティは、リストアイテムのマーカーを内側または外側に配置する位置を指定するために使用されます。

list-style-positionの主な値にはどのようなものがありますか？

list-style-positionの主な値には、outside（デフォルト）とinsideがあります。

list-style-positionを使ってマーカーを内側に配置するにはどうすればよいですか？

list-style-position inside; と設定することで、マーカーをリストアイテムの内側に配置できます。

【CSS】list-style-positionプロパティの使い方

概要

list-style-positionプロパティは、CSSでリストのマーカー（箇条書きの記号や番号）の位置を制御するためのプロパティです。マーカーをリストアイテムのボックスの「外側」に置くか「内側」に置くかを選択できます。

この記事では、list-style-positionの基本的な使い方から、実践的なデザインパターン、適切な使い分けについて詳しく解説します。

list-style-positionの基本

基本構文

/* キーワード値 */
list-style-position: outside;
list-style-position: inside;

/* グローバル値 */
list-style-position: inherit;
list-style-position: initial;
list-style-position: revert;
list-style-position: unset;

値の説明

値	説明
`outside`	マーカーをリストアイテムのボックスの外側に配置（デフォルト）
`inside`	マーカーをリストアイテムのボックスの内側に配置

outside と inside の違い

outside（デフォルト）

outsideでは、マーカーがリストアイテムのコンテンツボックスの外側に配置されます。テキストが複数行になった場合も、2行目以降はマーカーの右側で揃います。

.outside-list {
  list-style-position: outside;
}

<ul class="outside-list">
  <li>これはoutsideの例です。テキストが長くなって複数行になった場合、
  2行目以降もマーカーの右側で揃って表示されます。</li>
  <li>マーカーはテキストの外側に配置されます。</li>
</ul>

特徴:

マーカーがテキスト領域の外に出る
複数行テキストでも左端が揃う
従来のリスト表示に最適

inside

insideでは、マーカーがリストアイテムのコンテンツボックスの内側に配置されます。テキストが複数行になると、2行目以降はマーカーの下から始まります。

.inside-list {
  list-style-position: inside;
}

<ul class="inside-list">
  <li>これはinsideの例です。テキストが長くなって複数行になった場合、
  2行目はマーカーの下から始まります。</li>
  <li>マーカーがテキストの内側に含まれます。</li>
</ul>

特徴:

マーカーがテキスト領域内に含まれる
複数行テキストでは2行目がマーカーの下に来る
コンパクトなデザインに適している

実践的な使用例

視覚的な比較

<div class="comparison">
  <div class="list-container">
    <h3>outside（デフォルト）</h3>
    <ul class="demo-outside">
      <li>短いテキスト</li>
      <li>これは長いテキストの例です。複数行になった場合の挙動を確認できます。</li>
      <li>3番目のアイテム</li>
    </ul>
  </div>

  <div class="list-container">
    <h3>inside</h3>
    <ul class="demo-inside">
      <li>短いテキスト</li>
      <li>これは長いテキストの例です。複数行になった場合の挙動を確認できます。</li>
      <li>3番目のアイテム</li>
    </ul>
  </div>
</div>

.comparison {
  display: flex;
  gap: 24px;
}

.list-container {
  flex: 1;
  padding: 16px;
  background: #f5f5f5;
  border-radius: 8px;
}

.list-container h3 {
  margin: 0 0 12px;
  font-size: 14px;
  color: #666;
}

.demo-outside,
.demo-inside {
  margin: 0;
  padding-left: 20px;
  width: 200px;
}

.demo-outside {
  list-style-position: outside;
}

.demo-inside {
  list-style-position: inside;
}

.demo-outside li,
.demo-inside li {
  padding: 4px 0;
  background: rgba(52, 152, 219, 0.1);
  margin-bottom: 8px;
}

背景色付きリスト

insideは、リストアイテムに背景色を付ける場合に便利です。

<ul class="highlighted-list">
  <li>重要なポイント1</li>
  <li>重要なポイント2</li>
  <li>重要なポイント3</li>
</ul>

.highlighted-list {
  list-style-position: inside;
  padding: 0;
}

.highlighted-list li {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
  padding: 12px 16px;
  margin-bottom: 8px;
  border-radius: 4px;
}

カード内のリスト

<div class="pricing-card">
  <h2>プロプラン</h2>
  <p class="price">¥2,980/月</p>
  <ul class="feature-list">
    <li>無制限のプロジェクト</li>
    <li>優先サポート</li>
    <li>高度な分析機能</li>
    <li>カスタムドメイン</li>
  </ul>
  <button>申し込む</button>
</div>

.pricing-card {
  max-width: 300px;
  padding: 24px;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  text-align: center;
}

.pricing-card h2 {
  margin: 0 0 8px;
}

.pricing-card .price {
  font-size: 28px;
  font-weight: bold;
  color: #3498db;
  margin: 0 0 24px;
}

.feature-list {
  list-style-type: none;
  list-style-position: inside;
  padding: 0;
  margin: 0 0 24px;
  text-align: left;
}

.feature-list li {
  padding: 8px 0;
  border-bottom: 1px solid #eee;
}

.feature-list li::before {
  content: '✓ ';
  color: #27ae60;
  font-weight: bold;
}

ボックス内でマーカーを含める

.boxed-list {
  list-style-position: inside;
  border: 2px solid #3498db;
  padding: 16px;
  border-radius: 8px;
  background: #f0f8ff;
}

.boxed-list li {
  padding: 8px 0;
}

使い分けのガイドライン

outsideを選ぶケース

従来のドキュメントスタイル: 技術文書、マニュアルなど
長いテキストのリスト: 複数行にまたがる説明文
マーカーを目立たせたい場合: 視覚的な区切りを重視

/* ドキュメント向けの設定 */
.document-list {
  list-style-position: outside;
  padding-left: 2em;
  line-height: 1.8;
}

.document-list li {
  margin-bottom: 12px;
}

insideを選ぶケース

背景色付きリスト: アイテムごとに色を付ける場合
コンパクトなUI: サイドバー、ドロップダウンなど
ボックス内のリスト: カード、パネル内での使用

/* UI向けの設定 */
.ui-list {
  list-style-position: inside;
  padding: 0;
  margin: 0;
}

.ui-list li {
  padding: 12px 16px;
  background: #f9f9f9;
  border-bottom: 1px solid #eee;
}

.ui-list li:last-child {
  border-bottom: none;
}

他のプロパティとの組み合わせ

list-styleショートハンド

/* ショートハンドで一括指定 */
ul {
  list-style: disc inside;
}

/* 分解した場合 */
ul {
  list-style-type: disc;
  list-style-position: inside;
  list-style-image: none;
}

padding-leftとの調整

outsideの場合、padding-leftでマーカーの表示領域を確保します。

/* outside + padding-left */
.standard-list {
  list-style-position: outside;
  padding-left: 24px; /* マーカー用のスペース */
}

/* inside + padding-left */
.compact-list {
  list-style-position: inside;
  padding-left: 0; /* マーカーが内側なので不要な場合も */
}

注意点

1. 複数行テキストの表示の違い

insideを使用する場合、長いテキストの2行目以降がマーカーの下に来ることを理解しておく必要があります。

/* 複数行での挙動を考慮した設定 */
.multi-line-list {
  list-style-position: inside;
}

.multi-line-list li {
  /* 2行目以降のインデントを調整したい場合は
     ::beforeを使ったカスタムマーカーを検討 */
}

2. マーカーのクリック領域

insideの場合、マーカーがコンテンツボックス内に入るため、クリック可能な領域に含まれます。

3. アクセシビリティ

どちらの設定でも、リストのセマンティクスは維持されます。スクリーンリーダーでの読み上げに影響はありません。

ブラウザサポート

ブラウザ	サポート状況
Chrome	全バージョン
Firefox	全バージョン
Safari	全バージョン
Edge	全バージョン
Opera	全バージョン
IE	全バージョン

list-style-positionはすべてのブラウザで完全にサポートされています。

まとめ

list-style-positionプロパティは、リストマーカーの配置を制御するシンプルながら重要なプロパティです。

値	用途
`outside`	従来のドキュメントスタイル、長いテキストのリスト
`inside`	背景色付きリスト、コンパクトなUI、ボックス内のリスト

デザインの目的に応じて適切な値を選択することで、視覚的にわかりやすく、使いやすいリストを実現できます。

概要