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

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

はじめに

最後のサンプルのみol要素使ってますが、その他に関しては全てHTMLは下記のように単純なul, li要素を使ってます。

<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>

CSSに関しても大体やっていることは一緒ですが、サンプルコードで記述していない共通のリセットスタイルとしてはlist-style: none;を指定しています。
また、表示位置に関しては大雑把に指定しているので環境によっては残念な見栄えになっている可能性があります。
紹介するコードを使用する場合、特に位置調整については調整を行ってください。

ここでは見栄えをイメージで紹介しており、実際の見栄えは下記で確認できます。

Demo

ライン

ラインのリストアイコン実装イメージ

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

矢印 #1

矢印 #1のリストアイコン実装イメージ

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);
}

矢印 #2

矢印 #2のリストアイコン実装イメージ

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

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;
}

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

オリジナルディスク（円形） #1のリストアイコン実装イメージ

list-style-type: disc;で表示される感じのを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%;
}

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

オリジナルディスク（円形） #2のリストアイコン実装イメージ

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

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%;
}

矢印×ディスク（円形）

矢印×ディスク（円形）のリストアイコン実装イメージ

上で紹介した矢印とディスク（円形）を組み合わせて、よりアイコンっぽい感じにしてみたものです。

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);
}

ダイヤ

ダイヤのリストアイコン実装イメージ

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);
}

チェックマーク

チェックマークのリストアイコン実装イメージ

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);
}

機種依存文字

機種依存文字のリストアイコン実装イメージ

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

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;
}