画像にリンクを付ける - HTML

imgタグをaタグで囲むだけ

a>img

<a href="http://google.com">
    <img src="google.jpg" alt="Googleへ">
</a>

画像の下のテキストも含めてリンクとする

画像だけだと、それがリンクなのかがわからないため、テキストを表示するとよい

aタグの中にテキストを表示することで、画像とテキストがリンクになる

a>div>img<p

<a href="http://google.com">
    <div>
        <img src="google.jpg" alt="Googleへ">
    </div>
    <p>Googleへ行く</p>
</a>

---

以下、テクニックが紹介されていた

画像にカーソルが当たっているときは透過する

読んでいる本の書き方と自分で考えた書き方に違いがあったため、書いておく。

→ 同じ動作をしていると思っていたけど、少し違っていた。

参考にしている本

a:hover img {
    opacity: 0.8;
}

<a href="http://studio947.net">
    <div>
        <img src="../../images/image0320.jpg" width="396" height="292" alt="積み木">
    </div>
    <p>カラフルな積み木のセット</p>
</a>

画像のみではなく、aタグも含めた範囲にカーソルがある場合、画像が透過する！！

自分で考えた書き方

.img-link:hover {
    opacity: 0.8;
}

<a href="http://studio947.net">
    <div>
        <img src="../../images/image0320.jpg" width="396" height="292" alt="積み木" class="img-link">
    </div>
    <p>カラフルな積み木のセット</p>
</a>

画像の範囲にカーソルがある場合、画像が通過する

この書き方だと、画像の範囲だけしか適用されない！！テキスト(カラフルな積み木)にカーソルを当てても画像は透過されなかった

---

子孫セレクタを使った記述

参考にしている本の書き方でのimgの部分が子孫セレクタ

今回の場合、スタイルを適用したいのは、imgタグ。

a:hover img {
    opacity: 0.8;
}

上記のスタイルはaタグにカーソルが当たっているときに、imgタグに対してスタイルを適用するって言う意味になっている。

※ 子孫スタイルを使うときにはその要素の中に入っていないといけないことに注意。