list-style-type 記号

深入解析 CSS 列表样式符号：list-style-type の奥秘

この記事では、CSS のリストスタイル符号 (`list-style-type`) の使い方について、基礎から応用まで詳しく解説します。実例を交えながら、リストスタイルを自由に操る方法を学びましょう。

1. list-style-type の基礎

`list-style-type` プロパティは、リストアイテムのマーカーのスタイルを制御します。

`list-style-type` には、以下のような値を設定できます。

<ul style="list-style-type: circle;">
  <li>リストアイテム 1</li>
  <li>リストアイテム 2</li>
  <li>リストアイテム 3</li>
</ul>

上記コードは、空洞の円をマーカーとしてリストを表示します。

`list-style-image` プロパティを使用すると、任意の画像をマーカーとして設定できます。

<ul style="list-style-image: url('marker.png');">
  <li>リストアイテム 1</li>
  <li>リストアイテム 2</li>
  <li>リストアイテム 3</li>
</ul>

`list-style-position` プロパティで、マーカーをテキストの内部または外部に配置できます。

<ul style="list-style-position: inside;">
  <li>リストアイテム 1</li>
</ul>

CSS カウンターを使用すると、独自の番号付けやネストされたリストのスタイルを細かく制御できます。

ol {
  counter-reset: item;
}

li::before {
  content: counters(item, ".") ". ";
  counter-increment: item;
}

`list-style-type` は主要なブラウザで広くサポートされています。ただし、古いブラウザでは一部の値がサポートされていない場合があります。互換性を確保するため、以下の点に注意しましょう。

`list-style-type` を使用すると、以下のような様々なリスト効果を実現できます。

<ol>
  <li>リストアイテム 1</li>
  <li>リストアイテム 2</li>
  <li>リストアイテム 3</li>
</ol>

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

<ol style="list-style-type: upper-roman;">
  <li>リストアイテム 1</li>
  <li>リストアイテム 2</li>
  <li>リストアイテム 3</li>
</ol>

<ul style="list-style-image: url('icon.png');">
  <li>リストアイテム 1</li>
  <li>リストアイテム 2</li>
  <li>リストアイテム 3</li>
</ul>

この記事では、`list-style-type` プロパティを使用してリストのスタイルを制御する方法について解説しました。`list-style-type` は、シンプルながらも強力なプロパティです。この記事で紹介したテクニックを活用して、美しく、プロフェッショナルなウェブページを作成しましょう。