ホームページ用素材無料配布
スタイルシートで作成したメニューボタン
No.011-No.015色違いシリーズの画像を使ってスタイルシートでメニューを作成してみました。基本的な記述はすべて同じですが、文字の色、フォントの種類、使用画像が変わっている程度でこれだけ雰囲気が変わってきます。HTMLの書き方は以下の様です。
<div><a href="リンク先アドレス" class="menu">TOP PAGE </a></div>
<div><a href="リンク先アドレス" class="menu">WHAT'S NEW </a></div>
<div><a href="リンク先アドレス" class="menu">SHOPPING</a></div>
<div><a href="リンク先アドレス" class="menu">INFORMATION</a></div>
<div><a href="リンク先アドレス" class="menu">CONTACT US </a></div>
ただ、このページのHTMLでは便宜上ひとつのスタイルシートファイルに記述していますので（class="menu"）の部分はmenu1やmenu2にしています。
スタイルシートを使ったメニューその1
スタイルシートは以下のように書いています。
a.menu:link , a.menu:visited {
font-weight: normal; /*文字の太さ*/
text-decoration: none; /*テキストの下に下線を引くかどうか*/
background-image: url(001.gif); /*背景イメージへのリンク*/
background-repeat: no-repeat; /*背景画像は繰り返さない*/
display: block; /*ブロックで表示*/
margin: 0px; /*マージン*/
width: 140px; /*幅*/
padding-top: 10px; /*上余白*/
padding-right: 15px; /*右余白*/
padding-bottom: 15px; /*下余白*/
padding-left: 15px; /*左余白*/
line-height: normal; /*ライン高*/
font-size: medium; /*文字の大きさ*/
color: #FFFFFF; /*文字の色*/
font-family: "Courier New", Courier, mono; /*フォントの種類*/
}
a.menu:hover {
color: #FF9999; /*マウスが乗ったときの文字の色*/
background-image: url(002.gif); /*背景イメージへのリンク*/
}
スタイルシートを使ったメニューその2
この場合のスタイルシートは
a.menu1:link , a.menu1:visited {
font-weight: bold; /*文字の太さ*/
text-decoration: none; /*テキストの下に下線を引くかどうか*/
background-image: url(029.gif); /*背景イメージへのリンク*/
background-repeat: no-repeat; /*背景画像は繰り返さない*/
display: block; /*ブロックで表示*/
margin: 0px; /*マージン*/
width: 140px; /*幅*/
padding-top: 15px; /*上余白*/
padding-right: 15px; /*右余白*/
padding-bottom: 15px; /*下余白*/
padding-left: 15px; /*左余白*/
line-height: normal; /*ライン高*/
font-size: small; /*文字の大きさ*/
color: #FFFFFF; /*文字の色*/
font-family: "ＭＳ Ｐゴシック", Osaka; /*フォントの種類*/
}
a.menu1:hover {
color: #FF3300; /*マウスが乗ったときの文字の色*/
background-image: url(024.gif); /*背景イメージへのリンク*/
}
となっています。メニューのみの表示もごらんになれますし、ダウンロードもできます。
スタイルシートを使ったメニューその3
a.menu2:link , a.menu2:visited {
font-weight: normal; /*文字の太さ*/
text-decoration: none; /*テキストの下に下線を引くかどうか*/
background-image: url(048.gif); /*背景イメージへのリンク*/
background-repeat: no-repeat; /*背景画像は繰り返さない*/
display: block; /*ブロックで表示*/
margin: 0px; /*マージン*/
width: 140px; /*幅*/
padding-top: 10px; /*上余白*/
padding-right: 15px; /*右余白*/
padding-bottom: 15px; /*下余白*/
padding-left: 15px; /*左余白*/
line-height: normal; /*ライン高*/
font-size: small; /*文字の大きさ*/
color: #006600; /*文字の色*/
font-family: Georgia, "Times New Roman", Times, serif; /*フォントの種類*/
}
a.menu2:hover {
color: #FFFFFF; /*マウスが乗ったときの文字の色*/
background-image: url(045.gif); /*背景イメージへのリンク*/
}
メニューのみの表示もごらんになれますし、ダウンロードもできます。
