list-style-type
はCSSプロパティの一つで、リスト項目のマーカーのスタイルを設定するために使用されます。これにより、順序なしリスト(<ul>
)または順序付きリスト(<ol>
)の各項目の前に表示されるシンボルの種類を指定できます。
list-style-type
プロパティの値
list-style-type
プロパティにはさまざまな値を設定でき、以下にいくつかの一般的な例を挙げます:
- 順序なしリストのためのスタイル:
disc
: デフォルトの値。黒い円点。circle
: 空の円点。square
: 四角点。
- 順序付きリストのためのスタイル:
decimal
: アラビア数字(1, 2, 3, …)。decimal-leading-zero
: 0で始まるアラビア数字(01, 02, 03, …)。lower-roman
: 小文字のローマ数字(i, ii, iii, …)。upper-roman
: 大文字のローマ数字(I, II, III, …)。lower-alpha
: 小文字のアルファベット(a, b, c, …)。upper-alpha
: 大文字のアルファベット(A, B, C, …)。
list-style-type
プロパティの使用法
CSSでリストのスタイルを設定する例を以下に示します:
/* 順序なしリストのマーカーを四角点に変更 */
ul {
list-style-type: square;
}
/* 順序付きリストのマーカーを大文字のローマ数字に変更 */
ol {
list-style-type: upper-roman;
}
リストスタイルのカスタマイズ
list-style-type
プロパティを使うと、リストの見た目を柔軟にカスタマイズできます。ウェブページのデザインに合わせてリストのマーカーを適切に選び、ユーザーに最適な閲覧体験を提供できます。
また、CSSの list-style
ショートハンドプロパティを使用して、list-style-type
、list-style-position
(リストマーカーの位置)、list-style-image
(リストマーカーとして使用する画像)を一度に設定することも可能です。
注意点
- 一部の値は特定のブラウザでサポートされていない可能性があります。特に新しいまたは実験的な値を使用する場合は、ブラウザの互換性を確認する必要があります。
- リストマーカーのスタイルだけを変更すると、デフォルトのインデントやパディングはそのまま残るため、場合によってはリストのパディングやマージンも合わせて調整する必要があります。