CSS | リストマークを変更または削除する方法

2021-12-19CSS リスト,CSS

CSSでul、li要素を使って作成したリストのマーク変更または削除する方法を紹介しています。

リストのマークを変更する

リストのマークを変更する方法です。

変更可能なリストのマークには世界各国で使われている数字表記、文字表記が指定可能なため種類は数多く存在します。
ここでは一般的なものから一部を紹介しています。

See the Pen CSS | Hide the mark in the list by yochans (@yochans) on CodePen.

HTMLには各指定する値をclass名とした基本的なリストのコードを設置しています。

四角系のマークからローマ数字や漢数字、絵文字を使ったリストマークなど様々な表示に対応可能です。

<ul class="value">
	<li>value</li>
	<li>value</li>
	<li>value</li>
</ul>
	
<ul class="dice">
	<li>dice</li>
	<li>dice</li>
	<li>dice</li>
</ul>
	
<ul class="upper-roman">
	<li>upper-roman</li>
	<li>upper-roman</li>
	<li>upper-roman</li>
</ul>
	
<ul class="circle">
	<li>circle</li>
	<li>circle</li>
	<li>circle</li>
</ul>
	
<ul class="square">
	<li>square</li>
	<li>square</li>
	<li>square</li>
</ul>
	
<ul class="arabic-indic">
	<li>decimal</li>
	<li>decimal</li>
	<li>decimal</li>
</ul>
	
<ul class="trad-chinese-informal">
	<li>trad-chinese-informal</li>
	<li>trad-chinese-informal</li>
	<li>trad-chinese-informal</li>
</ul>

<ul class="hiragana">
	<li>hiragana</li>
	<li>hiragana</li>
	<li>hiragana</li>
</ul>
	
<ul class="emoji">
	<li>emoji</li>
	<li>emoji</li>
	<li>emoji</li>
</ul>

リストのマークを削除するには ul 要素に対して、list-style-typeプロパティで目的の値を指定する事で実装可能です。

value としているものは、マークにする文字列をクォーテーションで囲って指定する方法です。

一部の指定値では余白を調節する必要がある場合があります。

ul.value {
	list-style-type: '@';
}

ul.dice {
	list-style-type: dice;
}

ul.upper-roman {
	list-style-type: upper-roman;
}

ul.trad-chinese-informal {
	list-style-type: trad-chinese-informal;
}

ul.circle {
	list-style-type: circle;
}

ul.square {
	list-style-type: square;
}

ul.arabic-indic {
	list-style-type: arabic-indic;
}

ul.hiragana {
	list-style-type: hiragana;
}

ul.emoji {
	list-style-type: "\1F44D";
}

リストのマークを削除する

See the Pen CSS | SAKURA Animation by yochans (@yochans) on CodePen.

HTMLには基本的なリストのコードを設置しています。

<ul>
	<li>PHP</li>
	<li>Python</li>
	<li>CSS</li>
	<li>JavaScript</li>
</ul>

リストのマークを削除するには ul 要素に対して、list-style-typeプロパティで none を指定する事で実装可能です。

none を指定してもマークのスペースは余白として残ります。
これは、liタグに付与されているものではなくulタグに設定されています。
また、margin ではなく padding です。

padding-leftで期待する余白サイズに再設定して調節します。

ul {
	list-style-type: none;
	padding-left: 10px;
}