CSS リスト

HTMLには、主に2種類のリストがあります。

• 順不同リスト (Unordered lists / <ul>) - リストアイテムはマーカー（通常は小さな黒丸）でマークされます。
• 順序付きリスト (Ordered lists / <ol>) - リストアイテムは数字やアルファベットでマークされます。

CSSのリストプロパティを使用すると、以下のことが可能になります。

• 順序付きリストに異なるリストアイテムマーカーを設定する
• 順不同リストに異なるリストアイテムマーカーを設定する
• 画像をリストアイテムマーカーとして設定する
• リストおよびリストアイテムに背景色を追加する

1. リストアイテムマーカーの指定 (List Item Markers)

list-style-type プロパティは、リストアイテムマーカーの種類を指定します。

以下の例は、利用可能なリストアイテムマーカーの一部を示しています。

/* 順不同リスト (Unordered list) の例 */
ul.a {
  list-style-type: circle; /* 白抜き丸 */
}

ul.b {
  list-style-type: square; /* 四角 */
}

/* 順序付きリスト (Ordered list) の例 */
ol.c {
  list-style-type: upper-roman; /* 大文字ローマ数字 */
}

ol.d {
  list-style-type: lower-alpha; /* 小文字アルファベット */
}

       備考: 一部の値は <ul> 用であり、他の値は <ol> 用です。

2. 画像をマーカーにする

list-style-image プロパティを使用すると、画像をリストアイテムマーカーとして指定できます。

ul {
  list-style-image: url('sqpurple.gif');
}

3. リストマーカーの位置

list-style-position プロパティは、リストアイテムマーカー（行頭記号）の位置を指定します。これには outside と inside の2つの値があります。

3.1 list-style-position: outside

list-style-position: outside;（デフォルト）の場合、箇条書きのマーカーはリストアイテムの外側に配置されます。テキストの各行の開始位置は垂直方向に揃います。

3.2 list-style-position: inside

list-style-position: inside; の場合、マーカーはリストアイテムの内側に配置されます。マーカーはリストアイテムの一部となり、テキストの最初の行を押し出す形になります。2行目以降のテキストはマーカーの真下から始まります。

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

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

4. デフォルト設定の削除 (Remove Default Settings)

list-style-type: none プロパティを使用すると、マーカー/記号を削除できます。また、リストにはデフォルトで margin（外側余白）と padding（内側余白）が設定されているため、これらも 0 に設定して削除するのが一般的です。

これは、ナビゲーションメニューなど、リストの構造は維持しつつ視覚的な装飾を完全にカスタマイズしたい場合に多用されます。

ul {
  list-style-type: none; /* マーカーを消す */
  margin: 0;
  padding: 0;
}

5. リストのショートハンド

list-style プロパティはショートハンドプロパティです。1つの宣言で、すべてのリストプロパティを設定するために使用されます。

ul {
  /* type, position, image の順 */
  list-style: square inside url("sqpurple.gif");
}

ショートハンドを使用する場合、プロパティ値の順序は以下の通りです：

1. list-style-type（list-style-image が指定されている場合、その画像が表示できない際のフォールバックとして機能します）
2. list-style-position
3. list-style-image

いずれかの値が欠けている場合は、そのプロパティのデフォルト値が使用されます。

6. カラーを用いたリストのスタイリング

リストをより際立たせるために、色を付けてスタイリングすることもできます。
<ul> または <ol> タグに追加されたスタイルはリスト全体に影響し、<li> タグに追加されたスタイルは個々のリストアイテムに影響します。

ol {
  background: #ff9999; /* リスト全体の背景 */
  padding: 20px;
}

ul {
  background: #3399ff; /* リスト全体の背景 */
  padding: 20px;
}

ol li {
  background: #ffe5e5; /* 個別アイテムの背景 */
  color: darkred;
  padding: 5px;
  margin-left: 35px;
}

ul li {
  background: #cce5ff; /* 個別アイテムの背景 */
  color: darkblue;
  margin: 5px;
}

7. すべてのリストプロパティ一覧