マークに画像を使用する際の別の方法

マークに画像を使用する場合は、"list-style-image"プロパティで指定が出来ますが、このプロパティを使った場合は画像の位置を細かく制御できないため、通常はリストの各項目に背景画像として画像を指定する方法を使います。

※背景画像の設定に関する詳細は『背景プロパティ』を参照して下さい。

手順は下記のようになります。

まずリストのマークを表示しないようにするため、<ul>タグの"list-style-type"プロパティに"none"を指定します。 

ul{
list-style-type:none;
}

次にリストの項目の背景画像を設定します。"background-image"プロパティで使いたい画像を、"background-position"プロパティで画像の位置を微調整します。また画像は1度切りの表示なので"background-repeat"プロパティには"no-repeat"を指定します。 

ul{
list-style-type:none;
}

li{
background-image:url("../img/pochi.png");
background-repeat:no-repeat;
background-position:0px 4px;
}

このままですとリストの項目に表示されるテキストと画像が重なってしまうので、リストの項目を左にずらすため"padding-left"プロパティに画像の大きさに合わせた値を設定します。 

ul{
list-style-type:none;
}

li{
padding-left:16px;
background-image:url("../img/pochi.png");
background-repeat:no-repeat;
background-position:0px 4px;
}

以上のような感じとなります。

では実際に試してみます。

sample5.html 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html lang="ja">
<head>
<meta http-equiv="Content-Type" Content="text/html;charset=UTF-8">

<title>スタイルシートサンプル</title>

<link rel="stylesheet" href="./css/sample5.css" type="text/css">

</head>
<body>

<ul>
<li class="sample1">項目1です</li>
<li class="sample2">項目2です</li>
<li class="sample3">項目3です</li>
</ul>

</body>
</html>

sample5.css 

@charset "Shift_Jis";

ul{
list-style-type:none;
line-height:1.3em;
}

li.sample1{
padding-left:18px;
background-image:url("../img/pochi.png");
background-repeat:no-repeat;
background-position:0px 0px;
}

li.sample2{
padding-left:18px;
background-image:url("../img/pochi.png");
background-repeat:no-repeat;
background-position:0px 3px;
}

li.sample3{
padding-left:18px;
background-image:url("../img/pochi.png");
background-repeat:no-repeat;
background-position:0px 6px;
}

実行結果は下記の通りです。

リストのマークを画像で表示するサンプル

上記では項目毎に画像の縦方向の表示位置を微妙に変えています。

( Written by Tatsuo Ikura )

Profile
profile_img

著者 / TATSUO IKURA

初心者～中級者の方を対象としたプログラミング方法や開発環境の構築の解説を行うサイトの運営を行っています。