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

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

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

リストマークにオリジナルの画像を使ってみましょう。
リストのマークにアイコンを使いたいことってありますよね。

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

背景画像を使ったリスト

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

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

疑似要素を使ったリスト

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

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

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

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

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

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

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

やっていることは

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

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

0

-

0