background: ***;
- ブラウザ
- 特性
- background
background は、背景色や背景画像（並び方、スクロール、位置）を一括で指定するプロパティです。
このプロパティをli要素に対して設定すると、リストマーカーを背景画像で表示することができます。
ul {
list-style-type: none;
}
li {
background: url(mark.gif) no-repeat 0 1px;
padding-left: 20px;
}
| プロパティ名 | 値 | 説明 |
|---|---|---|
| background | 以下を参照 | 背景画像、並び方、表示位置を指定 |
【指定方法】
background: url(mark.gif) no-repeat 0 1px;
- url( ) … ( ) 内に画像のURIを指定 （背景画像の指定）
- no-repeat … 背景画像を1つだけ表示 （並び方の指定）
- 0 1px … 左からの距離と上からの距離を指定 （表示位置の指定）
表示位置を指定すると、マーカーの位置を微調整することができます。（微調整する必要がない場合は、この値を省略しても構いません）
※背景の設定方法に関する詳細は、「背景の設定をひとまとめに行う」をご覧ください。
上記の他に、以下の設定が必要になります。
- ■通常のマーカーを消す
- マーカーの表示が重複しないように、ul要素に対して list-style-type: none; を指定しておきます。
- ■左パディングを設定する
- マーカーの表示領域を確保するため、li要素に対して padding-left を設定します。
【画像の大きさに注意】
マーカーに使用する画像が大きいと、ブラウザの文字サイズを小さくした際に、マーカーの一部が欠けてしまう場合があります。（マーカーを背景画像で表示しているため）
この問題は、li要素に対して padding-bottom を設定することで、ある程度は回避することができます。
使用例
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>文書のタイトル</title>
<style type="text/css">
ul {
list-style-type: none;
}
li {
padding-left: 18px;
padding-bottom: 3px;
background: url(mark.gif) no-repeat 0 1px;
}
</style>
</head>
<body>
<ul>
<li>リスト項目A</li>
<li>リスト項目B</li>
<li>リスト項目C</li>
</ul>
</body>
</html>
表示例
- リスト項目A
- リスト項目B
- リスト項目C
- サイト内検索
