注目キーワード

HTMLで画像リンクを貼る方法をサンプルコードで解説

  • 2024.01.31
       
HTMLで画像リンクを貼る方法をサンプルコードで解説

Webサイト制作において画像をクリックすると商品ページや申し込みフォームに遷移させたいといった場合など、画像リンクの用いられる機会は非常に多くあります。本記事では、HTMLで画像をリンクとして設定する方法を、サンプルコードを用いて具体的かつわかりやすく解説します。

目次

画像リンクとは

画像リンクとは、Webページ上で画像自体をハイパーリンクとして機能させることで画像をクリックすると別のWebページに遷移する仕組みです。画像リンクにすることでユーザはリンク先を予想しやすくUXやサイト内外の回遊率の向上に寄与します。

プログラミングの基礎からサイト制作まで
↓実践力が身につくプログラミングスクール↓

ITエンジニアの学校 テックマニアスクール

≫モニター割引キャンペーン実施中！≪

画像リンクの主な用途

ボタン

ページを遷移させるボタン（画像）にリンクを設定することで、ユーザはテキストリンクよりも直感的に操作できるので、サイトの回遊率の向上が期待できます。

広告画像

Webマーケティングには必須ともなっている広告画像にも画像リンクが用いられています。クリック率の向上に大きく貢献します。

縮小画像の拡大表示

サイズの大きい画像を何枚も載せるとページの視認性が悪くなるのに加えてページが重くなることもあります。そういった場合に、縮小画像の拡大表示にリンクを用いて別ページに遷移させる方法をとることで改善を図れます。

画像リンクを貼る上での注意点

alt属性を使用する

Googleなどの検索エンジンにおいて、画像リンクもテキストリンクと同様に認識されますが、テキストリンクに比べて解析が難しくなるので画像リンクを用いる際は必ず「alt属性」を使用し、適切な値を設定するのが望ましいです。

alt（alternative）属性とは、画像について説明するテキストを指定する属性であり、検索エンジンの解析や画像が何らかの理由で画像が表示されない（または閲覧できない）場合の代わりに代替テキストとして用いられます。たとえば、目の不自由な人はよくスクリーンリーダーというツールで画像のalt属性を音読します。また、画像の表示に失敗した場合でも表示されます。そのため、画像を見れない読者が理解できるように画像について説明する必要があります。

テキストリンクと併用する

検索エンジンは画像リンクの内容を解析し、SEOにつながります。ただ、画像リンクのみに重要な情報を載せると画像が読み込まれない場合にSEOには効果をもたらしません、そのため、あくまでテキストリンクと併用するようにしましょう。

画像リンクの使い方

a要素の中にimg要素を配置することで画像をリンクに設定できます。

【使用イメージ】

<a href="遷移させたいURL"><img src="画像のパス" alt="テキスト"></a>

アンカー要素

リンクには<a>要素を使います。aは「anchor」の略語です。a要素にはhref属性という、URLを設定する属性を用います。hrefは「hypertext reference」の略語です。

<a href="遷移させたいURL">テキスト</a>

画像要素

<img src="画像ファイルのパス" alt="画像の代替テキスト">

画像ファイルのパスを値に持つsrc（source）属性を指定することで画像を表示することができます。alt（alternative）属性で、画像の代替テキストを指定します。

画像の種類について

画像には「jpg」や「png」「gif」など、いくつか種類があります。なかでも「jpg」は主流ですが、「非可逆圧縮」という圧縮時方法がとられており、呼び出すたびに少しずつ画像が劣化するので、多くのユーザによる閲覧が予測されるWebサイトにはおすすめできません。劣化が起こらない「png」などを使用しましょう。

画像リンクの設定方法【サンプルコード】

ボタン画像をリンクに設定してみました。広告画像や画像の拡大表示も同じ要領で作成できます。

【index.html】

<!DOCTYPE html>
<html>
<head>
 <link rel="stylesheet" href="./style.css">
</head>
<body>
<div>
 <img src="～～～/dog.png" alt="犬" width="150px" height="150px">
</div>
<a href="～～～/detail.html">
 <img src="～～～/shousai.png" alt="詳細を見る" width="150px" height="60px">
</a>
</body>
</html>

【detail.html】

<h2>「ポチ」について</h2>

【実行結果】

別タブで開きたい場合

サンプルコードで紹介したコードでは、同じタブで開かれます。別のタブで開く場合は<a>タグのtarget属性に「_blank」を追加することで、別タブで指定したWebサイトを表示できます。

【index.html】※<body>タグ内部のみ記述しています。

<div>
 <img src="～～～/dog.png" alt="犬" width="150px" height="150px">
</div>
<a href="～～～/detail.html" target="_blank">
 <img src="～～～/shousai.png" alt="詳細を見る" width="150px" height="60px">
</a>

リンク先がページ内である場合

【リンク元のHTML】

<a href="#～～～"></a>

【リンク先のHTML】

<h3 id="～～～"></h3>

別ページの特定部分にリンクする場合

【リンク元のHTML】

<a href="遷移先URL#～～～"></a>

【リンク先のHTML】

<h3 id="～～～"></h3>

スタイルシートで画像の枠線を消す場合

一部のブラウザでは画像リンクに枠線がつく場合があります。この枠線を消すには、スタイルシートで次のように指定します。

【style.css】

a img{
 border:none;
}

（ちなみに）テキストリンクのアンダーラインを消す場合

a{
 text-decoration:none;
}

※特定のリンクにのみスタイルを指定する場合はそのリンクの<a>タグに任意のclass名をつけて個別に指定する必要があります。

【HTML実行コード】

<a class="noline" href="遷移させたいURL">下線なし</a>

【CSS実行コード】

.noline{
　text-decoration:none;
}

リンクからメールソフトを起動させる方法

<a href="mailto:送信先メールアドレス">テキストor画像要素</a>

（メールに件名や本文を入れる場合）

<a href="mailto:address?subject=問い合わせ&amp;body=ご記入ください">

HTMLの勉強方法は？

書籍やインターネットで学習する方法があります。昨今では、YouTubeなどの動画サイトやエンジニアのコミュニティサイトなども充実していて多くの情報が手に入ります。
そして、より効率的に知識・スキルを習得するには、知識をつけながら実際に手を動かしてみるなど、インプットとアウトプットを繰り返していくことが重要です。特に独学の場合は、有識者に質問ができたりフィードバックをもらえるような環境があると、理解度が深まるでしょう。

ただ、HTMLに限らず、ITスキルを身につける際、どうしても課題にぶつかってしまうことはありますよね。特に独学だと、わからない部分をプロに質問できる機会を確保しにくく、モチベーションが続きにくいという側面があります。独学でモチベーションを維持する自信がない人にはプログラミングスクールという手もあります。費用は掛かりますが、その分スキルを身につけやすいです。しっかりと知識・スキルを習得して実践に活かしたいという人はプログラミングスクールがおすすめです。

プログラミングスクールならテックマニアがおすすめ！

ITスキル需要の高まりとともにプログラミングスクールも増えました。しかし、どのスクールに通うべきか迷ってしまう人もいるでしょう。そんな方にはテックマニアをおすすめします！これまで多くのITエンジニアを育成・輩出してきたテックマニアでもプログラミングスクールを開講しています。

＜テックマニアの特徴＞
・たしかな育成実績と親身な教育　～セカンドキャリアを全力支援～
・講師が現役エンジニア　～“本当”の開発ノウハウを直に学べる～
・専属講師が学習を徹底サポート　～「わからない」を徹底解決～
・実務ベースでスキルを習得　～実践的な凝縮カリキュラム～

このような特徴を持つテックマニアはITエンジニアのスタートラインとして最適です。
話を聞きたい・詳しく知りたいという方はこちらからお気軽にお問い合わせください。

関連記事一覧【HTML/CSS】

     

Otherカテゴリの最新記事