スタイルシート［CSS］/リスト/マークを背景画像で指定する

background は、背景色や背景画像（並び方、スクロール、位置）を一度に指定できるプロパティです。

li 要素にこのプロパティを設定すると、リストマーク（マーカー）を背景画像で指定することができます。

ul {
list-style-type: none;
}

li {
background: url(image/mark.gif) no-repeat;
padding-left: 20px;
}

background	背景画像と並び方を指定します

【指定方法】

background: url(image/mark.gif) no-repeat;

url( ) … ( ) 内に画像のファイルを指定
no-repeat … 画像を1つだけ表示する指定（敷き詰めない）

※background プロパティに関する詳細は、「背景の設定をひとまとめに行う」をご覧ください。

■標準のマークを消す
マークの表示が重複しないように、ul 要素に list-style-type: none; を指定して標準のマークを消しておきます。

■パディングを設定する
マークの表示領域を作るため、li 要素に padding-left を指定します。

【画像の大きさに注意】

マークに使う画像が大きいと、ブラウザの文字サイズを小さくした際に、マークの一部が欠けてしまう場合があります（背景画像のため）。

この問題は、li 要素に padding-bottom を指定することで、ある程度は回避することができます。

使用例

<html>
<head>
<title>TAG index Webサイト</title>

<style type="text/css">

</style>

</head>
<body>

<ul>
<li>Webディレクター</li>
<li>Webデザイナー</li>
<li>Webプログラマー</li>
</ul>

</body>
</html>

▼これをブラウザで見ると次のように表示されます

Webディレクター
Webデザイナー
Webプログラマー

マークを背景画像で指定する

background: ***;

使用例