CSS リスト

❮ 前章へ 次章へ ❯
  1. Coffee
  2. Tea
  3. Coca Cola

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

HTML には、2つの主要なリストのタイプがあります：

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;
}
Try it Yourself ❯

注: 値の幾つかは順序なしリストのもので、他は順序付きリストのものです。

リスト項目マーカとしての画像

list-style-image は、リスト項目マーカとして画像を指定します:

例

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

リスト項目マーカの配置

list-style-position プロパティは、リスト項目マーカをコンテンツフローの内側か外側のどちらに表示するかを指定します：

例

ul {
    list-style-position: inside;
}
Try it Yourself ❯

リスト - ショートハンド・プロパティ

list-style プロパティは、ショートハンド・プロパティです。これは、1 回の宣言で全ての list プロパティを 設定するために使用します：

例

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

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

上記の値のうちの 1 つが欠けても、指定しないプロパティのデフォルト値が挿入されます。

色によるリストのスタイリング

リストを色でスタイルすることにより、多少の興味を起こさせるようにすることができます。

<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
Try it Yourself ❯
Examples

その他の例

全幅のボーダー付きリスト
この例は、中点の無いボーダー付きリストを作成する方法のデモです。

リストに対する全種類のリスト項目マーカ
この例は、CSS におけるすべて異なるリスト項目マーカのデモです。

練習問題で確認テスト！

Exercise 1 ❯  Exercise 2 ❯  Exercise 3 ❯

全ての CSS リストプロパティ

プロパティ 説明
list-style 1 回の宣言でリストの全プロパティを設定する
list-style-image リスト項目マーカに画像を設定する
list-style-position リスト項目マーカをコンテンツ・フローの内側に表示するか外側に表示するかを指定する
list-style-type リスト項目マーカのタイプを指定する

❮ 前章へ 次章へ ❯