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;" はリストアイテムのポイントがリストアイテムの外に配置されることを示しています。リストアイテムの各行の先頭が垂直に揃います。これはデフォルトです：

  • Coffee - 焼いたコーヒー豆で作られた泡飲料
  • Tea
  • Coca-cola

"list-style-position: inside;" 「list-style-position: inside;」を表し、アイコンはリストアイテム内に表示されます。リストアイテムの一部であるため、テキストの一部になり、先頭にテキストを広げます：

  • Coffee - 焼いたコーヒー豆で作られた泡飲料
  • Tea
  • Coca-cola

例

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 属性は、一つの宣言ですべてのリスト属性を設定するショートカット属性です：

例

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

自分で試してみてください

ショートカット属性を使用する場合、属性値の順序は以下の通りです：

  • list-style-type（list-style-imageが指定された場合、画像が表示できない理由であれば、この属性の値が表示されます）
  • list-style-position（リストアイテムマークがコンテンツフローの内部か外部に表示されるかを指定）
  • list-style-image（画像をリストアイテムマークとして指定）

上記の属性値のいずれかが欠けている場合、欠けている属性のデフォルト値（あれば）が挿入されます。

リストの色スタイルの設定

また、色の設定を使ってリストのスタイルを設定し、より面白くすることができます。

任何添加到 <ol> 或 <ul> タグのスタイルはリスト全体に影響を与え、<li> タグに追加された属性は各リストアイテムに影響を与えます：

例

ol {
  background: #ff9999;
  padding: 20px;
}
ul {
  background: #3399ff;
  padding: 20px;
}
ol li {
  background: #ffe5e5;
  padding: 5px;
  margin-left: 35px;
}
ul li {
  background: #cce5ff;
  margin: 5px;
}

結果：

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

自分で試してみてください

さらに多くの例

赤い左枠線を持つカスタムリスト
この例では、赤い左枠線を持つリストの作成方法を示します。
全画面幅の枠線リスト
この例では、リストアイコンがなくてフレームがあるリストの作成方法を示しています。
リストのすべての異なるリストアイテムのマーク
この例では、CSS 中のすべての異なるリストアイテムのマークを示しています。

すべての CSS リスト属性

属性 説明
list-style ショートカット属性。リストのすべての属性を1つの宣言で設定します。
list-style-image リストアイテムのマークとして画像を指定します。
list-style-position リストアイテムのマーク（リストアイコン）の位置を指定します。
list-style-type リストアイテムのマークのタイプを指定します。