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

最終更新日:2017年09月19日  (初回投稿日:2010年12月09日)

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

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

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

ロールオーバー用の画像を用意しよう

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

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

ロールオーバー用の表示を追加した画像

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

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

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

ちなみに、同じCSSの指定をいろんな所で使いたければ、idでなく class名をつけます。
idとclassの違いは「使える回数」。idは1ページに1コだけ。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 でブロックレベルに

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

文字のスタイル指定

文字の部分は アクセシビリティ的にもテキストのほうがやっぱりイイです(画像より)
文字の指定(6〜9行)ですが、
color: #FFFFFF で文字色を白にしています。
font-size: 15px で文字サイズを指定。
line-height: 36px はテキストを天地の真ん中にしています。
(画像の高さは 39px ですが、そこからシャドウの 3px 分を引いてます。)
text-indent:1em はインデントを1文字分とってます(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は、いじっているうちに段々わかるようになる(はず)。

今回のサンプルをダウンロード

今回のファイルセットをダウンロードできるようにしました。
index.html のボタンが 背景全部が画像になってるヤツ(前半の簡単な方)、
second.html のボタンが 矢印のみ画像で他はCSSなヤツ(後半の複雑な方)
です。

↓クリックでダウンロード用のページが別ウィンドウで開きます。
サンプル ダウンロードページへ

次回予告

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

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

関連記事
この記事をはてなブックマークに追加

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

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

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

それよりちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、XSERVER(エックスサーバー)だと思う。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

次が楽しみ!

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

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

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

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


ありがとうございます。

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

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

さかいさま
お役に立ててよかったです。コメントありがとうございます。
古い記事は、ブラウザ等も古いままの記載ですので、順次書き換えて行こうと思っております。
これからもよろしくお願いいたします。
スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
08 | 2017/09 | 10
- - - - - 1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.