【html/CSS】画像をリンクボタンにする方法

「画像をリンクボタンにしたいけどどうやるの？」

「imgをaタグで囲ってもクリック範囲が狭い!?広げたいんだけど!?」

画像(img)をリンクボタンにする方法を解説します。

完成形

マウスを乗せると指のマークに変わります。

また、クリック範囲は画像の範囲です。

<style>
.example{
    display: inline-block;
}
.example img{
    display: block;
}
</style>
<a href="#" class="example">
    <img width="200" src="https://csshtml.work/wp-content/uploads/cat.jpg" alt="ねこ">
</a>

HTML

画像をボタンにするにはaタグの中にimgタグ（画像）をいれます。

<a href="#" class="example">
    <img width="200" src="https://csshtml.work/wp-content/uploads/cat.jpg" alt="ねこ">
</a>

imgのalt

imgでaltを空欄にすることがあるのですが、aタグの中にテキストが一切ないとアクセシビリティ的によろしくありません。

aタグの中にテキストがない場合はaltにテキストをいれましょう。

aのhref

aタグのリンク先はhrefに指定します。

クリックしたら大きな画像（元のサイズの画像）を見せたいときはhrefに画像のURLを指定します。imgのsrcと同じ値です。

例）↓クリックすると大きい画像になります。（ブラウザバックで戻れます。）

<a href="https://csshtml.work/wp-content/uploads/cat.jpg" class="example">
    <img width="200" src="https://csshtml.work/wp-content/uploads/cat.jpg" alt="ねこ">
</a>

aのtarget

任意ですが別タブで開かせたいときはaタグに「target="_blank"」を追加しましょう。

CSSありなしの違い

CSSを使わなくても一応画像をボタン（リンク）にはできますが、クリック範囲に違いがでます。

下記左はCSSがないもので、右はCSSがあるものです。マウスを乗せてみて指アイコンに変わる範囲（クリック範囲）を確認してみてください。

右のCSSありのリンクは画像全体がクリック範囲であるのに対して、左のCSSなしのリンクは画像の下側だけ、しかも画像からはみ出た部分もクリック範囲になっています。

画像全体かつ画像だけをリンク範囲にするためにCSSを設定しましょう。

CSS

aタグにdisplay:inline-block（クリック範囲を画像に一致させる）

a{
    display: inline-block;
}

クリック範囲を画像に一致させるには画像を囲っているaタグにdisplay:inline-blockを指定します。

クリック範囲が画像の下側だけになっているのはaタグがインライン要素だからです。

display:inline-blockを指定するとインラインとブロック要素の特徴を兼ね備えた要素になります。

またはdisplay:blockでブロック要素にしつつ、width:fit-contentで幅を子要素（画像）に合わせる方法もあります。

a{
    display: block;
    width: fit-content;
}

imgにdisplay:block（下の空白を消す）

画像の下側を少しはみ出たところもクリックできるようになっています。

これをなくすためにimgにdisplay:blockを指定しましょう。

display:blockはブロック要素にするCSSです。

imgの下の空白はこれで消えます。

【おまけ】htmlだけの画像ボタン

一応CSSを使わずhtmlだけでクリック範囲を画像に一致させることも可能です。

<table>
    <tr>
        <td>
            <a href="#" class="example">
                <div>
                    <img width="200" src="https://csshtml.work/wp-content/uploads/cat.jpg" alt="ねこ">
                </div>
            </a>
        </td>
    </tr>
</table>

imgをdivで囲い、それをaタグで囲むとクリック範囲の縦（高さ）がimgに一致します。

これだけではクリック範囲の横幅が親要素いっぱいに広がってしまいます。

親要素の幅を画像に一致させるためにtableで囲みます。

ただし、tableは本来 表（ひょう）として使うものであり、レイアウト目的で使うものではありません。

なるべくCSSを使いましょう。

【まとめ】画像をボタンにする方法

• aタグの中にimgタグをいれる
• クリック範囲を画像に一致させるためにaタグにdisplay:inline-blockを指定
• 画像の下の空白を消すためにimgにdisplay:blockを指定

以上、画像(img)をリンクボタンにする方法でした。