2017.05.29

疑似要素を使ってリストアイコンをつけてみよう！

こんにちは！Maromaroの阿川です。少し体調を崩しておりましたが復帰しました！
数日入院したのですが健康であることが素晴らしいと感じる体験でした…

さて今回のお話はアイコンのつけ方です。
コーディングをしていると、箇条書きのデザインがでてくることはありませんか？
リストの要素であればデフォルトでアイコンが付きますが、もう少しオシャレに画像アイコンを使いたいと思うことも多いはず…！
そこで私が実践している簡単な実装方法をご紹介したいと思います。

:before疑似要素を使う

:before疑似要素とは、簡単に言えば要素の直前に文字などを挿入できる要素です。CSS上で要素を追加したいセレクタの後ろに記載します。
list-style-imageを使用してもいいのですが、疑似要素を使用したほうが位置の調整がしやすいと思います。
「content:””;」のプロパティの間に文字を入れれば、それがそのまま表示されます。

RESULT
HTML
CSS

- テキストテキストテキストテキスト
- テキストテキストテキストテキスト
- テキストテキストテキストテキスト

コピー


<div id="list01">
<ul>
<li>テキストテキストテキストテキスト</li>
<li>テキストテキストテキストテキスト</li>
<li>テキストテキストテキストテキスト</li>
</ul>
</div>

コピー


#list01 ul li:before {
content: "◆"
}
/* ↓記載不要です↓ */
.post_entry_content ul {
  padding-left: 0;
}
.post_entry_content ul li {
  list-style: none;
}

コピー

これは文字の場合ですが、画像も入れることができます。

私はよく:before疑似要素の背景画像としてアイコンを追加しています。背景画像にすることで位置やサイズ調整がしやすくなります。
見本は以下の通りです。

RESULT
HTML
CSS

- テキストテキストテキストテキスト
- テキストテキストテキストテキスト
- テキストテキストテキストテキスト

コピー


<div id="list02">
<ul>
<li>テキストテキストテキストテキスト</li>
<li>テキストテキストテキストテキスト</li>
<li>テキストテキストテキストテキスト</li>
</ul>
</div>

コピー


#list02 ul li:before {
content:"";
background: url(https://blog.maromaro.co.jp/wp-content/uploads/blog_icon01.png) no-repeat;
display: inline-block;
width: 16px;
height: 16px;
vertical-align: middle;
margin: 0 10px 3px 0;
}
/* ↓記載不要です↓ */
.post_entry_content ul {
  padding-left: 0;
}
.post_entry_content ul li {
  list-style: none;
}

コピー

liタグやpタグそのものの背景画像としてアイコンを入れる方法もありますが、CSS3でないと複数の背景を使用できません。
背景画像とアイコン画像を、背景として同時に使いたい場合、:before疑似要素で別途設定する方法をつかっています。

:after疑似要素で文字の後ろにアイコンつける

:before疑似要素と似ている:after疑似要素を使えば文字の後ろにアイコンを置くこともできます。
記述の仕方は:before疑似要素とほぼ同じです。ここではmarginだけ調整しています。

RESULT
HTML
CSS

- テキストテキストテキストテキスト
- テキストテキストテキストテキスト
- テキストテキストテキストテキスト

コピー


<div id="list03">
<ul>
<li>テキストテキストテキストテキスト</li>
<li>テキストテキストテキストテキスト</li>
<li>テキストテキストテキストテキスト</li>
</ul>
</div>

コピー


#list03 ul li:after {
content: "";
background: url(https://blog.maromaro.co.jp/wp-content/uploads/blog_icon01.png) no-repeat;
display: inline-block;
width: 16px;
height: 16px;
vertical-align: middle;
margin: 0 0 3px 10px;
}
/* ↓記載不要です↓ */
.post_entry_content ul {
  padding-left: 0;
}
.post_entry_content ul li {
  list-style: none;
}

コピー

応用編：右端に追従するアイコンをつけてみよう！

文字の右につけたアイコンをレスポンシブで動かしたい場合は、親要素に「position: relative」、:after疑似要素に「position: absolute」の指定をすれば好きな位置にアイコンを持ってくることができます。
よくあるレイアウトで、右側よりの上下中央でアイコンを設定した例が下記になります。

RESULT
HTML
CSS

- テキストテキストテキストテキスト
- テキストテキストテキストテキスト
- テキストテキストテキストテキスト

コピー


<div id="list04">
<ul>
<li>テキストテキストテキストテキスト</li>
<li>テキストテキストテキストテキスト</li>
<li>テキストテキストテキストテキスト</li>
</ul>
</div>

コピー


#list04 ul li {
  position: relative;
}
#list04 ul li:after {
content: "";
background: url(https://blog.maromaro.co.jp/wp-content/uploads/blog_icon01.png) no-repeat;
display: inline-block;
width: 16px;
height: 16px;
position: absolute;
top: 0;
bottom: 0;
right: 10px;
margin: auto 0;
}
/* ↓記載不要です↓ */
.post_entry_content ul {
  padding-left: 0;
}
.post_entry_content ul li {
  list-style: none;
}