[11-6] ボタン画像をロールオーバ時に変化させてみよう(CSS使用)

今回は、前回のボタン画像をロールオーバ時に変化させてみましょう。
CSSを使いますよ。
大事な点は、img要素で画像を貼るのでなく、
a要素の背景として画像を貼り、a:hoverでイメージを差し替えるという仕組みです。

今回の記事内容はCSS寄りで「はじめてのHTML」からは結構ズレがあります。
混乱しそうなかたは、今回はスルーして、いつかじっくり読んでみてくださいね。

HTMLとCSSは切っても切れない関係なので、
HTMLを編集するには、どうしてもCSSが必要になってきます。セットで使うものなのです。
ですから今後もHTMLの説明をしつつ、CSSの話も挿入して行くと思います。
今回使用するCSSのプロパティは下記になります。

CSSプロパティ background:
display:
line-height:
text-align:
ほか

今回のサンプルも圧縮(ZIPファイル)してダウンロードしていただけます。
ダウンロードは、コチラから(ダウンロード用のページが別ウィンドウで開きます)
★別ウィンドウで開きたくない方は、コチラから

aaa.html の一番下の「作者の紹介」ボタンを編集します。
このように、ロールオーバー時に、ボタンの色が変化するように作ってみます。

ロールオーバー時にボタンの色が変わる

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

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

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

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

上のように、画像を2つ作るのでなく、上のように一体化した1ファイルの画像を作ります。
CSSで背景画像を指定をすると、画像のどの部分を表示させるかを指定できるので、この方法が可能なのです。 こうして一体化しておくと、あとでボタンファイルを修正する時にとっても便利です。

リンク部分を囲んでいるp要素にidをつけよう

まずは、aaa.html の一番下の「作者の紹介」を囲んでいるp要素に id名をつけます。
このp要素だけを他のp要素と区別するためです。
そして、この特化したp要素をターゲットにしたCSSを書くというわけ。

ちなみに、同じCSSの指定で使うp要素がある場合は、idでなくclass名をつけます。
idとclassの違いについての詳細は「CSSレイアウトメモ:基本のキ [IDとCLASSの違い] 」をご覧ください。

<p>
<a href="bbb.html">次のページへ</a>
</p>
<p id="goto-profile">
<a href="bbb.html#profile">作者の紹介</a>
</p>

id="goto-profile" とつけましたよ。
(id名は任意です。何でも自分がわかりやすいものでいいんです。)

CSSを書きます

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

セレクタを「p#goto-profile a」と「p#goto-profile a:hover」と追加して、
そこに下記のような指定をします。

p#goto-profile a {
background: url(image/11-5_btn2.gif) no-repeat left top;
width: 140px;
height: 36px;
display: block;
color: #FFFFFF;
font-size: 15px;
line-height: 36px;
text-align: center;
}
p#goto-profile a:hover {
background: url(image/11-5_btn2.gif) no-repeat right top;
}

「p#goto-profile」とは、「p要素のid名 goto-profile 」という意味。
「p」のすぐ後に「#」とid名を書きます。
そのあとに「(半角スペース)a」と続けて表記して「p要素のid名 goto-profileの a(リンク時)」と言う意味。
同様に「(半角スペース)a:hover」で「p要素のid名 goto-profileの a:hover(ロールオーバー時)」と言う意味ですよ。

CSSの指定で画像表示を変化させる理屈はこんなかんじです。
ロールオーバーで画像が変化するCSSの理屈

まずは「p#goto-profile a 」で1行目に、
background:url(image/11-5_btn2.gif) no-repeat left top; と指定しています。
背景(バックグラウンド)を「image」フォルダ内の「11-5_btn2.gif」という画像ファイルにし、
リピート無しで、水平位置は左、垂直位置は上と指示してあげてます。
2行目で幅を画像の左右の半分に指定してるので、画像の左側しか見えないわけです。

次の「p#goto-profile a:hover」で、
background: url(image/11-5_btn2.gif) no-repeat right top;とし、
背景画像の水平位置を右に指定しています。
ロールオーバー時は背景画像の右側のみ表示すると言うわけです。
背景以外の指定(サイズや文字の色など)は「a」と同じなので書かなくてOK。
(文字色などをロールオーバー時に変えたいときは、変えたいものだけ書きます。)

これは、CSSのショートハンドと言う書き方で、ルールに従って記述を短くする書き方です。
CSSのショートハンドについての詳細は「CSSレイアウトメモ:TIPS [CSSのショートハンド] 」をご覧ください。

で、「p#goto-profile a 」の残りの記述を一通り、上から説明してときますね。
width: 140px;height: 36px;で、幅と高さを決めて、ボタンのサイズに合わせます。
このように a要素の天地左右のサイズを指定したら、必ずdisplay: block;と指定して、ブロック要素にしときます。
a要素はインライン要素なので単独では改行されず(今の場合はp要素で囲んでいるので改行される)、リンクもテキストのみになります。テキストだけでなくボタン全体にリンクを効かせたい時は、必ずdisplay: block;を指定します。
display: blockを指定する理由

さて、残りの指定は文字に関する指定だけです。
color: #FFFFFFで文字色を白にしています。
これは、前に a要素に指定した「color: #FF6666(ピンクに指定)」が生きているため。
このままでは読みにくいので白文字にします。
同時に前の指定での文字のサイズ150%は大きすぎるので、font-size: 15pxで小振りに。 それからline-height: 36pxtext-align: centerで、
背景画像に対して真ん中に文字が来るように調整しています。

いかがでしたか。
今回で、リンクに関する説明は終わりにします。

今までは、とりあえずCSSを紹介するため、手っ取り早いので、CSSをHTMLの<head>内に書く方法で説明していました。
ですが、CSSは「独立した外部CSSファイル」にしてHTMLに読み込ませる方法のほうがぜったい便利です。 (というか、それが標準です。)
てなわけで次回、HTML文書の外にCSSファイルを置く方法を説明します。

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

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

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

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

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

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

スポンサーリンク

コメントの投稿

次が楽しみ!

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

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

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

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


ありがとうございます。

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

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

さかいさま
お役に立ててよかったです。コメントありがとうございます。
古い記事は、ブラウザ等も古いままの記載ですので、順次書き換えて行こうと思っております。
これからもよろしくお願いいたします。
スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
06 | 2017/07 | 08
- - - - - - 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 31 - - - - -
Archive
RSS Link
Profile

yuki★hata

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

メールフォームはこちら

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