HTMLで画像リンクを作成する方法を簡単に解説

HTMLで画像にリンクを付けるには、<img>タグを<a>タグで囲むことによって実現します。この方法を使用することによって、画像をクリックした際に指定したページに移動したり、画像を拡大表示したりすることが可能です。

<a>タグは「anchor（アンカー)」の略であり、href属性にリンク先のURLを指定します。一方、<img>タグは画像を表示するためのタグであり、src属性に画像ファイルのパスを指定し、alt属性に代替テキストを記述します。

次セクションでは、HTMLで画像にリンクを付ける様々な方法を解説していきます。

• 画像に内部リンクを付ける場合のHTMLコード
• 画像に外部リンクを付ける場合のHTMLコード
• クリックで画像を拡大表示させたい場合のHTMLコード
• ページ内にリンクさせたい場合のHTMLコード
• 別ページの特定部分にリンクさせたい場合のHTMLコード
• 画像の大きさを調整したい場合のHTMLコード

画像に内部リンクを付ける場合のHTMLコード

内部リンクとは、同じウェブサイト内の別ページに移動するリンクのことです。内部リンクを設定する場合は、href属性にリンク先のHTMLファイル名を指定します。

<a href="product.html">
  <img src="button.png" alt="〇〇の商品画像">
</a>

上記のコードでは、button.pngという画像をクリックすると、同じフォルダ内にあるproduct.htmlというページに移動します。別のフォルダにあるファイルにリンクする場合は、href="folder/page.html"のようにフォルダ名を含めたパスを指定する必要があります。

相対リンクと絶対リンクの使い分けについては、以下の記事を参考にしてください。

画像に外部リンクを付ける場合のHTMLコード

外部リンクとは、別のウェブサイトに移動するリンクのことです。外部リンクを設定する場合は、href属性に完全なURL（絶対パス）を指定します。

<a href="https://example.com" target="_blank">
  <img src="banner.jpg" alt="外部サイトへのリンク">
</a>

上記のコードでは、banner.jpgという画像をクリックすると、https://example.comというサイトに移動します。target="_blank"を追加することによって、リンク先を新しいタブで開くことが可能です。

外部サイトへのリンクでは、ユーザーが元のページに戻りやすいよう「別タブで開く設定」を使用することが推奨されます。target="_blank"を使用しない場合は、同じタブでリンク先が開かれるので注意しましょう。

別タブで開く場合の注意点は、以下の記事を参考にしてください。

【PR】プログラミングや生成AIを無料で学べる「コードキャンプフリー」

• 「Pythonマスター講座」

  

• 「ChatGPT基礎講座」

  

クリックで画像を拡大表示させたい場合のHTMLコード

画像をクリックして拡大表示させたい場合は、href属性に画像ファイル自体のパスを指定します。この方法を使用することによって、縮小画像をクリックすると元のサイズの画像が表示されます。

<a href="photo-large.jpg" target="_blank">
  <img src="photo-small.jpg" alt="風景写真">
</a>

上記のコードでは、photo-small.jpgという縮小画像をクリックすると、photo-large.jpgという元サイズの画像が別タブで表示されます。より高度な画像の拡大機能を実装したい場合は、JavaScriptのライトボックス系プラグインを使用する方法もあります。

ページ内にリンクさせたい場合のHTMLコード

ページ内リンク（アンカーリンク）とは、同じページ内の特定の位置に移動するリンクのことです。ページ内リンクを設定するには、リンク先の要素にid属性を設定し、href属性に#とid名を指定します。

<a href="#section1">
  <img src="arrow-down.png" alt="セクション1へ移動">
</a>

<h2 id="section1">セクション1のタイトル</h2>

上記のコードでは、arrow-down.pngという画像をクリックすると、同じページ内のid="section1"が設定された見出しの位置までスクロールします。ページ内リンクは長いページでユーザーを目的の場所へ誘導する際に便利です。

別ページの特定部分にリンクさせたい場合のHTMLコード

別ページの特定部分にリンクさせたい場合は、href属性にリンク先のページのURLと#とid名を組み合わせて指定します。この方法を使用することで、別ページを開いた後に指定した位置まで自動的にスクロールします。

<a href="about.html#team">
  <img src="team-icon.png" alt="チーム紹介へ">
</a>

上記のコードでは、team-icon.pngという画像をクリックすると、about.htmlというページが開き、そのページ内のid="team"が設定された要素の位置まで自動的にスクロールします。外部サイトの特定部分にリンクする場合も、同様にhref="https://example.com/page.html#section"のように記述することが可能です。

画像の大きさを調整したい場合のHTMLコード

画像のサイズを調整したい場合は、<img>タグにwidth属性とheight属性を追加してピクセル単位で指定します。ただし、現在ではCSSで調整する方法が推奨されています。

<a href="detail.html">
  <img src="product.jpg" alt="商品詳細" width="300" height="200">
</a>

上記のコードでは、width="300"とheight="200"を指定することによって、画像を横幅300ピクセル、高さ200ピクセルで表示します。より柔軟なサイズ調整を行いたい場合は、CSSのwidthプロパティやheightプロパティを使用する方法が適しています。

<style>
.product-image {
  width: 300px;
  height: auto;
}
</style>

<a href="detail.html">
  <img src="product.jpg" alt="商品詳細" class="product-image">
</a>

CSSでheight: auto;を指定することによって、画像の縦横比を維持したまま横幅だけを調整できます。レスポンシブデザインを実装する場合は、width: 100%;やmax-width: 100%;を使用して、デバイスの画面サイズに応じて画像サイズを自動調整する方法も効果的です。

【PR】『Python』を学べる企業・個人向けのプログラミングコース

• 「Python基礎・実践研修」

  

• 「オーダーメイドコース」

  

画像リンクを作成する際は、アクセシビリティやSEO、デザインの観点からいくつかの重要な注意点があります。適切に実装することによって、ユーザーにとって使いやすく、検索エンジンからも正しく評価されるウェブサイトを構築できます。

次セクションでは、HTMLで画像にリンクを付ける際の注意点を解説していきます。

• altタグを必ず設定する
• 見た目を整える場合はCSSを併用する
• 画像の種類について

altタグを必ず設定する

alt属性は画像が表示されない場合などに、代替テキストを提供する重要な属性です。画像リンクの場合、alt属性にはリンク先の内容を説明するテキストを記述する必要があります。

<a href="contact.html">
  <img src="mail-icon.png" alt="お問い合わせページへ">
</a>

上記のコードでは、alt属性に「お問い合わせページへ」と記述することによって、画像が表示されない場合でもリンクの目的が理解できます。検索エンジンは画像の内容を直接認識できないため、alt属性を適切に設定することはSEO対策としても有効です。

テキストと画像が隣接してリンクになっている場合は、画像のalt属性を空にすることによって、同じ内容が二度読み上げられることを防ぐことが推奨されます。ただし、画像リンク単体の場合は必ず意味のある代替テキストを設定する必要があります。

見た目を整える場合はCSSを併用する

画像リンクの見た目を整えたい場合は、HTML属性ではなくCSSを使用することが現在の標準的な方法です。古いブラウザでは画像リンクに枠線が表示されることがありますが、CSSで制御できます。

<style>
a img {
  border: none;
}
.logo-link {
  display: block;
  width: 200px;
  height: auto;
}
</style>

<a href="index.html" class="logo-link">
  <img src="logo.png" alt="トップページへ戻る">
</a>

上記のコードでは、border: none;を設定することによって画像リンクの枠線を消し、widthとheightをCSSで指定しています。CSSを使用することによって、ホバー時のエフェクトや余白の調整など、より細かいデザインの制御が可能です。

画像の種類について

ウェブサイトで使用する画像には、JPEGやPNG、GIF、SVG、WebPなどさまざまな形式があり、それぞれに特徴があります。画像リンクを作成する際には、用途に応じて適切な形式を選択することが重要です。

多くのユーザーがアクセスするウェブサイトでは、JPEGの非可逆圧縮による画質劣化が問題になる場合があります。ロゴやボタンなど重要な画像には、PNGやSVG形式を使用することが推奨されます。

レスポンシブデザインを実装する場合は、srcset属性とsizes属性を使用することによって、デバイスの画面サイズや解像度に応じて最適な画像を配信できます。また、WebP形式を使用することで、ファイルサイズを削減しながら高画質を維持することが可能です。

※上記コンテンツの内容やソースコードはAIで確認・デバッグしておりますが、間違いやエラー、脆弱性などがある場合は、コメントよりご報告いただけますと幸いです。

ITやプログラミングに関するコラム

• 
  【AWS】認定資格12種類の一覧や難易度、費用などを解説
• 
  Canvaとは？使い方やアカウント登録などを初心者向けに解説
• 
  git configで設定情報を確認・表示する方法
• 
  「Pythonはやめとけ」と言われる理由と学習するメリット
• 
  Ubuntuのversionを確認する方法

ITやプログラミングに関するニュース

• 
  テンダとシステムエグゼが共催ウェビナー開催、マニュアル作成と申請承認業務のDX化を解説
• 
  つくば市が株式会社PR TIMESと共催で広報PRセミナーを開催、プレスリリースの基礎と効果を解説
• 
  株式会社エネコムなど4社が米子市でeスポーツセミナーを開催、企業間交流で地域活性化を促進
• 
  ウィブル証券株式会社が米国株オプション税金ウェビナーを再開催、投資家の確定申告入門を解説
• 
  株式会社Cake.jpと株式会社関通が共催セミナーを開催、食品ECの勝ち筋とキャラクターコラボ戦略を解説