CSSリスト
順序付けられていないリスト：
- コーヒー
- お茶
- コークス
- コーヒー
- お茶
- コークス
注文リスト：
- コーヒー
- お茶
- コークス
- コーヒー
- お茶
- コークス
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;" 箇条書きがリスト項目の外にあることを意味します。リストアイテムの各行の先頭は垂直方向に配置されます。これはデフォルトです：
- コーヒー- 焙煎したコーヒー豆から作られた淹れたての飲み物...
- お茶
- コークス
"list-style-position：inside;" 箇条書きがリストアイテム内にあることを意味します。これはリストアイテムの一部であるため、テキストの一部になり、最初にテキストをプッシュします。
- コーヒー- 焙煎したコーヒー豆から作られた淹れたての飲み物...
- お茶
- コークス
例
ul.a {
list-style-position: outside;
}
ul.b {
list-style-position: inside;
}
デフォルト設定を削除する
このlist-style-type:noneプロパティを使用して、マーカー/箇条書きを削除することもできます。リストにはデフォルトのマージンとパディングもあることに注意してください。これを削除するには、margin:0とpadding:0を<ul>または<ol>に追加します。
例
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-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;
}
結果：
- Coffee
- Tea
- Coca Cola
- Coffee
- Tea
- Coca Cola
その他の例
この例は、左の境界線が赤のリストを作成する方法を示しています。
この例は、箇条書きなしで境界線付きリストを作成する方法を示しています。
この例は、CSSのすべての異なるリストアイテムマーカーを示しています。
すべてのCSSリストのプロパティ
| Property | Description |
|---|---|
| list-style | Sets all the properties for a list in one declaration |
| list-style-image | Specifies an image as the list-item marker |
| list-style-position | Specifies the position of the list-item markers (bullet points) |
| list-style-type | Specifies the type of list-item marker |