CSS 列表
CSSリストプロパティの作用は次のとおりです：
- 順序付きリストに異なるリスト項目マーカーを設定する
- 順序なしリストに異なるリスト項目マーカーを設定する
- リスト項目のマーカーを画像に設定する
列表
HTML には、2 種類のリストがあります:
- 无序列表ul- リスト項目マーカーは特別な図形（黒い点、小さい四角形など）を使用します
- 有序列表ol- リスト項目のマーカーには数字または文字を使用
CSS を使用すると、さらにスタイルを指定でき、画像をリスト項目マーカーとして使用できます。
順序なしリストは次のようになります:
- Coffee
- Tea
- Coca Cola
- Coffee
- Tea
- Coca Cola
順序付きリストは次のようになります:
- Coffee
- Tea
- Coca Cola
- Coffee
- Tea
- Coca Cola
異なるリスト項目マーカー
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 プロパティを使用します:
上記の例はすべてのブラウザで同じように表示されるわけではありません。IE と Opera は、Firefox、Chrome、Safari よりも画像マーカーを少し高く表示します。
すべてのブラウザで同じ画像マーカーを配置したい場合は、ブラウザ互換性の解決策を使用する必要があります。手順は次のとおりです。
ブラウザ互換性の解決策
次の例も、すべてのブラウザで同じように画像マーカーを表示します:
实例
ul
{
list-style-type: none;
padding: 0px;
margin: 0px;
}
ul li
{
background-image: url(sqpurple.gif);
background-repeat: no-repeat;
background-position: 0px 5px;
padding-left: 14px;
}
尝试一下 »
例子解释：
- ul:
- リストタイプをリスト項目マーカーなしに設定する
- パディングとマージンを 0px に設定します（ブラウザ互換性）
- ul 内のすべての li:
- 画像の URL を設定し、それが一度だけ表示されるように設定します（繰り返しなし）
- 画像の位置を指定する必要があります（左 0px、上下 5px）
- padding-left プロパティを使用して、テキストをリスト内に配置します
リスト - ショートハンドプロパティ
単一のプロパティですべてのリストプロパティを指定できます。これはショートハンドプロパティと呼ばれます。
リストにショートハンドプロパティを使用する場合、list-style プロパティは次のように設定します:
次のプロパティを順番に設定できます：
- list-style-type
- list-style-position (関連する説明については、以下のCSSプロパティ表を参照してください)
- list-style-image
上記の値のいずれかが欠落しても、残りが指定された順序のままである限り、問題ありません。
更多实例
すべての異なるリスト項目マーカー
この例は、さまざまな CSS リスト項目マーカーをすべて示しています。
デフォルト設定を削除
margin:0とpadding:0来移除:
すべてのCSSリストプロパティ
| 属性 | 描述 |
|---|---|
| list-style | ショートハンドプロパティ。リストに関するすべてのプロパティを 1 つの宣言で設定するために使用されます。 |
| list-style-image | 画像をリスト項目マーカーとして設定します。 |
| list-style-position | リスト内のリスト項目マーカーの位置を設定します。 |
| list-style-type | リスト項目マーカーのタイプを設定します。 |