リストのスタイルに関するプロパティ

6.6 リストのスタイルに関するプロパティ

リストとは、複数の項目を列挙したものです。list-style-typeプロパティは、そのリストの先頭に表示される記号の種類を定義するプロパティです。list-style-typeプロパティに設定できる値には、disc、circle、square、noneなどがあります。このプロパティはli要素などに適用できます。

list-style-typeプロパティの代表的な値には、以下のようなものがあります。

値	値の内容
disc	黒丸（デフォルト）
circle	白丸
square	四角
decimal	算用数字
decimal-leading-zero	先頭に0をつけた算用
lower-roman	ローマ数字の小文字
upper-roman	ローマ数字の大文字
lower-alpha または lower-latin	英文字の小文字
upper-alpha または upper-latin	英文字の大文字

表 6.6.1 : list-style-typeプロパティの値

スタイルを記述して実際の表示を確認しましょう。

①ソースフォルダ　　　　：webpage/ch06
②ファイル名　　　　　　：liststyle.html

➢ liststyle.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>list-style-type プロパティ</title>
<style>
    ul.square {
    list-style-type: square;
    }
    ol.upper {
    list-style-type: upper-alpha;
    }
</style>
</head>
<body>
<ul>
<li>リスト項目A</li>
<li>リスト項目B</li>
</ul>
<ul class="square">
<li>リスト項目A</li>
<li>リスト項目B</li>
</ul>
<ol>
<li>リスト項目1</li>
<li>リスト項目2</li>
</ol>
<ol class="upper">
<li>リスト項目1</li>
<li>リスト項目2</li>
</ol>
</body>
</html>