ほんっとにはじめてのHTML5とCSS3：[11-6] ボタン画像をマウスオーバー時に変化させよう（CSS使用）

[11-6] ボタン画像をマウスオーバー時に変化させよう（CSS使用）

最終更新日：2022年08月26日　（初回投稿日：2010年12月09日）

今回は、CSSを使って前回 [11-5] 画像にリンクを貼ろうのボタン画像をマウスオーバー時に変化させてみます。
マウスオーバーなので PCブラウザが対象。スマホやタブレットはマウスオーバー無いからね。

今回は全編 CSS の話なので「まだ CSSはイイや」ってかたはスルーして構いません。

前回までの index.html の「次のページへ」のボタンを、マウスオーバー時に変化するように作ってみます。

注：ボタンは画像でなくCSSのみで表現できます（2022年8月追記）
この記事は2010年に書いたもので、当時は CSSで指定しても表示しないブラウザもあったため、ボタンなどは画像で表現するのが手っ取り早かったのです。

その後、時が流れて、CSSの標準仕様に未対応なブラウザが減っていき、本記事に書かれているようなボタンは、画像でなく CSSで表現するのが主流になりました。
（画像でボタンを作っても、別にイイんですけどね。
同じことがマークアップだけで作れるので、画像を作る手間が省けるんです）

本サイト内で、CSSによるボタンの作り方で参考になりそうなものを貼っておきますので、ご覧ください。
・[49-10-2] input要素で作るボタンの見た目を CSSで変えよう
（↑ <input>要素に対する解説ですが、<a>要素に応用できます）
・【22-2】要素を絶対位置に指定する position: absolute
（↑ CSSでワンポイントを付ける方法です）
・はじめてのCSS　INDEX
（↑ CSSの記事のインデックスです）

マウスオーバー用の画像を用意しよう

まずは、画像を用意します。

下記のように通常時のボタンの画像の横に、マウスオーバー時の表示を追加した画像を作ります。今回は文字はテキストを使いますので、背景だけです。

画像を2つ作るのでなく、一体化した1ファイルの画像を作ります。
CSSで背景画像の位置を変えて使うからこれでOK。一体化しておけば、後で画像修正する時にも便利だし。

<a>要素にidをつけよう

index.html の「次のページへ」を囲んでいる <a>要素に id名を付けます。CSSで呼び出す（特定する）ために。

ちなみに、同じCSSの指定をいろんな所で使いたければ、idでなく class名をつけます。
idとclassの違いは「使える回数」。idは１ページに１コだけ。classは何コでも。
詳しくは【3】id とか classって何？（セレクタの「種類」を知っておこう）をご覧ください。

<p>
<a id="gotoNext" href="second.html">次のページへ</a>
</p>

id名は任意です。わかりやすければ何でもOK。ここでは「gotoNext」としました。
大文字混ぜてるのわかりますか。
「Go to Next」の意味なんだけど、id名、class名は、途中で半角は入れられないし「-（ハイフン）」とか入れる程でもないので、文字をくっつけて途中を大文字にして読みやすくしています。
ここで注意が必要。 CSSの id名・クラス名は 大文字小文字の区別をするので、呼び出す時に「gotonext」なんて書いたらダメ。ブラウザ的には「そんなもん無いよ」となります。

background-position で背景画像の位置を変えます

<head>内に書いているCSSに追加します。

毎回言ってるけど、CSS は HTMLの <head>内に書かずに「独立した外部CSSファイル」にして HTMLに読み込ませる方法 のほうが便利すし、一般的です。
ここでは簡単に説明するために HTMLファイル内に書く方法でやってます。

#gotoNext {
	background: url(image/gotoNext.gif) no-repeat left center;
	width: 154px;
	height: 39px;
	display: block;
	color: #FFFFFF;
	font-size: 15px;
	line-height: 36px;
	text-indent:1em;
	}
#gotoNext:hover {
	background: url(image/gotoNext.gif) no-repeat right center;
	text-decoration: none;
	font-style: normal;
	}

1行目では「#gotoNext」と「#」を付けて id名を呼び出しています。これで通常時（マウスオーバーしていない時）の状態を指定します。
（クラス名のときは先頭に「.（ピリオド）」を付けて idと区別します）

11行目では「:hover」もつけて呼び出していますね。これは「この id名の要素がマウスオーバーしてる時の状態」のスタイルを指定します。

通常時は背景画像を
background: url(image/gotoNext.gif) no-repeat left center
と指定。
これは「ショートハンド」という指定方法で、「背景画像ファイル」「リーピート方法」「背景の位置」をまとめて指定しています。
最後の「left center」が「背景の位置」の指定。
ショートハンドじゃない（ひとまとめにしてない）時の指定だと
background-position: left center
で、x方向（左右の方向）は「左」、y方向（縦方向）はセンターって意味です。

マウスオーバー時の背景画像は
background: url(image/gotoNext.gif) no-repeat right center
と指定して、x方向（左右の方向）は「右」に変更しています。

こんな理屈です。

通常時は「左」側だけ見せて、マウスオーバー時は「右」を見せるので、画像が変化して見えるんです。

background-positionプロパティについては、【15-2】background関連のプロパティ（2/4　background-position）をご覧ください。
background の「ショートハンド」については【15-5】backgroundのショートハンドまとめを見てみてください。

display: block でブロックレベルに

上のコードの５行目に display: block と指定しています。
<a>要素はインラインレベルで、高さや幅が指定できないので、この指定でブロックレベルに変えています。
背景画像のサイズに合わせて「表示させる範囲」を指定してあげなきゃならないので、コレが必要です。

文字のスタイル指定

文字の部分はアクセシビリティ的にもテキストのほうがやっぱりイイです（画像より）
文字の指定（6〜9行）ですが、
color: #FFFFFF で文字色を白にしています。
font-size: 15px で文字サイズを指定。
line-height: 36px はテキストを天地の真ん中にしています。
（画像の高さは 39px ですが、そこからシャドウの 3px 分を引いてます。）
text-indent:1em はインデントを１文字分とってます（1字分字下げをしてます）

別の方法でも同じボタンが作れます

背景のグラデーションやシャドウなども CSS で作る方法も紹介しておきます。
ただコレ、けっこう複雑なCSSなので、こんなこともできる（全部画像じゃなくてCSSでOK）という例として見てください。
（まだ初心者のかたは、今は別に無理してコードを理解しなくてもイイんです）

矢印の部分は PNG画像です。（グレーのところは透明）

これがプレビュー↓　PCのかたはマウスオーバーしてみて。

前のページへ戻る

HTMLはこちら。

<a id="goBackPrev" href="index.html" title="前のページへ">前のページへ戻る</a>

CSSはこちら。

#goBackPrev {
	background: #b1d9af; /*古いブラウザ（グラデーションに未対応）用に背景色を指定*/
	background:
	url(image/arrowback.png) no-repeat center left .8em/1.4em #b1d9af; /*古いsafari用*/
	background:
	url(image/arrowback.png) no-repeat center left .87em/1.4em, /*カンマでbackground-imageを複数指定*/
	linear-gradient(#d0dc8e, #b1d9af) #84aa83; /*グラデーション*/
	width:10em;
	height:34px;
	display:block;
	border-radius:10px; /*角を丸くする指定*/
	box-shadow:0 1px 2px #666; /*シャドウの指定*/
	color:white;
    font-weight:bold;
	font-size:15px;
	line-height:34px;
	text-align:right;
	padding:0 1em;
	}
#goBackPrev:hover {
	background:
	url(image/arrowback.png) no-repeat center left .8em/1.4em #a0c786; /*グラデをやめて背景色のみに*/
	text-decoration:none;
	font-style:normal
    }

グラデーションも背景イメージ（background-image）扱いになるので、「矢印の PNG画像」の後に「,（カンマ）」で区切ってグラデーションを指定しています（7行目）先に書いたほうが上に、後に書いたほうが下になります（矢印が上でグラデが下に）

background の指定が複数あるのは、
2行目：かなり古いブラウザ向け（グラデーションや「複数の background-image」に未対応）
3〜4行目：古めの Safari 向け（「複数の background-image」に未対応）
5〜7行目：通常の書き方
で書いているから。
ブラウザは、理解できる構文で表示し、その後は無視しますので、古い順から書きます。

4行目、6行目の
url(image/arrowback.png) no-repeat center left .8em/1.4em
が「矢印の画像」の指定です。
これは「ショートハンド」という複数のプロパティをまとめて指定する方法で書いてます。

「矢印の画像」の指定は、ショートハンドじゃなければ下記の指定になります。
background-image: url(image/arrowback.png) 　←背景画像のURLです。
background-repeat: no-repeat 　←背景画像のリピートは無し
background-position: center left .8em 　←背景画像の位置。y方向はセンター、x方向は左端から0.8em（0.8文字分）
background-size: 1.4em 　←背景画像のサイズ。天地も左右も1.4em（1.4文字分）

22行目は、コレ↑に「背景色」を足しています。（4行目も）
url(image/arrowback.png) no-repeat center left .8em/1.4em #a0c786
これは
background-color: #a0c786
の意味。グラデーションをやめて、矢印画像と背景色のみにしています。

background の指定は【15-5】backgroundのショートハンドまとめを見てみてください。
グラデーションの指定は [13-3] サイト背景にCSS3で線形グラデーションをつけよう (CSS使用) をご覧ください。
#a0c786 といった色指定については [14-4] 色指定について（16進数, 色名, 10進数, HSL, accessibility）をご覧ください。

複雑な CSSコードを書いちゃったけど、上のコードをコピーして、適当に書き換えていろいろ試してみてください。CSSは、いじっているうちに段々わかるようになる（はず）。

次回予告

いかがでしたか。
今回で <a>要素関連の説明は終わりにします。

さて、今までは、とりあえず簡単にCSSを紹介するために HTMLの <head>内に書く方法で説明していました。
ですが、CSSは「外部CSSファイル」にする方法が標準です。編集もしやすいし。
次回はこの「外部CSSファイル」にする方法を説明します。

関連記事

やる気を保つためにランキングに参加しています。
応援してくださるとすっごいやる気を出します！ (笑)

初心者にも使いやすい（と思う）レンタルサーバー

「初心者ですがレンタルサーバーはどこがいい？」というご質問をよくいただきます。
自由にファイルをアップロードできる自分のサーバがあると便利ですよね。ローカル環境じゃなくサーバ上で試してみたい時がありますからね。
私が使っているのは、 スターサーバーや ロリポップ！です。どちらも管理画面がわかりやすく、マニュアルも充実していて、料金も安い。どちらもライトプラン以上で WordPress が使えます。
初心者が始めやすいサーバだと思います。

ちょっと料金は高いけど、さくらのレンタルサーバや、エックスサーバー は、やはり老舗なのでおすすめです。
両方とも高スペックでコスパが良く、老舗でユーザーが多いので、質問する場がたくさんあります。初心者だけど仕事でサーバが欲しい場合は、安心なのではないかと思います。

最終更新日：2022-08-26（Fri）│
投稿日：2010-12-09（Thu）│
カテゴリ：はじめてのHTML

Pagetop ↑

« next ホーム prev »

コメントの投稿

次が楽しみ！

CSSのページから来ました。もう一度、一から勉強しなおす気にさせる内容です。とてもわかりやすく、どんどん読みたくなります。次を楽しみにしています。こんなページを作っていただいて、ありがとうございます。

2011-01-25 16:07 :
こがねもち

コメントありがとうございます！！

こがねもちさま！　コメントありがとうございます。
リアクションが大変遅くてごめんなさい。
（1/28引越で、ぐだぐだでした。）

近々更新を再開する予定です。
だいたいの記事の想定は出来ているのですが…。
そのうちテンポ良くいきますので、気を長く持って、見守ってくださいね。

2011-02-07 20:16 :
yoshi★nori

ありがとうございます。

1から始めて、ここまでで１日かかって勉強させていただきました。
いままで手をこまねいていたのがウソのように捗りました。
ありがとうございます。

2016-02-29 19:50 :
さかい

Re: ありがとうございます。

さかいさま
お役に立ててよかったです。コメントありがとうございます。
古い記事は、ブラウザ等も古いままの記載ですので、順次書き換えて行こうと思っております。
これからもよろしくお願いいたします。

2016-03-05 14:26 :
yuki★hata