コードラボJP
プライバシーポリシー お問い合わせ サイトマップ

CSS リスト

順序なしリスト：

  • Coffee
  • Tea
  • Coca Cola
  • Coffee
  • Tea
  • Coca Cola

順序ありリスト：

  1. Coffee
  2. Tea
  3. Coca Cola
  1. Coffee
  2. Tea
  3. Coca Cola

HTMLリストとCSSリストプロパティ

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

  • 順序なしリスト（<ul>） – リストアイテムには円形のマーカーが付きます
  • 順序ありリスト（<ol>） – リストアイテムには数字や文字が付きます

CSSのリストプロパティを使うと、以下ができます：

  • 順序ありリストの異なるリストアイテムマーカーの設定
  • 順序なしリストの異なるリストアイテムマーカーの設定
  • 画像をリストアイテムマーカーとして設定する
  • リストやリストアイテムに背景色を追加する

異なるリストアイテムマーカー

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

以下の例は、使用可能ないくつかのリストアイテムマーカーを示しています：


ul.a {
  list-style-type: circle;
}

ul.b {
  list-style-type: square;
}

ol.c {
  list-style-type: upper-roman;
}

ol.d {
  list-style-type: lower-alpha;
}

注意：一部の値は順序なしリスト用であり、一部は順序ありリスト用です。

画像をリストアイテムマーカーとして設定する

list-style-imageプロパティは、画像をリストアイテムのマーカーとして指定します：


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

リストアイテムマーカーの位置調整

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

list-style-position: outside;は、マーカーがリストアイテムの外側に表示されます。各行の開始が垂直に整列します（デフォルト）：


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

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

デフォルト設定の削除

list-style-type: none;プロパティを使用して、マーカー（点や数字）を削除することもできます。リストにはデフォルトのマージンとパディングもあります。これを削除するには、<ul>または<ol>にmargin: 0;およびpadding: 0;を追加します：


ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

リスト – 省略プロパティ

list-styleプロパティは、リストのすべてのプロパティを1つの宣言で設定するための省略形です：


ul {
  list-style: square inside url("sqpurple.gif");
}

省略プロパティを使用する場合、プロパティ値の順序は次のとおりです：

  • list-style-type（画像が指定されている場合、このプロパティの値は、何らかの理由で画像が表示されない場合に表示される値です）
  • list-style-position（リストアイテムマーカーがコンテンツフロー内に表示されるかどうかを指定します）
  • list-style-image（リストアイテムマーカーとして画像を指定します）

上記のいずれかのプロパティ値が欠落している場合、欠落しているプロパティのデフォルト値が挿入されます（存在する場合）。

色でリストをスタイリングする

リストに色を付けて、少し面白く見せることもできます。

<ol>または<ul>タグに追加されるプロパティは、リスト全体に影響します。一方、<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;
}

結果：

  1. Coffee
  2. Tea
  3. Coca Cola
  • Coffee
  • Tea
  • Coca Cola