サイト内検索
...スタイルシート(css)...
スタイルシート・リスト
マークを背景画像で
- マークを背景画像は、backgroundプロパティを指定します。
- 背景色や背景画像（並び方・スクロール・位置）を一度に指定できます。
- li 要素に指定をすると、リストマークを背景画像で指定できます。
- [使い方]
- li{
background: url(img/sample.jpg) no-repeat;
padding-left: 30px;
}
- 外部ファイルで画像を表示させる場合
- 画像の外部スタイルシートファイル（.ｃｓｓ）から見た
- 画像ファイルの相対アドレス（url）を記述します。
| プロパティ名 | 値（サンプル） | 説明 |
|---|---|---|
| background： | url(img/sample.jpg) no-repeat; | 背景画像と並び方を指定します。 |
| プロパティ名 | 値 | 説明 |
|---|---|---|
| background: | ; |
「url(http://・・/sample.jpg);」
のように表示する画像（URL）を指定します。 |
| no-repeat; | 画像を1つだけ表示する指定をします。 | |
| list-style-type: | none; | 標準のマークを消す場合
マークの表示が重ならないように ul 要素に指定して マークを消しておきます。 |
サンプル
[ｈｅａｄの中]
<style type="text/css"><!--
ul{
list-style-type: none;
}
.sample1{
background: url(img/sample.jpg) no-repeat;
padding-left: 30px;
}
.sample2{
background: url(img/sample.jpg);
padding-left: 30px;
width: 300px;
font-weight: bold;
} -->
</style>
[ｂｏｄｙの中]
<ul><li class="sample1>カサブランカ・ユリ科</li>
<li class="sample1>モダンローズ・バラ科</li>
<li class="sample1>胡蝶蘭・ラン科</li>
</ul>
<ul>
<li class="sample2>カサブランカ・ユリ科</li>
<li class="sample2>モダンローズ・バラ科</li>
<li class="sample2>胡蝶蘭・ラン科</li>
</ul>
[ブラウザ上]
- カサブランカ・ユリ科
- モダンローズ・バラ科
- 胡蝶蘭・ラン科
- カサブランカ・ユリ科
- モダンローズ・バラ科
- 胡蝶蘭・ラン科
