Tailwind CSSの「list-inside」と「list-outside」で実現！見やすく、そしてオシャレなリストデザインの作り方

標準的なリストスタイル

デフォルトでは、リスト項目のマーカーは行頭の左側に配置され、テキストはその右側にインデントされます。これは以下のHTMLとCSSで表現できます。

<ul>
  <li>アイテム1</li>
  <li>アイテム2</li>
  <li>アイテム3</li>
</ul>

ul {
  list-style: none; /* デフォルトのマーカーを非表示にする */
}

li {
  list-style-type: dot; /* マーカーの種類をドットに変更 */
}

list-insideとlist-outsideによるカスタマイズ

list-insideとlist-outsideを組み合わせることで、マーカーとテキストの位置を柔軟に調整できます。

• list-outside: マーカーをリスト項目外側に配置
• list-inside: マーカーをリスト項目内側に配置

それぞれのユーティリティクラスには、以下のバリエーションがあります。

• list-[center]: マーカーをリスト項目の中央に配置
• list-[start | end]: マーカーの位置をリスト項目の先頭または末尾に配置

これらのバリエーションを組み合わせて、様々なスタイルを実現できます。

例：マーカーを中央に配置し、テキストを左寄せ

<ul class="list-inside list-center">
  <li class="text-left">アイテム1</li>
  <li class="text-left">アイテム2</li>
  <li class="text-left">アイテム3</li>
</ul>

例：マーカーを左側に配置し、テキストを折り返す

<ul class="list-outside list-start">
  <li class="text-wrap">長いアイテム1</li>
  <li class="text-wrap">長いアイテム2</li>
  <li class="text-wrap">長いアイテム3</li>
</ul>

レスポンシブデザインへの対応

メディアクエリを用いて、list-insideとlist-outsideを特定の画面サイズでのみに適用することもできます。

@media (min-width: 768px) {
  ul {
    list-inside list-start; /* 768px以上の画面サイズでのみマーカーを左側に配置 */
  }
}

• list-disc、list-squareなどのユーティリティクラスを用いて、マーカーの種類を変更することもできます。

• 複雑なリスト構造の場合、ネストしたCSSでスタイルを調整する必要が生じる場合があります。
• list-insideとlist-outsideは、インライン要素にも適用できます。

---

マーカーを中央に配置し、テキストを左寄せ

<ul class="list-inside list-center">
  <li class="text-left">アイテム1</li>
  <li class="text-left">アイテム2</li>
  <li class="text-left">アイテム3</li>
</ul>

このコードは、以下のスタイルを実現します。

• テキストはリスト項目の左側に寄せられます。
• マーカーはリスト項目の中央に配置されます。

マーカーを左側に配置し、テキストを折り返す

<ul class="list-outside list-start">
  <li class="text-wrap">長いアイテム1</li>
  <li class="text-wrap">長いアイテム2</li>
  <li class="text-wrap">長いアイテム3</li>
</ul>

• テキストはリスト項目の幅いっぱいに広がり、必要に応じて折り返されます。
• マーカーはリスト項目の左側に配置されます。

異なるマーカー種類と位置

<ul class="list-disc list-start">
  <li>アイテム1</li>
  <li>アイテム2</li>
  <li>アイテム3</li>
</ul>

<ul class="list-square list-end">
  <li>アイテム4</li>
  <li>アイテム5</li>
  <li>アイテム6</li>
</ul>

• 2つ目のリストは、四角形のマーカーを右側に配置します。
• 1つ目のリストは、円形のマーカーを左側に配置します。

レスポンシブデザイン

@media (min-width: 768px) {
  ul {
    list-inside list-start; /* 768px以上の画面サイズでのみマーカーを左側に配置 */
  }
}

• 768px以上の画面サイズでは、マーカーが左側に配置されます。
• 768px未満の画面サイズでは、デフォルトのリストスタイルが適用されます。

縦方向リスト

<ul class="list-inside list-top">
  <li>アイテム1</li>
  <li>アイテム2</li>
  <li>アイテム3</li>
</ul>

• テキストはリスト項目の下に配置されます。
• マーカーはリスト項目の上部に配置されます。

<ul>
  <li>親アイテム1
    <ul class="list-inside list-start">
      <li>子アイテム1</li>
      <li>子アイテム2</li>
      <li>子アイテム3</li>
    </ul>
  </li>
  <li>親アイテム2
    <ul class="list-outside list-end">
      <li>子アイテム4</li>
      <li>子アイテム5</li>
      <li>子アイテム6</li>
    </ul>
  </li>
</ul>

• 子リストのマーカーは、親リスト項目内側に左寄せ、または外側に右寄せで配置されます。
• 親リストのマーカーはデフォルトの位置に配置されます。

---

そこで、list-style-position の代替方法として以下のアプローチが考えられます。

擬似要素と ::before セレクタ

• 複雑なリスト構造や、高度なカスタマイズが必要な場合に適しています。
• 既存のマーカーを非表示にする必要はありません。
• マーカーの位置、スタイル、コンテンツを自由に設定できます。
• 擬似要素 ::before を使用して、リスト項目の前にカスタムマーカーを挿入します。

例：

ul {
  list-style: none; /* デフォルトのマーカーを非表示にする */
}

li::before {
  content: '●'; /* マーカーのコンテンツ */
  display: block; /* マーカーをブロック要素として表示 */
  width: 10px; /* マーカーの幅 */
  height: 10px; /* マーカーの高さ */
  margin-right: 10px; /* マーカーとテキストの間隔 */
  background-color: #007bff; /* マーカーの色 */
}

背景画像

• 繰り返しパターンの画像を使用することで、シームレスなマーカーを実現できます。
• 柔軟性と汎用性に優れていますが、複雑なマーカーデザインには不向きです。
• リスト項目の背景画像を使用して、マーカーを表現します。

ul {
  list-style: none; /* デフォルトのマーカーを非表示にする */
  background-image: url('marker.png'); /* マーカー画像 */
  background-repeat: repeat-x; /* マーカーを横方向に繰り返し表示 */
  background-position: left 0.5em; /* マーカーの位置 */
}

カスタムマーカー要素

• 動的なコンテンツを含むマーカーを作成する場合に役立ちます。
• 完全にカスタマイズ可能ですが、HTML構造が複雑になり、保守が難しくなる可能性があります。
• 各リスト項目の前に、個別のマーカー要素を挿入します。

<ul>
  <li>
    <span class="marker"></span>アイテム1
  </li>
  <li>
    <span class="marker"></span>アイテム2
  </li>
  <li>
    <span class="marker"></span>アイテム3
  </li>
</ul>

.marker {
  display: inline-block; /* マーカーをインライン要素として表示 */
  width: 10px; /* マーカーの幅 */
  height: 10px; /* マーカーの高さ */
  margin-right: 10px; /* マーカーとテキストの間隔 */
  background-color: #007bff; /* マーカーの色 */
}

Tailwind CSS の list-inside と list-outside ユーティリティークラス

• 使いやすく、レスポンシブデザインにも対応しています。
• Tailwind CSS を使用している場合は、list-inside と list-outside ユーティリティークラスを使用して、リスト項目のマーカー位置を簡単に制御できます。

最適な代替方法の選択

• Tailwind CSS ユーザー：list-inside と list-outside ユーティリティークラス
• 完全なカスタマイズ性：カスタムマーカー要素
• 汎用性と保守性：背景画像
• シンプルで柔軟な方法：擬似要素と ::before セレクタ

それぞれの方法の長所と短所を比較検討し、プロジェクトの要件に合ったものを選択してください。

• コードの保守性：将来の変更を容易にするために、コードをわかりやすく、簡潔に保ちましょう。
• パフォーマンス：複雑なマーカーは、レンダリングのパフォーマンスに影響を与える可能性があります。
• アクセシビリティ：視覚障がい者にとって、マーカーがテキストと区別できることを確認してください。