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

# リストのスタイルを指定
リストの項目の先頭に表示されるマークは"リストマーカー"と言われています。
リストマーカーの指定は"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;
}

```
![スクリーンショット (1322).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3909197/0c2b26d4-7d8c-d9fa-84c9-1ba93ead3068.png)


## 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;
}



```

![スクリーンショット (1323).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3909197/b604ce13-70da-b8f8-b8bf-ff0f1594b623.png)



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














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