ケケンタliタグの「点」の見た目って変えられないのかな……
今回はこのようなお悩みをお持ちの方へ向けて
liタグの点の大きさや色、フォントなどを変える方法
をご紹介します。
liタグは箇条書きの項目を記述するときに利用するHTMLタグですが、デフォルトで表示される「点」をそのままの見た目で使用することはあまり無いのではないかと思います。（特に実務では）
ケケンタliタグの点の見た目を変えたいときは、ぜひこの記事でご紹介する方法をご活用ください！
- liタグの点の見た目（大きさ・色など）を調整する方法
- liタグの点の大きさを変えたときの注意点と解決方法
————
WordPressのスキルを伸ばしたい方におすすめの書籍
脱！WordPress初心者のための一冊
WordPressカスタマイズの基礎
体系的に基本スキルを習得！
上級者を目指すための一冊
Web技術への理解を深め、Webアプリ開発者を目指したい方へ
【結論】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タグの点の見た目を調整することが可能です！
::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>表示結果
- サンプル１
- サンプル２
- サンプル３
ポイントは、ハイライト行です。
具体的におこなっていることは以下の２つです。
- liタグ内のテキストをspanタグで囲う
- liタグ内のspanタグへ「vertical-align」を指定 → 高さ調整する
vertical-alignは要素の縦位置を調整するCSSです。
ケケンタ細かな数値は、実際に調整する中で決めていく必要がありますが、vertical-alignを使用することで「点」と「テキスト」を水平中央揃えに戻すことが可能です。
【注意点②】liがdisplay:blockになっているときは使用できない
liタグの「点」=疑似要素::markerは、liタグがdisplay:list-itemになっているからこそ表示される要素です。
そのため、liタグにdisplay:blockなどの指定をしてしまうと、::markerが消えてしまうため、先ほどご紹介した方法は使用することができません。
まとめ
以上がliタグの点の大きさや色、フォントなどを変える方法でした。
ケケンタ最後に記事の内容をまとめます！
- liタグの点の見た目を変えたいときは「::marker」疑似要素にCSSプロパティを指定する
- 「::marker」に指定できるCSSプロパティは全部で５種類のみ（それ以外は指定不可）
- liタグの「点」の大きさを変えたら高さ調整が必要
- 「::marker」が適用されるのは「display:list-style」の要素のみ
liタグの「点」の見た目調整を行う機会は多いかと思いますが、
この記事でご説明した、「::marker」にCSSプロパティを指定すればいいということだけ覚えておけば、調整は簡単にできます。
ケケンタそれでは、最後までご覧いただきありがとうございました！
このブログではWeb制作やWordPress、PHPに関する情報を発信しています。
ご興味のある方はほかの記事もご覧いただけるとうれしいです！
コメント