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;を指定しているので、英文字の大文字が表示されます。