list background リストに背景画像を設定

「ul」や「ol」のリスト部分を画像にする際、list-style-imageを使うと簡単に出来ますが、ブラウザによって微妙にずれる事があります。

ずれないリストを作る方法を説明します。

通常リストを作る時には「ul」「li」を使いますが、CSSでリストの行頭記号を指定しても微妙にずれて表示されたり、ブラウザによってうまくいかないことがあると思います。

また、HTMLに画像ファイルを入れることもできますが、サイズ調整の時など作業量が増えて大変です。

このようなときはリストの行頭のところをバックグラウンドイメージを指定することで、解決できます。下のコードを使ってみてください。うまくいくと思います。

リスト画像をbackgroundで配置する



	
	リスト
	リスト
	リスト


#liststyle ul{
	margin:0px;
	padding:0px;
	list-style:none;/*ここでリストスタイルを消す*/
	font-size:90%;
}
#liststyle li{
	margin:0px;
	padding:0px;
	background-image:url(ここに画像のパス);/*liのパディングはブラウザによる解釈が違います*/
	background-position:left center;
	background-repeat:no-repeat;
	padding-left:15px;
	line-height:1.6;
	margin-left:2px;
	list-style:none;/*ここでリストスタイルを消す*/
}

表示例

オリジナルのリスト用画像を入れた例です。

上記コードの説明

HTML部分は通常の記述をします。

CSSでは「background-position:left center;」で画像の位置を左中央にします。
「background-repeat:no-repeat;」画像のリピートを停止します。
「padding-left:15px;」で、画像とテキストの隙間を空けます。
「line-height:1.6;」で上下のスペースを調整します。
「margin-left:2px;」で画像を含む左側のスペースを調整します。
「list-style-type:none;」でデフォルトの行と番号を消します。

リストに行頭画像（list-style-image）を指定すれば楽ですが、「li」のパディングはブラウザによって解釈が違っているので、どうしてもずれてしまいます。 CSSで一度調整しておけば後で修正する時も一度にできるので便利です。