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

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

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

検証環境

list-style-type

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

基本構文

list-style-type: 値;

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

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

サンプル

disc

<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

<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

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

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