【HTML・CSS】ulタグのリストでli(箇条書き)の先頭の記号(点)を好きな記号に変更する

HTML&CSS
スポンサーリンク

はじめに

HTMLのulタグで箇条書きのリストを作ったとき、li要素の先頭にはデフォルトで点(・)の記号が表示されます。

この記事では、デフォルトの点の記号を好きな記号や文字に変更する方法を紹介します。

CSSでulリストにlist-styleを設定する

li要素の先頭に表示される記号を変更するには、CSSの”list-style”プロパティを使用します。

ulタグにCSSのクラスを設定し、設定したクラスの中で”list-style”を指定すると、ulタグの子要素のliタグの記号が変更できます。

次の例は list-style: “+”; を設定することで、デフォルトの点(・)の記号を”+”に変更しています。

See the Pen
ulタグのリストでli(箇条書き)の先頭の記号(点)を好きな記号に変更する
by aiiro (@aiiro29)
on CodePen.

記号(・)を表示しないよう(非表示)にする

また、記号を表示したくない場合は list-style: none; を設定します。

See the Pen
yLOedKa
by aiiro (@aiiro29)
on CodePen.