【CSS】リストマークの装飾デザイン　色のみ変更・アイコン活用・色を交互に変える方法

2016-05-022020-05-04Web制作

見やすい
簡潔に伝えられる
分かりやすい
読み手の印象に残りやすい

メリットが多い箇条書き。

ウェブ上ではガンガン使っていくよう推奨されています。

でも、ちょっとシンプルだな…より印象に残るようにちょっとデザイン性高くしたいな…

という方のために、シンプルなリストのマークを少しアクセントを施してオシャレにする方法のご紹介です。

通常、リストマークの色だけを変更することはできません。color:で変えようとすると文字色も一緒に変わります。
今回は一度リストマークを非表示にしてから、CSSで円を描くことでリストマークっぽく見せてます。

下記のCSSコードをテーマのstyle.cssにコピペするだけで使えますよ。

Contents

1. リストマークの色を変更するCSS
- 1.1. 色あり丸リスト
- 1.2. 白抜き丸リスト
2. リストのマークを変更するCSS
- 2.1. ハートマークのリスト
3. リストマークの色を順番に変更するCSS
- 3.1. 2つごと色が変わるリスト
- 3.2. 3つごと色が変わるリスト
4. リストデザイン　色の変更について

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

色のみ変えたい場合です。

色あり丸リスト

CSS

ul {
	padding: 0 0 0 1em;
}
ul li {
	list-style-type: none;
	padding: .1em .5em;
	position: relative;
} 
ul li:before {
	background-color: #ff9dac;	/* 円の色 */
	border-radius: 50%;
	content: '';
	position: absolute;
	top: .6em;	/* 円の上側位置調整 */
	left: -.5em;	/* 円の左側位置調整 */
	width: 6px;	/* 円の幅 */
	height: 6px;	/* 円の高さ */
}

白抜き丸リスト

CSS

ul {
	padding: 0 0 0 1em;
}
ul li {
	list-style-type: none;
	padding: .1em .5em;
	position: relative;
} 
ul li:before {
	border: 1px solid #ff9dac;	/* 円の線太さ・線のスタイル・色 */
	border-radius: 50%;
	content: '';
	position: absolute;
	top: .55em;	/* 円の上側位置調整 */
	left: -.5em;	/* 円の左側位置調整 */
	width: 5px;	/* 円の幅 */
	height: 5px;	/* 円の高さ */
}

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

リストのマークを丸ではなく他の記号にする場合です。アイコンフォントを使用しています。

ハートマークのリスト

CSS

ul {
	padding: 0 0 0 1em;
}
ul li {
	list-style-type: none;
	padding: .1em .5em;
	position: relative;
} 
ul li:before {
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	color: #ff9dac;	/* アイコンの色 */
	content: "\f004";
	position: absolute;
	top: .3em;	/* アイコンの上側位置調整 */
	left: -.8em;	/* アイコンの左側位置調整 */
}

沢山並ぶと鬱陶しいのでやりすぎ禁物です。

リストマークの色を順番に変更するCSS

色を交互に・3つごとに変更する方法です。

2つごと色が変わるリスト

CSS

ul {
	padding: 0 0 0 1em;
}
ul li {
	list-style-type: none;
	padding: .1em .5em;
	position: relative;
} 
ul li:before {
	font-family: "Font Awesome 5 Free";
	font-weight: 500;
	content: "\f14a";
	position: absolute;
	top: .3em;	/* アイコンの上側位置調整 */
	left: -.8em;	/* アイコンの左側位置調整 */
}
ul li:nth-child(2n+1):before {
	color: #ff9dac;	/* 奇数のアイコンの色 */
}
ul li:nth-child(2n):before {
	color: #9ec1ff;	/* 偶数のアイコンの色 */
}

3つごと色が変わるリスト

CSS

ul {
	padding: 0 0 0 1em;
}
ul li {
	list-style-type: none;
	padding: .1em .5em;
	position: relative;
} 
ul li:before {
	font-family: "Font Awesome 5 Free";
	font-weight: 500;
	content: "\f14a";
	position: absolute;
	top: .3em;	/* アイコンの上側位置調整 */
	left: -.8em;	/* アイコンの左側位置調整 */
}
ul li:nth-child(3n+1):before {
	color: #ff9dac;	/* アイコンの色1 */
}
ul li:nth-child(3n+2):before {
	color: #9ec1ff;	/* アイコンの色2 */
}
ul li:nth-child(3n+3):before {
	color: #ACEFA7;	/* アイコンの色3 */
}