この記事にはプロモーションが含まれています。

【超簡単！】liタグの点の大きさや色などを変える方法【HTML/CSS】

2024-09-042024-09-12

ケケンタ

liタグの「点」の見た目って変えられないのかな……

今回はこのようなお悩みをお持ちの方へ向けて

liタグの点の大きさや色、フォントなどを変える方法

をご紹介します。

liタグは箇条書きの項目を記述するときに利用するHTMLタグですが、デフォルトで表示される「点」をそのままの見た目で使用することはあまり無いのではないかと思います。（特に実務では）

ケケンタ

liタグの点の見た目を変えたいときは、ぜひこの記事でご紹介する方法をご活用ください！

ちなみにこの記事でご紹介する方法はolタグでも有効です。

この記事でわかること

liタグの点の見た目（大きさ・色など）を調整する方法
liタグの点の大きさを変えたときの注意点と解決方法

ケケンタ

ケケンタのITブログでは、Webアプリ（PHP・Laravel）やWeb制作（WordPress・コーディング）について情報を発信しています。
学習中の方や実務をされている方など多くの方にアクセスいただいていますので、ぜひほかの記事も参考にしてみてください！

運動不足、気になっていませんか？

もしプログラミング学習やお仕事で運動不足が気になっているなら
連続屈伸運動がおすすめです！

ボタンにカーソルを合わせるだけで
カウントダウンが始まるタイマーをご用意してみました！

ケケンタ

無理のない範囲で、ぜひ隙間時間に屈伸運動を取り入れてみて下さい！

タイマースタート

3:00

1分 3分 5分 10分

※運動不足だと連続３分で取り組んでもかなり息が切れます。
（僕は加えて気分もちょっと悪くなりました……）
絶対にご無理の無い範囲でお取り組みください！

【結論】liタグの点の大きさや色、フォントを変える方法

liタグの「点」の大きさなどを調整する際は、疑似要素のひとつ「::marker」を使用します。

疑似要素とは、簡単に言うとCSSだけでHTML要素の記述・styleの指定ができる要素です。

言葉では上手く伝わらないかもしれませんが、liタグにデフォルトで表示される「点」も「::marker」という疑似要素です（「点」自体はHTMLに記述されていないのに、ブラウザには表示されていますね）

（例）liタグの「点」の色・大きさを変える

<style>
li::marker{
    color: green;
    font-size: 2em;
}
</style>
<ul>
    <li>サンプル１</li>
    <li>サンプル２</li>
    <li>サンプル３</li>
</ul>

表示結果

サンプル１
サンプル２
サンプル３

ケケンタ

このように「::marker」にCSSプロパティを指定することで簡単にliタグの点の見た目を調整することが可能です！

上記の例では、点とテキストの位置が水平中央揃えになっていません。
この解決方法については、後述の【注意点①】liタグの点の大きさを変えたときは調整が必要でお伝えします。

::markerに指定できるCSSプロパティ

::markerに指定できるCSSプロパティのは以下の５種類だけです。

::markerに指定できるCSSプロパティ

color（色）
font-size（大きさ）
font-family（書体）　→　olタグの連番のフォント調整に有効
font-weight（太さ）
line-height（行間）

ケケンタ

上記以外のCSSプロパティは指定することができないため注意しましょう！

【注意点①】liタグの点の大きさを変えたときは調整が必要

【結論】liタグの点の大きさや色、フォントを変える方法でご覧いただいたように、liタグの点の大きさを変えた場合、テキストと水平中央揃えではなくなってしまいます。

ケケンタ

以下はその解決方法です。

解決方法

<style>
li > span {
    vertical-align: 0.25em;
}
li::marker {
    color: green;
    font-size: 2em;
}
</style>
<ul>
    <li><span>サンプル１</span></li>
    <li><span>サンプル２</span></li>
    <li><span>サンプル３</span></li>
</ul>

表示結果