HOME > > > CSSを使ってボタンのデザインを背景に設置する方法

CSSを使ってボタンのデザインを背景に設置する方法

ボタンを背景に設置

CSSを使ってボタンを背景に設置する

メニューは通常画像を切って設置しています。
ロールオーバー時にはjqueryを使ってon、offで画像を切り替えたりします。
PCサイトだけですとそれで問題ないのですが、レスポンシブWebデザインの様なブラウザによって可変するサイトなどでは、レイアウトが取りずらい。
そこで、ボタンのデザインを背景にする方法で解決したいと思います。

ボタンデザインを用意します

まずは背景にする為のボタンデザインを用意します。
サンプルでは154×64サイズの画像を作りました。

ボタン画像

htmlを記述

基本になるhtmlの記述の例です。 通常通りaタグでハイパーリンクをはります。


<a href="リンクするURL">ナビ名</a>

CSSを記述

次にCSSを記述します。 注意してほしい所は「display: block;」と「height」の指定です。
「display: block;」でブロック要素にしないと、widthでサイズを指定しても文字の長さ分までしか背景が表示されません。
「height」は画像の縦サイズを記述ではなく、paddingを使って文字を真ん中に寄せた分から画像の縦サイズを引いた数を記述します。
そうしないと、クリックできる範囲がpaddingで飛び出てしまった分まで伸びてしまいます。
ここでは画像の縦サイズが「64px」、padding-topが「18px」なのでheightは「64-18=46px」にしました。


a{
 background: url(offになる画像のパス) no-repeat;
 display: block;
 text-decoration: none;
 text-align: center;
 color: #fff;
 width: 154px;
 height: 46px; ※2
 padding-top: 18px;
 font-weight: bold;
}

a:hover{
 background: url(onになる画像のパス) no-repeat;
 color: #e8b7b4;
}

以上で完成

これで設定は完成です。
レスポンシブデザインを採用した場合は、pc用・スマフォ用とCSSで画像を変えられるので便利かな。
divで囲めばもっと複雑なボタンが作れると思いますよ。

このページを共有する

Facebook
twitter
Line
googleプラス
はてなブックマーク
Pocket

2014.03.14