みずー工房

気ままライフを綴るブログです

トップ > ブログ開発記 > 【CSS】自作マーカーリストを作る(画像編)

【CSS】自作マーカーリストを作る(画像編)

ブログ開発記
  • ”HTMLでリストを使おう！” では、リストを作ってみました。
  • その時に紹介した方法だと、左側のマーカーのデザインは数が少なく限定的でした。


  • CSSを使えば、こんな感じに華やかな(？)リストを生成することができます。
  • 画像を使ったリストの作成方法です。
f:id:exe_3Z1K:20210114210503p:plain


参考
リスト（箇条書き）のアイコンを画像にする | GRAYCODE HTML&CSS


画像を使ったリストは、CSSで割と簡単に作ることができます。
FontAwesomeのようなWebフォントを使った方法は、次回紹介しようと思います。


画像を使ったリストの作り方

まずは、普通のリストを用意します。
この前の ”HTMLでリストを使おう！” の記事で紹介したリストを使ってみます。

HTML 
<p>カレーの材料</p>
<ul style="padding-left:2em;">
  <li>にんじん</li>
  <li>じゃがいも</li>
  <li>たまねぎ</li>
  <li>肉</li>
  <li>カレー粉</li>
</ul>
Result

カレーの材料

  • にんじん
  • じゃがいも
  • たまねぎ
  • 肉
  • カレー粉


list-style-image を使う

今回使う画像は、このランタンにしてみます。
使いたい画像は各自、フォトライフなどにアップロードしてURLをコピー しましょう。

f:id:exe_3Z1K:20200815215519p:plain


CSSを書いていきます。クラスを「sample1」と定義して、その中に書いていきましょう。
”list-style-image” に使いたい画像のURLを指定することで、リストの先頭がその画像になります。
 urlの中はダブルクオーテーション(")が必要なので、注意してくださいね。


CSS 
.sample1 {
  list-style-position: inside;
  list-style-image: url("https://cdn-ak.f.st-hatena.com/images/fotolife/e/xxxxxxxxxxxxx.png");
  padding-left:2em;
}
HTML 
<p>カレーの材料</p>
<ul class="sample1">
  <li>にんじん</li>
  <li>じゃがいも</li>
  <li>たまねぎ</li>
  <li>肉</li>
  <li>カレー粉</li>
</ul>
Result

カレーの材料

  • にんじん
  • じゃがいも
  • たまねぎ
  • 肉
  • カレー粉


おや？画像が少し大きく表示されてしまっています。
この方法は簡単に指定できますが、画像サイズと文字サイズが同じ場合に利用できます。
次は画像サイズの調整ができる方法を紹介します。


擬似要素(::before)を使う

CSSはもともとデザインを行うためのものですが、
擬似要素は、CSS上でもあたかもそこにHTMLで記述されているかのように要素を付与できる ものです。
今回使う”::before”は、HTML要素の前に要素を付与できるものです。


言葉だけだとわかりにくいので、実際に例を示してみます。
”.sample2 li::before”と書かれた部分が、リストの前に画像に配置するための記述 になります。

CSS 
.sample2 {
  list-style: none;
}

.sample2 li::before {
  content: "";
  background-repeat: no-repeat;
  height: 24px;
  width: 24px;
  background-size: contain;
  display: inline-block;
  vertical-align: middle;
  margin-right: 3px;
  background-image: url("https://cdn-ak.f.st-hatena.com/images/fotolife/e/xxxxxxxxxxxxx.png");
}
HTML 
<p>カレーの材料</p>
<ul class="sample2">
  <li>にんじん</li>
  <li>じゃがいも</li>
  <li>たまねぎ</li>
  <li>肉</li>
  <li>カレー粉</li>
</ul>
Result

カレーの材料

  • にんじん
  • じゃがいも
  • たまねぎ
  • 肉
  • カレー粉


”::before”の中身の詳しい説明は省略しますけれど、このままコピーして利用すれば大丈夫です。
画像のURLは ”background-image” に記述し、
画像の大きさを変えたければ、”width” と ”height” を変更しましょう。



おわりに

最後のは少し複雑ですけど、画像のサイズを最初から調整しておけば、
前半の方を利用することができるので非常に簡単に画像をリストに使うことができますよ！


おすすめ記事