CSSで設定したバックグランドをクリッカブルボタンにする - 2/2

「CSSで設定したバックグランドをクリッカブルボタンにする - 1/2」では、CSSレイアウトにより、ボタンを作成しました。

しかしこのままでは、クリック可能なエリアは「テキスト」が書かれたのみなので、知らずに文字が書かれていないエリアをクリックすると、「あれっ」という感じになってしまいます。

今回は、前回作成した、バックグラウンドに張られたイメージまでクリッカブルにする方法を、ご紹介します。

と、前回より引っ張りましたが、実はものすごく簡単なんです。

CSSのstyleを「.bg-menu{ }」としていましたが、これを<a>タグに適用されるように「.bg-menu a{ }」とします。
こうすることにより、<a>タグのstyleとして表示されることになるので、CSSレイアウトで設定した「height」「width」のエリア全てをクリックすることができるようになります。

サンプルはこちらです。

CSS BG MENU

ちなみに、CSSスタイルの設定は、複雑なレイアウトが組まれている場合、<div>タグに適用しないと、ボタンに書いてあるテキストのセンタリングが、できないことがありますので気をつけましょう。

HTMLのソースはこちらです。

<style type="text/css">
<!--
.bg-menu a{
background-image: url(http://jrk.cocolog-nifty.com/2004/images/20060217_bg.gif);
height: 30px;
width: 150px;
font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3", Serif;
font-size: 1em;
color: #6666FF;
background-repeat: no-repeat;
text-align: center;
font-weight: bold;
line-height: 1.8em;
border-top-width: 2px;
border-right-width: 2px;
border-bottom-width: 2px;
border-left-width: 2px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #FFEBD7;
border-right-color: #FFCC99;
border-bottom-color: #FFCC99;
border-left-color: #FFEBD7;
display: block;
}
-->
</style>
<div class="bg-menu"><a href="#top">CSS BG MENU</a></div>

◇この記事が参考になりましたらこちらをクリック ≫ 人気blogランキング

◇「『うぇっぶ』のはなし」へのコメント募集中 ≫ ビジネスブログランキング100選