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;
}
注: 一部の値は順序なしリスト用であり、一部は順序付きリスト用です。
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;
}
结果：
| 属性 | 説明 |
|---|---|
| list-style | 省略表現属性。 リストのすべてのプロパティを 1 つのステートメントで設定します。 |
| list-style-image | はリスト項目タグとして画像を指定します。 |
| list-style-position | はリスト項目マーク（箇条書き）の位置を指定します。 |
| list-style-type | はリスト項目タグのタイプを指定します。 |