リストのスタイルに関するプロパティ
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>
1つ目のul要素にはスタイルを指定していないため、ul要素の初期値のlist-style-type: disc;が適用され、黒丸が表示されます。2つ目のul要素にはlist-style-type: square;を指定しているので、四角が表示されます。
ulの変わりにolを使うと、先頭に番号がつきます。この番号は<li>が増えると自動的に「1,2,3」と割り振られていきます。
1つ目のol要素にはスタイルを指定していないため、ol要素の初期値のlist-style-type: decimail;が適用され、算用数字が表示されます。2つ目のol要素にはlist-style-type: upper-alpha;を指定しているので、英文字の大文字が表示されます。
