画像を使わずに、CSSのみでリストアイコンを表現したサンプル 10

Posted on February 13th, 2015
In: Tips

なんとなくどんな感じのものが実装できるか試してみたので備忘録。いずれもli要素と組み合わせて使えそうなリストアイコンのサンプルで、画像は使用せずに全てCSSのみで実装してみたものです。使用できるブラウザは限られてきますが、問題ないブラウザであればサイズやカラー変更といったこともCSSのみで簡単に変更できます。最近はWebフォント使ったりSVG使ったりすれば使い勝手良いものが実装できますけど、それすらも面倒な場合に…。

はじめに

最後のサンプルのみol要素使ってますが、その他に関しては全てHTMLは下記のように単純なulとli要素を使ってます。
また、CSSに関しても大体やっていることは一緒ですが、紹介ソースで記述していない共通のリセットスタイルとしてはlist-style: none;を指定しています。

HTML

<ul>
	<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
	<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
	<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.<br />Rem quasi explicabo consequatur consectetur, a atque voluptate officiis eligendi nostrum.</li>
</ul>

それぞれの実際の表示は下記で確認できます。

DEMO

※以下で紹介する方法はブラウザによっては表示確認ができないので、ChromeやFirefox、IEであれば最新バージョンで確認して下さい。

※表示位置に関しては大雑把に指定しているので、環境によっては残念な見栄えになっています…。
もし、紹介しているものを使用する際は表示位置を使用状況に合わせて調整してください。（使い勝手良い指定方法あったら是非教えてください）

画像を使わずに、CSSのみでリストアイコンを表現したサンプル 10 目次

1. ライン

CSS

ul li {
	position: relative;
}
ul li::after {
	display: block;
	content: '';
	position: absolute;
	top: .65em;
	left: -1em;
	width: 8px;
	height: 1px;
	background-color: #666;
}

目次へ

2. 矢印 #1

CSS

ul li {
	position: relative;
}
ul li::after {
	display: block;
	content: '';
	position: absolute;
	top: .5em;
	left: -1em;
	width: 6px;
	height: 6px;
	border-right: 1px solid #666;
	border-bottom: 1px solid #666;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

目次へ

3. 矢印 #2

先ほどの矢印に::beforeで表現したラインを組み合わせて別のタイプの矢印アイコンに見せるものです。

CSS

ul li {
	position: relative;
}
ul li::after,
ul li::before {
	display: block;
	content: '';
	position: absolute;
}
ul li::after {
	top: 9px;
	left: -1em;
	width: 6px;
	height: 6px;
	border-right: 1px solid #666;
	border-bottom: 1px solid #666;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}
ul li::before {
	top: 12px;
	left: -1.025em;
	width: 8px;
	height: 1px;
	background-color: #666;
}

目次へ

4. オリジナルディスク（円形） #1

list-style-type: disc;で表示される感じのをCSSで表現したもの。
この方法であればブラウザ毎に若干違いがあったりするようなものも統一させることができ、自由にサイズやカラー変更も可能です。

CSS

ul li {
	position: relative;
}
ul li::after {
	display: block;
	content: '';
	position: absolute;
	top: .5em;
	left: -1em;
	width: 6px;
	height: 6px;
	background-color: #666;
	border-radius: 100%;
}

目次へ

5. オリジナルディスク（円形） #2

こちらはlist-style-type: circle;で表示される感じのをCSSで表現したもの。
同じく自由にサイズやカラー変更も可能で、今回のサンプルでは行っていませんがbox-shadowなどのプロパティも使って立体的な感じに見せるのも良いかと思います。

CSS

ul li {
	position: relative;
}
ul li::after {
	display: block;
	content: '';
	position: absolute;
	top: .5em;
	left: -1em;
	width: 5px;
	height: 5px;
	background-color: #fff;
	border: 1px solid #3498db;
	border-radius: 100%;
}

目次へ

6. 矢印×ディスク（円形）

「2. 矢印 #1」と「4. オリジナルディスク（円形） #1」を組み合わせて、よりアイコンっぽい感じにしてみたもの。

CSS

ul li {
	position: relative;
}
ul li::after,
ul li::before {
	display: block;
	content: '';
	position: absolute;
}
ul li::after {
	top: .35em;
	left: -1.2em;
	width: 14px;
	height: 14px;
	background-color: #3498db;
	border-radius: 100%;
}
ul li::before {
	z-index: 2;
	top: .625em;
	left: -.975em;
	width: 4px;
	height: 4px;
	border-right: 1px solid #fff;
	border-bottom: 1px solid #fff;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

目次へ

7. ダイヤ

CSS

ul li {
	position: relative;
}
ul li::after {
	display: block;
	content: '';
	position: absolute;
	top: .5em;
	left: -1em;
	width: 6px;
	height: 6px;
	background-color: #3498db;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

目次へ

8. チェックマーク

CSS

ul li {
	position: relative;
}
ul li::after {
	display: block;
	content: '';
	position: absolute;
	top: .5em;
	left: -1em;
	width: 8px;
	height: 3px;
	border-left: 2px solid #3498db;
	border-bottom: 2px solid #3498db;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

目次へ

9. 機種依存文字

こちらはこれまでのものとは少し違って、機種依存文字をアイコン代わりに表示させてみたものです。
文字なのでこれまでと同様、カラーやサイズ変更は容易にできます。

CSS

ul li {
	position: relative;
}
ul li::after {
	display: block;
	position: absolute;
	top: .4em;
	left: -1.2em;
	font-size: 12px;
	line-height: 1;
}
ul li:nth-of-type(1)::after {
	content: '\002713';
	color: #3498db;
}
ul li:nth-of-type(2)::after {
	content: '\00266b';
	color: #e67e22;
}
ul li:nth-of-type(3)::after {
	content: '\002665';
	color: #e74c3c;
}
ul li:nth-of-type(4)::after {
	content: '\00272a';
	color: #f1c40f;
}
ul li:nth-of-type(5)::after {
	content: '\002731';
	color: #9b59b6;
}

目次へ

10. ランキング風

counter-incrementプロパティを使って、簡単にランキング風のリストを作る方法です。
今回のサンプルではただ文字列を出しているだけですが、::beforeでは単純に数字だけ出力して、そこに「5. オリジナルディスク（円形） #2」で紹介したディスクを::afterで実装して組み合わせたり、Webフォントを使って表示した王冠やトロフィーなどと組み合わせて使ったりするのも良いと思います。

CSS

ol li {
	position: relative;
	padding-left: 3.5em;
	counter-increment: li;
}
ol li::before {
	content: 'Rank ' counter(li) ' -';
	display: block;
	position: absolute;
	top: .3em;
	left: -1em;
	color: #666;
	font-size: 14px;
	line-height: 1;
	font-weight: bold;
}
ol li:nth-of-type(1)::before {
	color: #e4aa1d;
}
ol li:nth-of-type(2)::before {
	color: #9eaeb9;
}
ol li:nth-of-type(3)::before {
	color: #b76901;
}

目次へ