TOPページ >  箇条書きにする > 箇条書きの頭の記号に画像を指定する

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

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

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

サンプルソースです。

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

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

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

ランキングに参加中です! お役に立てたらクリックをお願いします→

同一カテゴリ内一覧
箇条書きの頭の記号に画像を指定する
定義語を表示する
箇条書き文章の余白を指定する
箇条書きの開始番号を指定する
箇条書きの番号形式を指定する
箇条書きにする(通し番号あり)
箇条書きの頭の記号を指定する
箇条書きにする(通し番号なし)
IEの方はこちらから当サイト ブックマークできます。
ランキング参加中!お役に立てたら クリックをお願いします。
当サイト掲載カテゴリは
Yahoo! JAPAN コンピュータとインターネット > データ形式 > HTML > リファレンス