ホームページ用素材無料配布
ホームページ作成用素材ボタンNo.001
メニューなどに使えるボタンです。影つきのボタンですので透過しても背景色が濃い色の場合結局白いふちができてしまうので透過はしていません。ご利用になる場合は画像を右クリックして「名前をつけて保存」し、ご利用ください。また、ご利用規約もよく読んでください。
スタイルシート（CSS）を使ってメニューを作成
上の素材に必要な文字がなく「いちいち作ってられんワイ!!」という方は、スタイルシートを使いましょう。文字の表示は普通のテキストになります。
どうやって作るかというと
スタイルシートで以下のように書きます。
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: #333333; /*文字の色*/
}
a.menu:hover {
color: #FF0000; /*マウスが乗ったときの文字の色*/
}
そしてHTMLは以下のように書きます。
<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>
実際にメニューの部分だけ作ったページを作成してあります。
ご覧ください。また、そのセットをダウンロードもできます。
