CSSでリストの先頭を画像にする方法


今回は、リストに独自アイコンを使う方法を紹介します。
通常、ulやolを使ったリストはこのようになりますね、

  • リスト
  • リスト
  • リスト

やっぱりデザイン的にもっとおしゃれにしたいってことありませんか。
今回は、リストのマークをカスタマイズするのに知っておきたい2つの方法を紹介します。

リストのマークにオリジナルの画像を使う

リストマークにオリジナルの画像を使ってみましょう。
リストのマークにアイコンを使いたいことってありますよね。
sample
初心者の人がやりがちなんですが、普通に画像を置いてその横にテキストを配置するという方法を取る人もいると思います。
ですが、この方法だと使い回しができないですよね。
毎回画像とテキストを並べないといけないし、リストマークを変更するときにすべての画像を変更する必要があって運用上良くないですね。
なので、すべてスタイルシートで制御できるように工夫してみましょう。
オリジナルの画像を使うには、アイコンを背景画像にする方法と、疑似要素:beforeを使う2つの方法があります。

背景画像を使ったリスト

See the Pen
アイコンを使ったリスト
by Yoshimune (@hachidaime)
on CodePen.

  • 背景画像としてアイコンを左上に配置する
  • サイズや位置を調整する
  • テキストをpadding-leftでずらす

ってことをやってます。
難しいことはしていないと思うので、CSSコードを読んでみて理解してください。

疑似要素を使ったリスト

同じことを疑似要素を使ってやってみましょう。

See the Pen
アイコンを使ったリスト2
by Yoshimune (@hachidaime)
on CodePen.

  • 疑似要素を使って先頭にアイコン画像を配置
  • アイコン画像のサイズや位置を調整
  • テキストとの間隔をmargin-rightで設定

こちらの方が背景を使った場合より少し複雑ですね。
考え方としては画像+テキストを並べているので、
初心者がやりがちなimgタグ+テキストとよく似ています。
CSSで制御するために疑似要素を使っているだけで、CSSで画像を差し込んでいるイメージですね。

2つの方法を紹介しましたが、
どちらがおすすめかというと背景画像として設定する方が簡単で便利です。
アイコンの上に番号を乗せたいときもあるでしょう。
背景画像だったら、そういったことも可能です。

アイコンリストに数字を入れてみよう

先ほど紹介したリストのうち、背景を使ったリストのパターンでは、
画像の上にテキストを重ねることで、数字付きアイコンリストにすることができます

See the Pen
アイコンを使ったリスト(数字付き)
by Yoshimune (@hachidaime)
on CodePen.


やっていることは

  • リストの先頭に数字を入れる。※CSS指定のためspanタグで括ってます
  • span要素をアイコンと同じサイズにして中央配置

見栄えのためにcolorとかfont-sizeとかもろもろ余分に書いていますが、
ポイントとなるのは上のような感じです。

さて、いかがでしたでしょうか。
CSSで実装しているので、これでアイコンリストも使い回しがしやすくなりましたね。
知らなかった人はぜひ参考にして活用してください。