【CSS】list-style-type - リストスタイルの種類

CSSのlist-style-typeプロパティについて解説します。

検証環境

CSS

macOS

14.1

list-style-type

list-style-typeは“リストスタイルの種類”のプロパティです。

基本構文

list-style-type: 値;

値

代表的な値は次の通りです。

値	意味
none	様式なし
disc	円形（塗りつぶし）
circle	円形（塗りつぶしなし）
square	四角形（塗りつぶし）
decimal	数字（１から始まる）
upper-roman	大文字ローマ数字（Ⅰから始まる）
lower-roman	小文字ローマ数字（ⅰから始まる）

サンプル

disc

sample.html

<style>
ul {
    ___ih_hl_start
    list-style-type: disc;
    ___ih_hl_end
}
</style>

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>

プレビュー

circle

sample.html

<style>
ul {
    ___ih_hl_start
    list-style-type: circle;
    ___ih_hl_end
}
</style>

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>

プレビュー

square

sample.html

<style>
ul {
    ___ih_hl_start
    list-style-type: square;
    ___ih_hl_end
}
</style>

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>

プレビュー