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

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

• 順序なしリスト(<ul>) - リスト項目は黒丸でマークされています
• 順序付きリスト(<ol>) - リスト項目は数字または文字でマークされています

CSSリストプロパティを使用すると、次のことができます。

• 番号付きリストに異なるリスト項目マーカーを設定する。
• 番号なしリストに異なるリスト項目マーカーを設定する。
• 画像をリストアイテムマーカーとして設定する。
• リストとリストアイテムに背景色を追加する。

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

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

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

リストアイテムマーカーの配置

「list-style-position: outside;」は箇条書きがリスト項目の外にあることを意味します。リスト項目の各行の開始は、垂直方向に配置されます。これはデフォルトです。

• コーヒー -焙煎したコーヒー豆を使った醸造ドリンク...
• お茶
• コカコーラ

「list-style-position: inside;」は箇条書きがリスト項目内にあることを意味します。これはリスト項目の一部であるため、テキストの一部になり、最初にテキストをプッシュします。

• コーヒー -焙煎したコーヒー豆を使った醸造ドリンク...
• お茶
• コカコーラ

デフォルト設定を削除

リスト - 省略形のプロパティ

• list-style-type(リスト形式の画像が指定されている場合、何らかの理由で画像を表示できない場合に、このプロパティの値が表示されます。)
• list-style-position(リスト項目マーカーをコンテンツフローの内側または外側のどちらに表示するかを指定します。)
• list-style-image(リスト項目マーカーとしてイメージを指定します。)

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

色付きスタイリングリスト

リストを色でスタイルして、もう少し面白く見せることもできます。

<ol>または<ul>タグに追加されたものはすべてリスト全体に影響しますが、<li>タグに追加されたプロパティは個々のリスト項目に影響します:

その他の例

赤い左ボーダーのカスタマイズされたリストこの例は、赤い左の境界線を持つリストを作成する方法を示しています。

全幅のボーダーリストこの例は、箇条書きのない枠付きリストを作成する方法を示しています。

リストのすべての異なるリスト項目マーカー{.underline Full-width bordered list
}この例は、CSSのさまざまなリスト項目マーカーをすべて示しています。

すべてのCSSリストプロパティ

プロパティ	説明
list-style	1つの宣言でリストのすべてのプロパティを設定します
list-style-image	リスト項目マーカーとして画像を指定します
list-style-position	リスト項目マーカー(箇条書き)の位置を指定します
list-style-type	リスト項目マーカーのタイプを指定します