箇条書きの頭の記号に画像を指定する

ホームページやブログなどのウェブサイトで 一覧などを箇条書きにする際には ULやDIRおよびMENUタグといったHTMLタグを使用し、頭に記号や数字などが付加されますが、このとき style指定で記号や数字の変わりに画像を指定することができます。

<タグ名 style="list-style-image:url(画像のURL)">
  • タグ名：ul や menuおよびdir といったブロックタグで指定するとそのブロック文章全体を対象に、li タグで指定すると個別に設定できます。
    画像のURL：リスト項目の頭に付加する画像のURLを、絶対パスまたは相対パスで指定します。

サンプルソースです。

<ul style="list-style-image:url(http://dcml.jp/mobile/emoji/f8ea.gif)">
<li>おはようございます。
<li>こんにちは。
<li>こんばんは。
<li>さようなら。
<li>おやすみなさい。
</ul>

このソースでは、赤字部分で頭の記号に画像を指定し、青字部分でその画像のURLを記述しています。このソースを表示すると次のようになります。

  • おはようございます。
  • こんにちは。
  • こんばんは。
  • さようなら。
  • おやすみなさい。