CSSリスト

1. コーヒー
2. お茶
3. コカコーラ

• コーヒー
• お茶
• コカコーラ

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

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

• 順不同リスト(<ul>) -リスト項目を箇条書きでマークされています
• 順序付きリスト(<ol>) -リスト項目は、数字や文字が付いています

CSSリストのプロパティには、次が可能になります：

• 注文したリストの別のリスト項目のマーカーを設定します
• 順不同リストに別のリスト項目のマーカーを設定します
• リストアイテムマーカーとして画像を設定します。
• リストおよびリスト項目に背景色を追加します。

別のリスト項目マーカー

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

次の例では、利用可能なリストアイテムマーカーのいくつかを示しています。

注：一部の値は、順不同リストのためのものであり、いくつか注文したリストに対して。

リスト項目のマーカーとしてのイメージ

list-style-imageプロパティは、リスト項目マーカーとして画像を指定します。

リスト項目のマーカーを配置します

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

リスト - 速記プロパティ

list-styleプロパティが簡略記述特性です。 1つの宣言内のすべてのリストプロパティを設定するために使用されます。

簡略記述特性を使用する場合は、プロパティ値の順序は次のとおりです。

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

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

色でスタイリング一覧

また、色のスタイルのリストは、それらをもう少し面白い見えるようにすることができます。

何が追加<ol>または<ul>プロパティが追加しながら、タグ、リスト全体に影響を与える<li>タグは、個々のリストの項目に影響します。

その他の例

全角境リスト
この例では、箇条書きせずに縁取らリストを作成する方法を示します。

リストのすべての別のリスト項目のマーカー
この例では、CSSのすべての別のリスト項目マーカーを示しています。

練習で自分自身をテスト！

演習1» 演習2» 演習3»

すべてのCSS一覧プロパティ