トップ > スタイルシートテクニック > リストマークに画像を使う

リストマークに画像を使う

スポンサード リンク
リストマークに画像を使う方法は2つあります。
「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;」で標準のリストマークを表示させないようにします。

「background: url(画像url) no-repeat left center;」でリストマークの画像を背景として指定します。
「no-repeat left center」の部分は、繰り返し無し・左寄せ・上下中央寄せを表します。
必要があれば%指定などに変更して下さい。

「padding-left: **px;」の部分で画像と文字が重ならないように調節します。
画像の大きさに合わせてサイズを指定して下さい。

その他の微調整は必要に応じてmarginやpaddingを指定して下さい。

もう何度も見ているとは思いますが、サンプルはこんな感じです。
  • サンプル
  • サンプル
  • サンプル