Web漫画【2】HTMLってどんなものかみてみよう！

前回のWeb漫画、「Web漫画【1】ホームページって何からできてるの？」の続編です！漫画を見てホームページの事をちょっとでもわかってもらえたら嬉しいです。

ブラウザからみる、HTML文書

どのブラウザでも今見てるホームページのHTMLをみる事ができます！試しにHTMLってどんなものか見てみてください。

ブラウザからHTMLを見る方法は、見たいホームページ上で右クリックします。そして、でてきたメニューの中から「ソースを表示」みたいなのがあるので、それをクリックしたらでてきます！

画像がある場所などでクリックしてもそのメニューはでてこないので、何もないところで右クリックしてください。

なんかすっごいわけわかんない英字やタグがズラリと並んでると思います・・・。こんなの自分にも書けるのか！？とか不安に思われるかもしれません。でも大丈夫！お勉強続けていったら誰でも書けるようになりますよ！（英語が大の苦手なわたしでもできたんだから！）

Web漫画裏話

髭のついてるクマの名前は「クマック博士」です。なぜか、胴体が無い。なぜでしょう。１話目から見るとその謎は解けますw ホームページに詳しいクマのおっさんです。

もう一人のクマの名前は・・・・ありませんw 募集中です！候補に「森のクマさん」とありましたが残念ながら却下されました。もうただの「クマ」でいいかな～とか思う今日この頃。

漫画読むのは好きだけど、書いた事なくて、やってみたら面白かったので２話もつくりました！３話目も作れるように頑張ります！

関連シリーズ

• Web漫画【1】ホームページって何からできてるの？
• Web漫画【2】HTMLってどんなものかみてみよう！

関連リンク

• タグ？属性？HTMLの用語を理解しよう

Webコラム ＞ Web漫画【2】HTMLってどんなものかみてみよう！

タグ？属性？HTMLの用語を理解しよう

ホームページの事をネットで調べるにしても、専門用語で書かれているサイトが多くて難しいですよね。そんなサイトも難無く理解できる様に専門用語やHTMLの基礎知識を身につけてみましょう。

HTMLって何？

ホームページの文書をブラウザなどのコンピューターに理解してもらうために書くものです。

ホームページに表示させたい文書に意味付けする事ができます！例えばリンクなんかもそうですね！テキストがリンクとしてブラウザに理解してもらえる様になるので、クリックしたら別のページに飛ぶ事ができます！

HTMLの書き方の基本

<要素名>内容</要素名>

HTMLの書き方の基本はこんな感じに書きます。まだHTMLを書いた事無い人は過去記事の「リンクの貼り方｜アメブロではじめてのHTML」で１度HTMLを書いてみたらわかりやすいかもしれません。

HTMLはテキストなどの内容をタグ（< >）という標識・印で囲って、内容に意味付けしていきます。

タグのはじまりを開始タグと言い、タグの終わりを終了タグと言います。終了タグには「<」の後に「/（スラッシュ）」をひとつ入れて、終了を表します。

意味付けができると書きましたが、その意味の部分を「要素名」に書きます。例えばリンクにしたい場合は、リンクという意味の要素名は「a」なので、「<a>内容</a>」という風に書きます。

HTMLはタグで印（マーク）付けして書く、マークアップ言語の１つです。

HTMLの正式名称は、「HyperText Markup Language（ハイパーテキスト マークアップ ランゲージ）」といいます。リンク（ハイパーリンク）ができるテキスト（ハイパーテキスト）を持つ事からこういう名前がつきました！

マークアップしてない状態

画像の様にキーボードの「Enter」などでの改行をして文書を書いていっても、ブラウザでは改行されずに、半角スペースが１つ入るだけで、とても見づらいですよね。

アメブロなどのブログサービスでは、Enterでの改行で、改行を示すタグの「<br />」が自動で入る機能がついているので、改行して表示することができます。

マークアップした状態

ここはタイトル、ここはリンクなど、文字のまとまりの意味に合ったタグで囲むことによって、見やすくちゃんと表示できていますね！

タグってよく呼ばれるけど・・HTMLのそれぞれの名称

よく、HTMLの事を「タグ」と呼んだりしますが、それぞれ部分ごとにちゃんと名称がついてます！その正式名称を一応知っておきましょう！

HTMLのそれぞれの名称を図にしてみましたー！こんな感じの名前が実はちゃんとついています。

まず、タグのはじまりが「開始タグ(Start tag)」、タグの終わりが「終了タグ(End tag)」といいます。これらの事を「タグ」と呼びます。

図の中では、例としてリンクのHTMLを書いているのですが、それぞれのタグの中の「a」の部分を「要素名」と言います。

「開始タグ」と「終了タグ」で囲まれている部分を「内容（content）」と呼びます。そしてこの３つの部分全体の事を「要素（element）」と言います。

こういったHTMLで書かれた文書全体の事を「HTML文書」と言います。HTML文書で書かれたテキストファイルは「HTMLファイル」として保存します。

タグのオプション・・属性について

例として、リンクのHTMLを書いてみました。

<a href="http://ameblo.jp/ameba-hp/">アメブロでできるホームページ講座</a>

そして、これをちょっとわかりやすく日本語にしてみるとこんな感じの意味です。

<ここからリンク リンク先はhttp://ameblo.jp/ameba-hp/>アメブロでできるホームページ講座<リンクここまで>

属性のそれぞれの名称と書き方

過去記事の「リンクの貼り方｜アメブロではじめてのHTML」では、「href="http://ameblo.jp/ameba-hp/">」の部分の事を「オプション」と言ってましたが、これにもちゃんとした名称があります。

それぞれの名称を図にしてみたらこんな感じですー！

属性は、開始タグの中の要素名の後に半角スペースを１つ入れてから書いていきます。

例のHTMLの「href」の部分を「属性名」、「http://ameblo.jp/ameba-hp/」の部分を「属性値」と呼びます。

属性名と属性値を「=（イコール）」で結んで、属性値は、「"（ダブルクオテーション）」か「'（シングルクオテーション）」で囲んで、「属性名="属性値"」という形で書きます。そして、これら全体の事を「属性」と呼びます。

属性は複数書く事ができる

過去記事の「画像の貼り方を覚えよう！｜アメブロではじめてのHTML」の「画像を貼るタグ」の様に、属性は複数書く事ができます。

<a href="http://ameblo.jp/ameba-hp/" title="アメブロでできるホームページ講座トップページへ">アメブロでできるホームページ講座</a>

さっきのリンクの要素に属性をもうひとつ増やしてみました！属性と属性の間は半角スペースをひとつ入れて区切って書きます。

ちなみに「title」属性は、要素にタイトルを付ける事ができます。

アメブロでできるホームページ講座

実際に表示してみたらこんな感じです。リンクの上にマウスを重ねてちょっと待つと、「title」属性の値のテキストが枠に囲まれて小さく表示されますよね。

HTML用語では無いのですが、ホームページの見た目の部分の用語で、こういう小さな説明の部分のことをツールチップっていいます！

属性は、ほとんどの要素に使える共通属性（凡用属性）や、その要素に合ったものしか使えない属性があります。

要素も属性も沢山ありますけど、よく使うものは結構限られてくるので、ゆっくり覚えていきましょう！

「タグ？属性？HTMLの用語を理解しよう」のあとがき

なんかいっぱい専門用語がでてきてますが、最初はホントに覚える必要はないですからねー！

わたしも、ホームページ最初に作った頃はこんな言葉知らなかったですし、改めてちゃんと勉強しようと思った時に、色々本買ってみたんですけど、こういう用語が出てきた部分だけ読み飛ばしてましたw

それでもホームページのお勉強を進めてくうちに嫌でもこういう用語にブチ当たるんですよw それでわかんない時に初心者用の本を読み返して覚えました！

いつか用語をちゃんと知る必要がでた時にこの記事をまた使ってもらえたら嬉しいです。

関連リンク

ホームページの基本 ＞ HTMLとCSSの知識をつけてみよう ＞ タグ？属性？HTMLの用語を理解しよう

マウスオーバーで画像を切り替えるCSSを書いてみよう

リンクの貼り方と、画像の貼り方を応用してリンクを画像にしてみましょう！マウスを乗せると画像が変わるやり方も紹介しますね！

画像でリンクさせるタグ

画像でリンクするのはこのタグでできます。

<a href="リンク先URL"><img src="画像のURL" alt="画像の説明" width="画像の横幅" height="画像の高さ" /></a>

リンクを貼るタグの「リンクさせる文字」の所を画像を貼るタグに置き換えてあげれば画像でリンクできるようになります！

１枚の画像を使ってCSSで画像を切り替える方法

よくボタンなんかにマウスを乗せると画像が切り替わるサイトありますよね！このやり方の説明をしますね！

サンプル

サンプルボタン

リンクはページトップに飛びます。

まずは画像を用意しよう

マウスを乗せる前と乗せた時の画像をそれぞれ作ります。２枚の画像は同じ高さ、幅でつくってくださいね！

それから、「作った画像の幅」×「二つ分の高さ」で画像を作成して、上にマウスを乗せる前の画像、下にマウスを乗せた時の画像をそれぞれ配置したものを作ります。

今回私は、140×45（ピクセル）で１個のボタンを作ったので、２つのボタンを１枚の画像にしたら、140×90（ピクセル）になりますね！

フリー提供素材

画像が無いよーって方はこちらの画像を使ってみてください！

女の子用にピンクも作りましたー。お好きな方をどうぞ！

CSSで画像切り替えのHTMLとCSS

HTML

<a href="リンク先URL" class="クラス名">リンクテキスト</a>

CSS

a.クラス名{
display:block;
width:画像の横幅;
height:最初に表示させたい画像分の高さ;
background-image:url(画像のURL);
text-indent:-9999px;
}

.クラス名:hover{
background-position:left bottom;
}

凄い書く事がふえましたね・・・。CSSも登場しました！このHTMLとCSSの説明を書いていきますね！

リンクのHTMLを書こう

まずは普通のリンクを貼るタグを書きます。

今回のサンプルではページトップにリンクが飛ぶようにするので、herfの値を「#（ハッシュ）」にしています。

<a href="#">サンプルボタン</a>

それから今回はCSSを使ってリンクの文字が画像になるように装飾していきます。

CSSからどのリンクを装飾するのかをわかるようにするために、タグに名前を付けてあげます。タグに名前を付けるのは、「class（クラス）」属性を使って付けます。

<a href="#" class="sample-button">サンプル</a>

今回私は「sample-button」というclass名（タグの名前）を付けました。

class名は自分で好きな名前を付ける事ができます！class名を付けるポイントは、class名だけ見てその名前がついているタグがどの部分かが分かる様に名前を付けてあげると良いです。

例えば、ヘッダー（ページ上部）のナビゲーションリンクなら「header-navi」などと付けてあげます。

CSSで装飾していこう

さっきのリンクのHTMLをボタン画像として装飾する部分は、CSSで書いていきます。ブログ記事を保存して、CSS編集ページに行ってください！

CSSの書き方

何に{
何を:どう装飾するか;
}

CSSはこんな感じに書いていくのですが、これに当てはめて、さっきの「sample-button」に「ボタン画像」として装飾するCSSを書いていきます。

どこを装飾するのか書いていこう

まず「何に」部分ですね！ここには「どの要素（どのタグの部分）を装飾するか」を書いていきます。これはもちろん「sample-buttonというクラス名がついたaタグ」ですよね！CSSでこれを書く時はこんな感じに書きます。

a.sample-button{
何を:どう装飾するか;
}

最初の「a」の部分は「a要素（aタグ）」って意味です！その後の「.sample-button」は「sample-buttonというclass名」って意味です！CSSでclass名を書くときは、最初に「.（ドット）」を１つ入れてclass名を書きます。

ちなみに、この「何に」の部分の事をセレクタといいます！

これでCSSの「何に」のセレクタ部分が書けました！次は「何を」の部分ですね！

CSSでボタン画像を背景として表示してみよう

a.sample-button{
background-image:どう装飾するか;
}

CSSで画像を表示させるのには、主に「背景画像」として表示させます。背景画像はCSSでは「background-image」と書きます。

次は「どう装飾するか」の部分ですね。ここに背景画像のURLを書いて、「この画像で装飾する」と指定してあげます。

a.sample-button{
background-image:url(http://stat001.ameba.jp/user_images/20120728/00/ameba-hp/e3/b6/p/o0140009012102314574.png);
}

CSSで画像のurlを書くときは「url(画像のURL)」という風に書きます。

background-imageで装飾した状態

サンプルボタン

画像がちょっとしか表示されてないですねー。リンクのテキストも見えてて不格好です。

画像が全部表示されるよう表示する大きさを調整しよう

画像が全部表示されるようにするために、画像が全部表示されるようにCSSを書いてみましょう。

「何を:どう装飾するか;」という部分は、「{」と「}」内に何個でも書いていけます。思い通りの装飾になるように追加していきましょう！

a.sample-button{
background-image:url(http://stat001.ameba.jp/user_images/20120728/00/ameba-hp/e3/b6/p/o0140009012102314574.png);
display:block;
width:140px;
height:45px;
}

まず、「display:block;」のところなんですが、「a要素」はCSSで何も指定していない状態だと、タグの内容部分（この場合「サンプルボタン」のテキストです）の大きさしか持たない「インライン要素」なので、これを「ブロック要素（block）として表示（display）する」っていう指定です。「display:block;」がないと、「width」や「height」を書いても大きくなりません。

ちょっと意味がわからないですよねw これは後々詳しい説明の記事を書くので、今は「aタグの大きさを変える魔法のCSS」と覚えてて下さい。

それから、「width」に画像の横幅、「height」に最初に表示させる画像分の高さを書きます。

「width」や「height」は前の記事に書いた「画像を貼るタグ」でもでてきましたよね！ここの部分は、HTMLでは「属性」といいますよね！CSSでは「プロパティ」といいます！

プロパティに対して「どう装飾するか」の部分は「値」といいます！

さっきからでてきる専門用語をまとめて、CSSの書き方に当てはめてみると、「セレクタ{プロパティ:値;}」になりますね！

aタグの領域を指定した状態

サンプルボタン

これでボタンが全部見えるようになりましたね！でもまだ「サンプルボタン」のテキストが表示されていて不格好ですよね・・・。

テキストを見えない様にしよう

テキストを見えない様にするテクニックは色々あるのですが、今回はよく使われるテキストを画面の外に配置して見えないようにするやり方です。

a.sample-button{
background-image:url(http://stat001.ameba.jp/user_images/20120728/00/ameba-hp/e3/b6/p/o0140009012102314574.png);
display:block;
width:140px;
height:45px;
text-indent:-9999px;
}

「text-indent」はテキストの１行目をインデント（字下げ）するっていう意味です！

普通はこんな感じに１行目だけ余白を空けて右側に字下げをしたい時に使います。値が「-（マイナス）」の場合は逆に左側にインデントされます。

text-indentでテキストを飛ばした状態

サンプルボタン

これでボタンらしくなりましたね！あとはマウスを乗せた時に画像が切り替わるCSSを書くだけです！あともう少し！

ちなみに「text-indent」で文字が見えなくなっていますが、実はこんな感じに画面上には表示されませんが見えない所に存在しています。

マウスオーバー時のCSSを書いてみよう

「マウスオーバー」とは、要素の上にマウスが乗っかった時の事や、その時に画像や色が切り替わる効果の事です。今回だったらボタン画像（a要素）にマウスが乗った時に画像を切り替えたいですよね。

a.sample-button{
background-image:url(http://stat001.ameba.jp/user_images/20120728/00/ameba-hp/e3/b6/p/o0140009012102314574.png);
display:block;
width:140px;
height:45px;
text-indent:-9999px;
}

マウスオーバー時のa.sample-button{
マウスオーバー時の装飾
}

マウスオーバー時のCSSを書くときは、「セレクタ（何にの部分）」が「マウスオーバー時のa.sample-button」になるので、セレクタが変わる時は、こんな感じに「何に{何を:どう装飾するか;}」を別で書いていきます。

マウスオーバーのセレクタのの書き方

マウスオーバー時のセレクタは、「指定要素:hover」と書きます。「:hover（ホバー）」っていう部分が「マウスオーバー時」っていう意味ですよ！今回の場合、「指定要素」の部分は「a.sample-button」になりますね！

a.sample-button:hover{
}

さっき書いたCSSの下にこんな感じで書いていってください。

マウスオーバーの装飾を書いていこう

a.sample-button:hover{
background-position:left bottom;
}

背景の位置を指定するセレクタの「background-position」を書きます。

「background-position」の値の書き方は、「水平方向の位置（横）、垂直方向（縦）の位置」の順番で書きます。今回は背景画像の位置を「水平方向の位置＝背景画像の左辺（左）」「垂直方向の位置＝背景画像の底辺（下）」とするので、「left bottom」と書きます。

何かわかりずらいですよねー。なんで背景位置をかかなきゃいけないの？って思うかもしれません。これもちゃんと説明を下に書きましたー！

ちなみにCSSでは、値が２つ以上ある時は、値と値の間を半角スペースを１つ入れて区切って書きます。

マウスオーバー時に画像を切り替えるしくみ

今回のやり方では、ボタンの画像を背景画像として表示させてましたね！実はマウスオーバーした時に、背景画像を上にスライドさせて、見えてる部分を変えて、画像が切り替わっているように見せているだけなんです！

ですので、背景位置を変える「background-position」というプロパティを使いました！

実際の表示はこんな風にうごきませんけどw

画像の位置の変化をわかりやすくGIFアニメにしてみましたー！

ちなみに、こういった１枚の画像を使ってCSSで背景のポジション（位置）を変えて別々の画像の様に表示させるテクニックの事を「CSS Sprite（シーエスエス・スプライト）」といいます！

「a.samplebutton」のセレクタでCSSを書いた時は「background-position」を指定してませんよね！指定していなかった時は、「left top」の値が適応されます。

「a.samplebutton:hover」（マウスオーバー時）の時だけ、「a.samplebutton」で書いたCSS（装飾）プラス、「background-position:left bottm」として表示されます！

マウスオーバーで画像が切り替わるリンク完成！

色々書く事が多かったけど、マウスオーバーで画像切り替えリンクが完成しましたー！やったねー！

サンプルボタン

HTML

<a href="#">サンプルボタン</a>

CSS

a.sample-button{
background-image:url(http://stat001.ameba.jp/user_images/20120728/00/ameba-hp/e3/b6/p/o0140009012102314574.png);
display:block;
width:140px;
height:45px;
text-indent:-9999px;
}

a.sample-button:hover{
background-position:left bottom;
}

アメブロの方だけ！CSSをHTMLの中に書いてみよう！

実は、CSS編集ページじゃなくても、HTMLのタグの中にCSSって書けるんですよ。知ってました？なんとなく知ってるかもしれませんが、実際にやってみましょう！

まず、さっき書いたCSSの部分を全選択して、切り取ります。それから最初に書いたリンクの記事の編集ページへ行きましょう！

ブログの記事の編集ページに行ったら、ブラウザのアドレスバーの中身を全部消してから、アドレスバーにさっきのCSSをペーストして下さい。それからまたアドレスバーの中身を全選択して切り取りかコピーをします。

ちょっと画像じゃわかりづらいですけど、ペーストしたCSSの文字の改行が全部なくなって１行になりました！改行を消す時はブラウザのアドレスバーが便利ですね！

このままだと、HTMLではテキスト（文字）として認識してしまうので、これをCSSとして認識してもらうために、<style>タグで囲って下さい。

<style>a.sample-button{background-image:url(http://stat001.ameba.jp/user_images/20120728/00/ameba-hp/e3/b6/p/o0140009012102314574.png);display:block;width:140px;height:45px;text-indent:-9999px;}a.sample-button:hover{background-position:left bottom;}</style>

<a href="#">サンプルボタン</a>

<style>タグで「ここからここまでスタイルシート言語（装飾用の言語）で書かれてますよー」という風に伝えているのですが、スタイルシート言語はCSS以外にもあるので、「これはCSSですよー」というのを伝えるために「type」属性を書きます。

<style type="text/css">a.sample-button{background-image:url(http://stat001.ameba.jp/user_images/20120728/00/ameba-hp/e3/b6/p/o0140009012102314574.png);display:block;width:140px;height:45px;text-indent:-9999px;}a.sample-button:hover{background-position:left bottom;}</style>

<style>タグはアメブロなど、HTMLが満足にいじれないブログなどだけで使う様にして、できるだけCSSはCSS専用の場所（ファイル）に書くようにしてくださいね！

アメブロで、記事内にCSSを書く時は、「style」要素の内容部分（コピペしたCSSの部分）を「<!-- 」と「 -->」で囲いましょう！

<style type="text/css"><!-- a.sample-button{background-image:url(http://stat001.ameba.jp/user_images/20120728/00/ameba-hp/e3/b6/p/o0140009012102314574.png);display:block;width:140px;height:45px;text-indent:-9999px;}a.sample-button:hover{background-position:left bottom;} --></style>

２枚の画像を使ってCSSで画像を切り替える方法

２枚の画像・・切り替わる前の画像と切り替わった後の別々の画像を使ってCSSで切り替える方法です。

あまりオススメはできないのですが、できるっちゃできるので、１枚の画像にするのが難しい場合はこの方法でやるのも良いかもしれません。

フリー提供素材

マウスオーバー時の背景画像を変更して切り替える方法

HTML

<a href="リンク先URL" class="クラス名">リンクテキスト</a>

CSS

a.クラス名{
display:block;
width:画像の横幅;
height:画像の高さ;
background-image:url(画像のURL);
text-indent:-9999px;
}

a.クラス名:hover{
background-image:url(マウスオーバー時の画像のURL);
}

サンプル

サンプルボタン

サンプルのボタンにマウスを乗せてみて下さい。この書き方だと、マウスオーバーした時に一瞬画像がパチって消えちゃうんですよね。

マウスオーバー時は、「マウスオーバーした→マウスオーバー（:hover）のCSS・背景画像を読み込む→表示」みたいな感じでブラウザが頑張ってくれてます。

画像を読み込むのに時間がかかるので、そのタイムラグで一瞬消えちゃいます。１回読み込んでしまったらブラウザがキャッシュ（記憶）するので、当分はパチってならないんですけどね。

２つの要素を使い、表示・非表示で画像を切り替える方法

HTML

<div class="クラス名"><a href="リンク先URL">リンクテキスト</a></div>

CSS

div.クラス名{
display:inline-block;
background-image:url(画像のURL);
}

div.クラス名 a{
display:block;
width:画像の横幅;
height:画像の高さ;
background-image:url(画像のURL);
text-indent:-9999px;
}

div.クラス名 a:hover{
background-image:url(マウスオーバー時の画像のURL);
}

サンプル

この方法だったらパチッと画像が消える事が無いので、見た目的にはこっちのやり方の方が良いかもしれません。

ただ、HTMLの要素（タグ）が無駄に増える事と、CSSのセレクタも無駄に増えましたよねー。あんまり無駄な要素やセレクタを増やすのは後々編集する時分かりづらくなっちゃうので避けたいところですね。

表示・非表示で画像を切り替わるしくみ

HTMLでは、「div」のタグとタグの中に「a」タグがありますよね！画像でイメージするとこんな感じにdivの上にaが乗っかってる感じになってます。

マウスオーバーする前は「a」タグには背景をCSSで指定してないですよね！CSSで背景を指定していない要素は背景は透明になります！それで、下にある「div」に指定してある背景の画像が表示されます。

マウスオーバーした時は、「a:hover」に背景を指定してますよね！上にある「a」の背景画像で「div」の背景画像が隠れて、画像が切り替わっているようにみえてます！

「div」の画像は隠れてるだけで存在してるので、画像はパチっと一瞬消えるっていうのが無くなります！

「CSS・プロパティ・何それ？？」頭痛くなっちゃった人へのあとがき

もしこの記事を最後まで読んでくださった方がおられるのならば、お礼を言いたいです。ありがとうございます。

前にも書きましたが、最初は専門用語なんて覚えなくてもいいんです！そして間違えた書き方をしても良いと思います！最初から色々勉強しても続かないと（わたしは）思うので、とりあえずタグをバンバン書きましょう！素材も使ってやってください！実用的な素材じゃなくて申し訳ないですが・・・。

今回、マウス乗っかったら画像が切り替わるCSSを３種類紹介したのですが、「結局どれがいいの？」って所ですよね。１番最初に紹介した１枚の画像を使って切り替える方法が１番良い方法です！

画像を作るのが面倒だと思うかもしれませんが、１番表示もタグも綺麗だし、画像を１枚しか使わないのでブラウザに優しいです。（画像沢山使うとその分ブラウザが頑張らなきゃいけないのでホームページが表示するまでの時間が長くなります・・・。ページが重いとか言いますよね。）

でもこの方法が難しかったら後に紹介した方法でやれば良いと思いますよ！これから勉強して１番良い方法でできるよに一緒に頑張りましょー

関連リンク

ホームページの基本 ＞ アメブロでタグの練習をしてみよう！ ＞ マウスオーバーで画像を切り替えるCSSを書いてみよう