ケケンタ

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

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

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

をご紹介します。

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

ケケンタ

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

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

あわせて読みたい

PHPやWordPressを学ぶのにおすすめのプログラミングスクール【７選】 僕はこれまで独学でPHPを学習してきました。結論から言えば、それでもPHPを習得することはできました。 しかし、それに費やした累計学習期間は1年ほど。モチベーション…

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

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

（例）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プロパティのは以下の５種類だけです。

ケケンタ

上記以外の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>

表示結果

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

ケケンタ

細かな数値は、実際に調整する中で決めていく必要がありますが、vertical-alignを使用することで「点」と「テキスト」を水平中央揃えに戻すことが可能です。

【注意点②】liがdisplay:blockになっているときは使用できない

liタグの「点」=疑似要素::markerは、liタグがdisplay:list-itemになっているからこそ表示される要素です。

そのため、liタグにdisplay:blockなどの指定をしてしまうと、::markerが消えてしまうため、先ほどご紹介した方法は使用することができません。

「list-style:none」を指定した場合も同様です。

まとめ

以上がliタグの点の大きさや色、フォントなどを変える方法でした。

ケケンタ

最後に記事の内容をまとめます！

liタグの「点」の見た目調整を行う機会は多いかと思いますが、

この記事でご説明した、「::marker」にCSSプロパティを指定すればいいということだけ覚えておけば、調整は簡単にできます。

ケケンタ

それでは、最後までご覧いただきありがとうございました！

このブログではWeb制作やWordPress、PHPに関する情報を発信しています。

ご興味のある方はほかの記事もご覧いただけるとうれしいです！

もっと効率的にWeb制作を学びたい方へ

Web制作の学習は楽しいものですが、一人で進めていると「これで合っているのかな？」と不安になることもありますよね。

僕も独学でWeb制作を学んできましたが、今思うと「もっと早く知りたかった」と思うことがたくさんあります。

特に以下のような方は、一度プログラミングスクールの利用を検討してみることをおすすめします。

• 学習の方向性に迷いがある方
• 効率的にスキルを身につけたい方
• 転職や副業でWeb制作を活用したい方
• 挫折経験がある方

忍者CODEなら、業界最安値で24時間サポート付きの学習環境が整っています。

ご興味のある方は、こちらの記事で詳しくご紹介しています。

あわせて読みたい

忍者CODEでWeb制作を学ぶべき理由【業界最安値で挫折しない学習環境】 Web制作を学びたいけど、プログラミングスクールは高すぎるし、独学だと挫折しそうで不安…… このような悩みをお持ちの方に向けて、この記事では 業界最安値でWeb制作を...