ホームページ用素材無料配布
素材ボタンNo.001～005色違いシリーズ
メニューなどに使えるボタンです。影つきのボタンですので透過しても背景色が濃い色の場合結局白いふちができてしまうので透過はしていません。ご利用になる場合は画像を右クリックして「名前をつけて保存」し、ご利用ください。また、ご利用規約もよく読んでください。
スタイルシートでメニューを作ろう
上のボタンで使えそうなのはありましたか?メニューを作るときに上の画像を編集して文字を入れていくのももちろんよいのですが、スタイルシートで作って見ましょう。No.001やNo.002で解説していますが少し違う感じに…マウスが乗っかったときに背景画像も変えてみましょう。まず、HTMLはNo.001やNo.002と同じで以下のように書きます。
<div><a href="リンク先アドレス" class="menu">トップページ</a></div>
<div><a href="リンク先アドレス" class="menu">新着情報</a></div>
<div><a href="リンク先アドレス" class="menu">ショッピング</a></div>
<div><a href="リンク先アドレス" class="menu">インフォメーション</a></div>
<div><a href="リンク先アドレス" class="menu">Contact Us</a></div>
そしてスタイルシートには、
a.menu:link , a.menu:visited {
font-weight: bold; /*文字の太さ*/
text-decoration: none; /*テキストの下に下線を引くかどうか*/
background-image: url(no.gif); /*背景イメージへのリンク*/
background-repeat: no-repeat; /*背景画像は繰り返さない*/
display: block; /*ブロックで表示*/
margin: 0px; /*マージン*/
width: 115px; /*幅*/
padding-top: 7px; /*上余白*/
padding-right: 15px; /*右余白*/
padding-bottom: 12px; /*下余白*/
padding-left: 20px; /*左余白*/
line-height: normal; /*ライン高*/
font-size: small; /*文字の大きさ*/
color: #FFFFFF; /*文字の色*/
}
a.menu:hover {
color: #003300; /*マウスが乗ったときの文字の色*/
background-image: url(010.gif); /*背景イメージへのリンク*/
background-repeat: no-repeat; /*背景画像は繰り返さない*/
}
のように書くと以下のように表示されます。
ほら、もっとボタンらしくなりましたね。マウスが乗っかったときに背景を変えたくなければその部分は削除しましょう。後は背景イメージを自分の好きなものにしたり、文字の色を変えたりすれば良いだけです。参考めでにメニューの部分だけのページです。さらにその部分だけのダウンロードもできます。
