リストタグ<li>で記号やアイコンフォントをリストアイコンとして使う

HTMLでリストタグ（<ul><li>）を使うと通常、先頭に小さな黒丸（disc）が表示されます。CSSで「list-style-type」を指定してあげると白丸（circle）や四角（square）などのアイコンにする事もできます。

  • 私は犬が嫌いだ
  • 私は犬も猫も嫌いだ
  • 私は犬も猫も嫌いだが人間の女性はもっと嫌いだ

記号をリストアイコンにする

小丸や小四角では少しもの足りませんので「※」や「●」や「★」など、テキストで入力できる記号をアイコンにしてみます。「:before擬似要素」で記号を指定して配置します。途中で改行されてもアイコンの下にテキストが回り込まないように、アイコンの大きさプラスαの余白ができるように注意します。アイコンに色をつけるといい感じですね。

HTML
<ul class="list">
	<li>リスト1</li>
	<li>リスト2</li>
	<li>リスト3</li>
</ul>

「padding」で余白をとり、記号の幅を設定し、「margin」を使って配置するパターンです。全角の記号は一文字1emなので、記号をアイコンにする場合は単位を「em」にするとぴったり合います。1.5emの場合は記号が1emで余白が0.5emという事になります。「li:before」の部分に「display:inline-block」を入れるのコツです。「width:1.5em」の部分は「padding-right:0.5em」としても同じになります。

  • 私は犬が嫌いだ
  • 私は犬も猫も嫌いだ
  • 私は犬も猫も嫌いだが人間の女性はもっと嫌いだ
    若くてかわいくて胸が大きくふとももがムチムチした女性は特に嫌いだ
CSS
ul.list{list-style-type:none;margin:0;padding:0;}/*リセット*/
ul.list li{margin-bottom:0.5em;line-height:1.6;padding-left:1.5em;}
ul.list li:before{content:"※";display:inline-block;width:1.5em;margin-left:-1.5em;color:#f30}

次は「position」を使って配置するパターンです。上の方法より少しめんどくさいですが、いろいろと応用がききます。ブラウザ依存のリスクも少ないかもしれません。

  • 私は犬が嫌いだ
  • 私は犬も猫も嫌いだ
  • 私は犬も猫も嫌いだが人間の女性はもっと嫌いだ
    若くてかわいくて胸が大きくふとももがムチムチした女性は特に嫌いだ
CSS
ul.list{list-style-type:none;margin:0;padding:0;}/*リセット*/
ul.list li{margin-bottom:0.5em;line-height:1.6;padding-left:1.5em;position:relative;}
ul.list li:before{content:"★";position:absolute;top:0;left:0;color:#fc0}

アイコンフォントをリストアイコンにする

アイコンフォント（Font Awesome）をリストアイコンにしてみます。上記の「position」を使って配置するパターンを応用します。jQueryを使うとちょっと便利です。

  • 私は犬が嫌いだ
  • 私は犬も猫も嫌いだ
  • 私は犬も猫も嫌いだが人間の女性はもっと嫌いだ
    若くてかわいくて胸が大きくふとももがムチムチした女性は特に嫌いだ

「Font Awesome」と「jQuery」を使いますので、手っ取り早くCDNでファイルを読み込みます。

<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css">
</head>
HTML
<ul class="list">
	<li>リスト1</li>
	<li>リスト2</li>
	<li>リスト3</li>
</ul>

jQueryの「prepend」メソッドを使って、リストの先頭にアイコンを挿入します。こうしておけばリストの数が増えてもアイコンが自動的に表示されます。

jQuery
$(function(){
	$('ul.list li').prepend('<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>');
});

「li」と「i」の「line-height」の値を同じにして高さを揃えるといい感じになります。

CSS
ul.list{list-style-type:none;margin:0;padding:0;}/*リセット*/
ul.list li{margin-bottom:0.5em;line-height:1.6;padding-left:1.5em;position:relative;}
ul.list li i{line-height:1.6;position:absolute;top:0;left:0;}

数字のリストアイコン

数字のリストを表示させるときは「<ul>」ではなく「<ol>」を使いますが、デフォルトでは「1.2.3.」という番号が表示されます。「<ul>」のときと同じようにCSSで「list-style-type」を指定すると、ローマ数字や漢数字、アルファベットやひらがななどを表示させる事ができます。

  1. 私は犬が嫌いだ
  2. 私は犬も猫も嫌いだ
  3. 私は犬も猫も嫌いだが人間の女性はもっと嫌いだ

先ほどの記号をリストアイコンにするのと同じ要領で、「list-style-type」では指定できない「①②③」というリストを作ってみます。

  1. 私は犬が嫌いだ
  2. 私は犬も猫も嫌いだ
  3. 私は犬も猫も嫌いだが人間の女性はもっと嫌いだ
    若くてかわいくて胸が大きくふとももがムチムチした女性は特に嫌いだ
HTML
<ol class="list">
	<li>リスト1</li>
	<li>リスト2</li>
	<li>リスト3</li>
</ol>

数字の記号は「:nth-child()」セレクタを使って予め必要な数だけセットしておきます。

CSS
ol.list{list-style-type:none;margin:0;padding:0;}/*リセット*/
ol.list li{margin-bottom:0.5em;line-height:1.6;padding-left:1.5em;position:relative;}
ol.list li:before{content:"";position:absolute;top:0;left:0}
ol.list li:nth-child(1):before{content:"①";}
ol.list li:nth-child(2):before{content:"②";}
ol.list li:nth-child(3):before{content:"③";}

このような方法を使えば、アイコン画像を「background」に指定したり、「float」を使ってアイコン要素を左に回り込ませたり、「<table>」を使ったりとめんどくさい事をせずに比較的簡単にリストアイコンを表示させる事ができます。レスポンシブの表示にも向いているのでおすすめです。

最終更新日：2016/06/01