【HTML】画像にリンクを設定する方法【基本と応用】

基本的な画像リンクの設定

HTMLで画像をリンクとして使用する基本的な方法は、<a>タグの中に<img>タグを配置することです。

<a href="https://example.com">
    <img src="example.jpg" alt="リンク画像">
</a>

上記のコードでは、「example.jpg」という画像がクリック可能なリンクになります。

リンク先を新しいタブで開くには、target="_blank" を追加します。

<a href="https://example.com" target="_blank">
    <img src="example.jpg" alt="リンク画像">
</a>

メールアドレスへのリンクを画像に設定するには、mailto: を使用します。

<a href="mailto:info@example.com">
    <img src="email-icon.png" alt="メールを送る">
</a>

このリンクをクリックすると、デフォルトのメールクライアントが開きます。

スマートフォン向けに、画像を電話番号のリンクにすることも可能です。

<a href="tel:+81123456789">
    <img src="phone-icon.png" alt="電話をかける">
</a>

画像をクリックした際に、ファイルをダウンロードさせるには download 属性を使用します。

<a href="example.jpg" download>
    <img src="download-icon.png" alt="画像をダウンロード">
</a>

GoogleマップのURLを取得し、それを画像のリンクに設定することもできます。

<a href="https://www.google.com/maps/place/東京駅" target="_blank">
    <img src="map-icon.png" alt="地図を開く">
</a>

ページ内の特定の場所へジャンプするリンクを画像に設定することもできます。

<a href="#target-section">
    <img src="arrow-icon.png" alt="ページ内リンク">
</a>

そして、ジャンプ先には以下のように id を設定します。

<h2 id="target-section">ここがジャンプ先</h2>