トップ > スタイルシートテクニック > リストマークに画像を使う
リストマークに画像を使う
スポンサード リンク
「list-style:url();」と「background-image:url();」です。
「list-style:url();」はリストマークに画像を指定する属性ですが、「background-image:url();」を使った方が微調整が出来るので、そちらを使った方法を紹介します。
また、これを覚えておけばリストメニューを作るときにも役立つと思います。
記述方法は以下の通りです。
ul{
list-style-type : none;
}
li{
background : url(画像url) no-repeat left center;
padding-left : **px;
list-style-type : none;
}
「list-style-type:none;」で標準のリストマークを表示させないようにします。list-style-type : none;
}
li{
background : url(画像url) no-repeat left center;
padding-left : **px;
list-style-type : none;
}
「background: url(画像url) no-repeat left center;」でリストマークの画像を背景として指定します。
「no-repeat left center」の部分は、繰り返し無し・左寄せ・上下中央寄せを表します。
必要があれば%指定などに変更して下さい。
「padding-left: **px;」の部分で画像と文字が重ならないように調節します。
画像の大きさに合わせてサイズを指定して下さい。
その他の微調整は必要に応じてmarginやpaddingを指定して下さい。
もう何度も見ているとは思いますが、サンプルはこんな感じです。
- サンプル
- サンプル
- サンプル