画像リンクでボタンを作成
スタイルシートの色やボーダーの設定だけではどうしても淡白だ…そう思ったときは画像のボタンを作る事になると思います。
背景部分は画像、文字部分はテキストのボタンについて説明します。
まずは、通常時のボタン背景とカーソルが重ねられたときの背景を作ります。
※必ず同じ大きさで作ってください。
<p class="navi">
<a href="a.html">A</a>
<a href="b.html">B</a>
<a href="c.html">C</a>
</p>
p.navi a{
display:block;
width:100px;
height:30px;
float:left;
background-image:url(○○.gif);
background-repeat:no-repeat;
}
display:block;
width:100px;
height:30px;
float:left;
background-image:url(○○.gif);
background-repeat:no-repeat;
}
p.navi a:hover{
background-image:url(○○2.gif);
}
■p.navi aの設定について
「background-image:url(○○.gif);」で画像の設定を、「background-repeat」で画像がリピートされないように設定しています。
「height」でボタンの高さを指定しています(line-heightだと高さが変化するので注意)
※他の項目については、リンクでボタンを作成する:スタイルシートメモを参照してください。
■p.navi a:hoverの設定について
変更する背景画像を指定します。