Tailwind CSSのTypographyにおけるList Style Positionとは？

Tailwind CSSのTypographyにおけるList Style Positionの解説

Tailwind CSSのTypography機能には、リストマーカーの位置を制御するlist-style-positionプロパティが含まれています。このプロパティは、リスト項目のテキストとマーカーの配置を調整するのに役立ちます。

使用例

以下の例では、list-style-positionプロパティを使用して、リストマーカーの位置を3つの異なる方法で配置しています。

<ul>
  <li>リスト項目1</li>
  <li>リスト項目2</li>
  <li>リスト項目3</li>
</ul>

ul {
  list-style: none;
}

li {
  padding: 10px;
}

/* マーカーをインデント内に配置 */
li::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  background-color: red;
  list-style-position: inside;
}

/* マーカーをテキストの外側に配置 */
.outside {
  list-style-position: outside;
}

/* マーカーをテキストとインデントの中間に配置 */
.center {
  list-style-position: center;
}

各プロパティ値の詳細

• inside: マーカーをインデント内に配置します。これがデフォルトの動作です。
• outside: マーカーをテキストの外側に配置します。
• center: マーカーをテキストとインデントの中間に配置します。

補足

• list-style-positionプロパティは、list-styleプロパティと組み合わせて使用することができます。
• list-styleプロパティを使用して、マーカーの種類やスタイルを指定することができます。
• 詳細については、Tailwind CSSの公式ドキュメントを参照してください。

• 上記の例は基本的な使い方を示していますが、list-style-positionプロパティを使用して、より複雑なレイアウトを作成することもできます。
• Tailwind CSSコミュニティには、list-style-positionプロパティを使用した様々な例が公開されていますので、参考にしてみてください。

質問等

上記の内容で分からない点や、さらに詳しく知りたい点があれば、お気軽にご質問ください。

Tailwind CSS List Style Position サンプルコード

<ul>
  <li class="list-disc inside">• リスト項目1</li>
  <li class="list-decimal outside">1. リスト項目2</li>
  <li class="list-square center">■ リスト項目3</li>
</ul>

マーカーの色とサイズを変更したサンプル

<ul>
  <li class="list-disc inside">
    <span class="text-red-500">•</span> リスト項目1
  </li>
  <li class="list-decimal outside">
    <span class="text-blue-500 h-4 w-4">1.</span> リスト項目2
  </li>
  <li class="list-square center">
    <span class="text-green-500 h-5 w-5">■</span> リスト項目3
  </li>
</ul>

マーカーとテキストの間隔を調整したサンプル

<ul>
  <li class="list-disc inside">
    <span class="mr-2">•</span> リスト項目1
  </li>
  <li class="list-decimal outside">
    <span class="ml-3">1.</span> リスト項目2
  </li>
  <li class="list-square center">
    <span class="mx-4">■</span> リスト項目3
  </li>
</ul>

疑似要素を使用してマーカーをカスタマイズしたサンプル

<ul>
  <li>
    <span class="list-disc inside">
      ::before {
        content: "";
        display: inline-block;
        width: 10px;
        height: 10px;
        background-color: red;
        border-radius: 50%;
      }
    </span>
    リスト項目1
  </li>
  <li>
    <span class="list-decimal outside">
      ::before {
        content: "";
        display: inline-block;
        width: 10px;
        height: 10px;
        background-color: blue;
        border: 1px solid white;
      }
    </span>
    リスト項目2
  </li>
  <li>
    <span class="list-square center">
      ::before {
        content: "";
        display: inline-block;
        width: 10px;
        height: 10px;
        background-color: green;
        transform: rotate(45deg);
      }
    </span>
    リスト項目3
  </li>
</ul>

メディアクエリを使用してデバイスごとにマーカーのスタイルを変更したサンプル

<ul>
  <li class="list-disc inside">
    <span class="text-red-500">•</span> リスト項目1
  </li>
  <li class="list-decimal outside">
    <span class="text-blue-500 h-4 w-4">1.</span> リスト項目2
  </li>
  <li class="list-square center">
    <span class="text-green-500 h-5 w-5">■</span> リスト項目3
  </li>
</ul>

@media (min-width: 768px) {
  ul {
    list-style-position: outside;
  }
}

上記はあくまでもサンプルコードです。これらのコードを参考に、

Tailwind CSSでList Style Positionを使用するその他の方法

ネストされたリストでlist-style-positionプロパティを使用すると、マーカーの位置を階層ごとに調整できます。

<ul>
  <li>
    リスト項目1
    <ul>
      <li>サブリスト項目1</li>
      <li>サブリスト項目2</li>
    </ul>
  </li>
  <li>
    リスト項目2
    <ul>
      <li>サブリスト項目3</li>
      <li>サブリスト項目4</li>
    </ul>
  </li>
</ul>

ul {
  list-style: none;
}

li {
  padding: 10px;
}

/* 親リストのマーカーをインデント内に配置 */
ul > li::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  background-color: red;
  list-style-position: inside;
}

/* 子リストのマーカーをテキストの外側に配置 */
ul ul > li::before {
  list-style-position: outside;
}

疑似クラスを使用する

list-style-positionプロパティと疑似クラスを組み合わせて、特定の状態のリスト項目のマーカーの位置を変更できます。

<ul>
  <li>リスト項目1</li>
  <li>リスト項目2</li>
  <li>リスト項目3</li>
</ul>

ul {
  list-style: none;
}

li {
  padding: 10px;
}

/* マウスホバー時にマーカーをテキストの中央に配置 */
li:hover::before {
  list-style-position: center;
}

カスタムマーカーを使用する

contentプロパティを使用して、画像やアイコンなどのカスタムマーカーを作成できます。

<ul>
  <li>リスト項目1</li>
  <li>リスト項目2</li>
  <li>リスト項目3</li>
</ul>

ul {
  list-style: none;
}

li {
  padding: 10px;
}

li::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  background-image: url("https://images.google.com/");
  list-style-position: inside;
}

JavaScriptを使用して、list-style-positionプロパティを動的に変更できます。

<ul>
  <li>リスト項目1</li>
  <li>リスト項目2</li>
  <li>リスト項目3</li>
</ul>

const listItems = document.querySelectorAll("li");

for (const listItem of listItems) {
  listItem.addEventListener("click", () => {
    listItem.style.listStylePosition = "center";
  });
}

これらの方法はほんの一例です。Tailwind CSSのlist-style-positionプロパティ