2005年8月21日

リスト画像のずれを修正するには

リストマークに画像を使用した際に、画像がずれてしまうという経験はありませんか？今回は、リスト画像のずれを修正する方法について説明します。

リスト画像のずれを修正するには

リストマークに画像を使用する際に、下記のようにスタイルシートの「 li 」内でlist-style-imageプロパティを用いて画像指定すると、どうしても画像とテキストが一直線上に並ばずに、画像がずれて表示されてしまいます。

<記述例>

li {
list-style-image: url((http://blog.info-rich.jp/img/ya_migi2.gif);
}

このような画像のずれを修正するには、背景画像で指定する方法に変更すると、画像位置の微調整が可能になります。

背景画像の指定： background-image

背景画像を指定するには、background-image プロパティを使用します。

＜スタイルシートの記述例＞

li {
background-image : url("画像のパス");
background-repeat: no-repeat;
background-position: 5px 2px;
padding-left: 20px;
}

・background-image : url("画像のパス");
　　リスト画像のURLを指定します。

・background-repeat: no-repeat;
　　画像の並び方の指定：　繰り返しなし

・background-position: 5px 2px;
　　画像の表示位置：　x軸（横方向）　y軸（縦方向）

・padding-left: 20px;
　　左側の余白

<当ブログでの記述>

li {
background-image: url(http://blog.info-rich.jp/img/ya_migi2.gif);
background-repeat: no-repeat;
list-style-type: none;
background-position: left 3px;
padding-left: 20px;
margin: 1px 0px;
line-height: 150%;
text-align: left;
}

<表示例>