HTML - リストのマークを任意の文字(印)にする方法

ulタグやolタグのリストマークは変更することができます。

ここでは、リストのマークを任意の文字(マーク)にする方法を紹介します。

サンプル(リストのマークを「★」にする)

下のサンプルリストは、マークを「★」に変更してます。

  • リスト項目1
  • リスト項目2
  • リスト項目3
  • リスト項目4
  • リスト項目5

HTML

サンプルリストのHTMLコードは次の通りです。


<ul>
	<li>リスト項目1</li>
	<li>リスト項目2</li>
	<li>リスト項目3</li>
	<li>リスト項目4</li>
	<li>リスト項目5</li>
</ul>

CSS

リストのマークを変更するCSSは次のようになります。


/* デフォルトマークをなしにする */
ul {
	list-style-type: none;
}
/* 任意のマーク */
li::before {
	content: "★ " ;
}

説明

まず、「list-style-type」プロパティに「none」を指定することで デフォルトのマークをなしにします。

次に疑似要素「li::before」を使って、要素テキストの直前に追加される内容を指定します。

指定内容は「content」プロパティで指定します。

★の後にスペースを入れることで、間隔をとって見やすくしています。

スポンサードサーチ

シェアする

  • このエントリーをはてなブックマークに追加

フォローする