ホームへ

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

2022年07月31日

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

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

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

【方法1】::markerを使う

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

  1. その1
  2. その2
  3. その3
  • その1
  • その2
  • その3
<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」と指定しましょう。

  1. その1
  2. その2
  3. その3
  • その1
  • その2
  • その3
<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としては下記のものが指定できます。

  • color(色)
  • font-family(書体)
  • font-size(大きさ)
  • font-weight(太さ)
  • line-height(行間)
  1. その1
  2. その2
  3. その3
  • その1
  • その2
  • その3
<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を指定します。

  1. その1
  2. その2
  3. その3
  • その1
  • その2
  • その3
<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」が指定されても効きません。

CSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。

↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓

↑「副業してもう少し稼ぎたい!」というかたのために副業の方法も解説しています。

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

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

  1. その1
  2. その2
  3. その3
  • その1
  • その2
  • その3
<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

  • color(色)
  • font-family(書体)
  • font-size(大きさ)
  • font-weight(太さ)
  • line-height(行間)

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

「この記事の内容がよくわからなかった…」「なんかうまくいかなかった…」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。
わからないまま突き進むより基本を学ぶのが結局近道です。

CSSやhtmlをマンガで学ぶ