【CSS/html】liの点や数字の色、大きさを変える方法【::marker】

「ul liの点を大きくしたい！」

「ol liの数字の色を変えたい！」

liの点や数字の色、大きさを変える方法を解説します。

【方法1】::markerを使う

「::marker」はliの点や数字を指定する疑似要素です。これで色や大きさを変えられます。

<style>
::marker{
    color: red;
}
</style>
<ol>
    <li>その1</li>
    <li>その2</li>
    <li>その3</li>
</ol>
<ul>
    <li>その1</li>
    <li>その2</li>
    <li>その3</li>
</ul>

【個別に指定するとき】liに::markerを指定

::markerはliに対して指定します。

数字に指定したいときは「ol li::marker」

点に指定したいときは「ul li::marker」と指定しましょう。

<style>
.example2 ol li::marker{
    color: #53b6ff;
}
.example2 ul li::marker{
    color: #1e9f00;
}
</style>
<div class="example2">
    <ol>
        <li>その1</li>
        <li>その2</li>
        <li>その3</li>
    </ol>
    <ul>
        <li>その1</li>
        <li>その2</li>
        <li>その3</li>
    </ul>
</div>

::markerに指定できるCSS

::markerに指定できるCSSは限られており、よく使うCSSとしては下記のものが指定できます。

<style>
::marker{
    color: #ff8900;
    font-family: "游明朝";
    font-size: 200%;
    font-weight: bold;
    line-height: 1;
}
</style>
<ol>
    <li>その1</li>
    <li>その2</li>
    <li>その3</li>
</ol>
<ul>
    <li>その1</li>
    <li>その2</li>
    <li>その3</li>
</ul>

逆に言えば他のCSSは指定できません。他のCSSを指定したいときは::beforeで点を作るなど工夫しましょう。

点の縦位置を調整する

数字や点のサイズを変えると、そのあとの文字と縦位置がずれてしまいます。

これを調整するにはli内のテキストをspanで囲い、そのspanにvertical-alignを指定します。

<style>
li>span{
    /*コレ*/vertical-align: 0.25em;
}
li::marker{
    font-family: "游明朝";
    font-size: 200%;
    font-weight: bold;
    line-height: 1;
    color: #ff8900;
}
</style>
<ol>
    <li><span>その1</span></li>
    <li><span>その2</span></li>
    <li><span>その3</span></li>
</ol>
<ul>
    <li><span>その1</span></li>
    <li><span>その2</span></li>
    <li><span>その3</span></li>
</ul>

vertical-alignは要素の縦位置を調整するCSSです。

ただし、::markerやliに指定しても効きません。

テキストをspanで囲い、それを調整する必要があります。

もっと近づけたい、離したいなど、点の位置調整については下記をご覧ください。

【注意】liがdisplay:blockになっていると効かない

::markerは「display:list-item」の要素に対して機能します。

liに「display:block」が指定されると点や数字が消えて機能しなくなります。

もちろん「list-style:none」が指定されても効きません。

【方法2】テキストをspanで囲う

liにCSSを指定して点や数字を調整したあと、spanで囲われたテキストを再調整します。

<style>
li{
    color: red;
}
li>span{
    color: #333;
}
</style>
<ol>
    <li><span>その1</span></li>
    <li><span>その2</span></li>
    <li><span>その3</span></li>
</ol>
<ul>
    <li><span>その1</span></li>
    <li><span>その2</span></li>
    <li><span>その3</span></li>
</ul>

2度指定することになり無駄が多い方法ですので、::markerの方法ではうまくいかないときに使ってみましょう。

【まとめ】liの点や数字の色、大きさを変える方法

::markerを使う

※::markerはliに対して指定する

::markerに指定できるCSS

以上、liの点や数字の色、大きさを変える方法でした。