css リストの作り方 list-style-type プロパティ

Posted at 2024-10-15

リストのスタイルを指定

リストの項目の先頭に表示されるマークは"リストマーカー"と言われています。
リストマーカーの指定は"list-style-type"を使います。
リストの作成には

olタグ Ordered List 順序ありのリスト
ulタグ Unordered List 順序なしのリスト
これら2つを使います。

olタグの使い方

index.html

<!DOCTYPE html>
<html lang ="ja">
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href = "style.css">
    </head>

    <body>

        <ol class="decimal">
            <li>リスト</li>
            <li>リスト2</li>
            <li>リスト3</li>
        </ol>
        <ol class="decimal_leading_zero">
            <li>リスト</li>
            <li>リスト2</li>
            <li>リスト3</li>
        </ol>
        <ol class="lower_roman">
            <li>リスト</li>
            <li>リスト2</li>
            <li>リスト3</li>
        </ol>
        <ol class="upper_roman">
            <li>リスト</li>
            <li>リスト2</li>
            <li>リスト3</li>
        </ol>
        <ol class="cjk_ideographic">
            <li>リスト</li>
            <li>リスト2</li>
            <li>リスト3</li>
        </ol>
        <ol class="hiragana">
            <li>リスト</li>
            <li>リスト2</li>
            <li>リスト3</li>
        </ol>
        <ol class="katakana">
            <li>リスト</li>
            <li>リスト2</li>
            <li>リスト3</li>
        </ol>
        <ol class="hiragana_iroha">
            <li>リスト</li>
            <li>リスト2</li>
            <li>リスト3</li>
        </ol>
        <ol class="katakana_iroha">
            <li>リスト</li>
            <li>リスト2</li>
            <li>リスト3</li>
        </ol>
        <ol class="lower_alpha">
            <li>リスト</li>
            <li>リスト2</li>
            <li>リスト3</li>
        </ol>
        <ol class="upper_alpha">
            <li>リスト</li>
            <li>リスト2</li>
            <li>リスト3</li>
        </ol>
        <ol class="lower_greek">
            <li>リスト</li>
            <li>リスト2</li>
            <li>リスト3</li>
        </ol>
        <ol class="hebrew">
            <li>リスト</li>
            <li>リスト2</li>
            <li>リスト3</li>
        </ol>
        <ol class="armenian">
            <li>リスト</li>
            <li>リスト2</li>
            <li>リスト3</li>
        </ol>
        <ol class="georgian">
            <li>リスト</li>
            <li>リスト2</li>
            <li>リスト3</li>
        </ol>


        
    </body>

</html>

style.css


.decimal{
    list-style-type: decimal;
}

.decimal_leading_zero{
    list-style-type: decimal-leading-zero;
}

.lower_roman{
    list-style-type: lower-roman;
}

.upper_roman{
    list-style-type: upper-roman;
}

.cjk_ideographic{
    list-style-type: cjk-decimal;
}

.hiragana{
    list-style-type: hiragana;
}

.katakana{
    list-style-type: katakana;
}

.hiragana_iroha{
    list-style-type: hiragana-iroha;
}

.katakana_iroha{
    list-style-type: katakana-iroha;
}

.lower_alpha{
    list-style-type: lower-alpha;
}

.upper_alpha{
    list-style-position: upper-alpha;
}

.lower_greek{
    list-style-type: lower-greek;
}

.hebrew{
    list-style-type: hebrew;
}

.armenian{
    list-style-type: armenian;
}

.georgian{
    list-style-type: georgian;
}

ulタグの使い方

index.html

<!DOCTYPE html>
<html lang ="ja">
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href = "style.css">
    </head>

    <body>
        <ul>
            <li>リスト1</li>
            <li>リスト2</li>
            <li>リスト3</li>
        </ul>
        <ul class="none">
            <li>リスト1</li>
            <li>リスト2</li>
            <li>リスト3</li>
        </ul>
        <ul class="disc">
            <li>リスト1</li>
            <li>リスト2</li>
            <li>リスト3</li>
        </ul>
        <ul class="circle">
            <li>リスト1</li>
            <li>リスト2</li>
            <li>リスト3</li>
        </ul>
        <ul class="square">
            <li>リスト1</li>
            <li>リスト2</li>
            <li>リスト3</li>
        </ul>
 
    </body>

</html>

style.css

.none{
    list-style-type: none
}

.disc{
    list-style-type: disc;
}

.circle{
    list-style-type: circle
}

.square{
    list-style-type: square;
}

次はリストのポジションについてまとめます。

参考書籍
"1冊ですべて身につくHTML&CSSとWebデザイン入門講座"

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up