ホームページ用素材無料配布
スタイルシートで作ったメニュー
No.006-No.010色違いシリーズを使ってメニューを作ってみました。スタイルシートで作成しています。すべてスタイルシートと使う画像ファイルが違うだけで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(070.gif); /*背景イメージへのリンク*/
background-repeat: no-repeat; /*背景画像は繰り返さない*/
display: block; /*ブロックで表示*/
margin: 0px; /*マージン*/
width: 125px; /*幅*/
padding-top: 7px; /*上余白*/
padding-right: 15px; /*右余白*/
padding-bottom: 12px; /*下余白*/
padding-left: 20px; /*左余白*/
line-height: normal; /*ライン高*/
font-size: small; /*文字の大きさ*/
color: #FFFFFF; /*文字の色*/
font-family: Arial, Helvetica, sans-serif; /*文字の形*/
}
a.menu:hover {
color: #330000; /*マウスが乗ったときの文字の色*/
background-image: url(054.gif); /*背景イメージへのリンク*/
background-repeat: no-repeat; /*背景画像は繰り返さない*/
}
スタイルシートで作ったメニューその2
このような時CSSを見てみると
a.menu1:link , a.menu1:visited {
font-weight: normal; /*文字の太さ*/
text-decoration: none; /*テキストの下に下線を引くかどうか*/
background-image: url(004.gif); /*背景イメージへのリンク*/
background-repeat: no-repeat; /*背景画像は繰り返さない*/
display: block; /*ブロックで表示*/
margin: 0px; /*マージン*/
width: 125px; /*幅*/
padding-top: 7px; /*上余白*/
padding-right: 15px; /*右余白*/
padding-bottom: 12px; /*下余白*/
padding-left: 20px; /*左余白*/
line-height: normal; /*ライン高*/
font-size: small; /*文字の大きさ*/
color: #000000; /*文字の色*/
font-family: "Times New Roman", Times, serif;
}
a.menu1:hover {
color: #FFFF66; /*マウスが乗ったときの文字の色*/
background-image: url(095.gif); /*背景イメージへのリンク*/
background-repeat: no-repeat; /*背景画像は繰り返さない*/
}
スタイルシートで作ったメニューその3
a.menu2:link , a.menu2:visited {
font-weight: normal; /*文字の太さ*/
text-decoration: none; /*テキストの下に下線を引くかどうか*/
background-image: url(089.gif); /*背景イメージへのリンク*/
background-repeat: no-repeat; /*背景画像は繰り返さない*/
display: block; /*ブロックで表示*/
margin: 0px; /*マージン*/
width: 115px; /*幅*/
padding-top: 7px; /*上余白*/
padding-right: 25px; /*右余白*/
padding-bottom: 12px; /*下余白*/
padding-left: 20px; /*左余白*/
line-height: normal; /*ライン高*/
font-size: small; /*文字の大きさ*/
color: #FFFFFF; /*文字の色*/
font-family: "Courier New", Courier, mono; /*文字の形*/
}
a.menu2:hover {
text-align: right; /*文字を右に*/
color: #FFCC66; /*文字の色*/
}
赤い文字の部分を変えているだけです。あなたのサイトにあったものを考えてみましょう。 文字の色の指定はカラーチャートを参考にすると便利です。
