HTMLで画像にリンクを貼る方法7選

画像にリンクを付ける作業は、商品ページ、ポートフォリオ、バナー、ギャラリー、資料ページなど多くのウェブ開発で使われます。見た目だけなら画像を置くだけで済みますが、クリック後の移動先、代替テキスト、読み込み速度、スマートフォンでの押しやすさまで整えると、ユーザーが迷いにくい構造になります。

その中心になるのは、<a>タグでクリック範囲を作り、その中に<img>タグを入れる書き方です。画像の埋め込みとリンクの役割を分けて考えると、レイアウト崩れやアクセシビリティの不足を避けやすくなるのが基本です。

画像リンクの結論と最小構成

画像にリンクを貼る最小構成は、<a href="...">の内側に<img src="..." alt="...">を置く形です。リンク先はhref、画像ファイルはsrc、代替テキストはaltで決まります。

<a href="/web/2387/">
  <img src="/images/sample-banner.jpg" alt="アンカーリンクの解説ページへ移動するバナー">
</a>

結果: 期待される表示は、バナー画像をクリックすると指定したページへ移動する状態です。

公式ドキュメントによれば、MDNのa要素はハイパーリンクを作る要素で、href属性に移動先を入れます。同様に、MDNのimg要素ではsrcとaltが画像表示と代替情報の中心になります。

画像リンクで使う要素と属性の早見表

これらの要素と属性は、画像の埋め込み、リンク先の設定、表示サイズ、読み込み方を分担するのが目安です。そのため、どれか一つだけを暗記するより、役割を表で整理したほうが実装時に迷いにくくなります。

方法1：画像全体をクリックできるリンクにする

最も素直な形は、<a>タグの中に<img>タグを入れる書き方です。この形なら画像全体がクリック範囲になり、バナーやカード型の導線として扱いやすくなります。

ただし、リンク先の内容と画像の意味がずれていると、ユーザーにも検索エンジンにも意図が伝わりにくくなります。そのため、altには画像そのものの説明だけでなく、リンク先を推測できる文脈を含めると自然です。

<a href="/web/2445/">
  <img src="/images/calendar-thumbnail.jpg" alt="カレンダー作成ページへ移動するサムネイル" width="640" height="360">
</a>

結果: 期待される表示は、カレンダー関連のサムネイル画像全体がリンクとして反応する状態です。

この構成はウェブ開発の入門段階でも使いやすい一方、装飾だけの画像には向きません。装飾画像をリンクにするとクリックできる理由が伝わりにくいため、テキストリンクやボタン風の要素と組み合わせる判断も必要になります。

方法2：別タブで画像リンクを開く

外部サイトや資料ページへ移動させる画像リンクでは、target="_blank"で別タブを開く指定が使われます。このとき、rel="noopener noreferrer"を併用すると、遷移先から元ページを操作されるリスクを抑えられますし、ここがポイントです。

一方、同じサイト内の関連記事へ移動するだけなら、同じタブのまま遷移するほうが流れを保ちやすい場合があります。内部リンクの例としては、アンカーリンクの使い方やツリー構造の理解へつなげる設計が考えられます。

<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img" target="_blank" rel="noopener noreferrer">
  <img src="/images/reference-link.jpg" alt="MDNの画像要素リファレンスを別タブで開く">
</a>

結果: 期待される表示は、画像をクリックすると公式リファレンスが別タブで開く状態です。

方法3：ページ内の特定位置へ移動させる

画像をクリックして同じページ内の見出しへ移動させたい場合は、移動先にidを付け、リンク側のhrefに#付きで参照を書きます。長いチュートリアルや画像ギャラリーでは、ページ上部のバナーから目的の説明へ移動できるため、読み進める負担を減らせます。

このとき、idの値は同じページ内で重複させません。重複するとブラウザがどの位置へ移動すべきか判断しづらくなり、保守時にも混乱しやすくなるのがポイントです。

<a href="#gallery">
  <img src="/images/gallery-banner.jpg" alt="作品ギャラリーの位置へ移動する">
</a>

<h2 id="gallery">作品ギャラリー</h2>

結果: 期待される表示は、画像をクリックすると同じページ内の作品ギャラリー見出し付近へ移動する状態です。

関連する実装は、ページ内移動を扱うアンカーリンクの記事と相性があります。ウェブ開発で目次、商品詳細、フォーム位置への誘導を作るときにも同じ考え方を使えます。

方法4：レスポンシブ画像をリンク化する

スマートフォンとPCで同じ画像を使う場合、横幅が固定されたままだと画面からはみ出すことがあるのが一般的です。その対策として、画像にはmax-width:100%とheight:autoを組み合わせ、親要素の幅に合わせて縮むようにします。

その指定は画像タグではなくCSS側に置くと、複数の画像リンクへまとめて適用できます。リンク要素にもdisplay:inline-blockやdisplay:blockを与えると、クリック範囲と見た目の関係を制御しやすくなるのが現実的です。

<a class="image-link" href="/web/2517/">
  <img src="/images/slideshow.jpg" alt="スライドショー作成ページへ移動する画像">
</a>

<style>
.image-link {
  display: inline-block;
}
.image-link img {
  display: block;
  max-width: 100%;
  height: auto;
}
</style>

結果: 期待される表示は、画像が親要素の幅に合わせて縮み、クリックできる範囲も画像サイズに沿う状態です。

この書き方は、スライドショーや一覧カードのように複数の画像を並べる画面で使いやすい構成です。関連するレイアウト例は、スライドショー作成の記事でも応用できます。

方法5：画像リンクにホバーとフォーカスを付ける

画像だけが置かれていると、クリックできる要素なのか単なる装飾なのか判断しづらい場合があります。そのため、:hoverで透明度や影を変え、:focus-visibleでキーボード操作時の枠線を表示すると、操作対象として認識しやすくなると整理できます。

ただし、色の変化だけに依存すると、見え方の違いがあるユーザーへ伝わりにくくなります。outlineやbox-shadowを組み合わせると、視覚的な変化を複数の手がかりで補えます。

<a class="card-link" href="/web/2624/">
  <img src="/images/contact-form.jpg" alt="問い合わせフォーム作成ページへ移動する">
</a>

<style>
.card-link img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  transition: opacity .2s ease, box-shadow .2s ease;
}
.card-link:hover img {
  opacity: .86;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
}
.card-link:focus-visible {
  outline: 3px solid #2563eb;
  outline-offset: 4px;
}
</style>

結果: 期待される表示は、マウスを重ねると画像の見た目が変わり、キーボードで選択したときに枠線が出る状態です。

💡 Tips: outline: noneだけを書くと、キーボード利用者が現在位置を見失いやすくなります。消す場合でも、代替のoutlineやbox-shadowを用意する判断が必要です。

方法6：画像リンクからファイルをダウンロードさせる

画像やPDFを配布するページでは、download属性を使って保存を促すリンクを作れます。この埋め込みは、素材配布、テンプレート配布、説明資料のダウンロードボタンに向いていると理解できます。

一方、download属性の動きは、同一オリジンかどうか、サーバーのContent-Disposition、ブラウザ仕様によって変わる場合があります。確実に保存させたいファイル配布では、サーバー側のヘッダー設定も合わせて確認します。

<a href="/files/sample-template.pdf" download>
  <img src="/images/download-button.png" alt="PDFテンプレートをダウンロードする">
</a>

結果: 期待される表示は、画像をクリックするとPDFファイルの保存が促される状態です。

この使い方では、画像そのものがボタンのように振る舞いると覚えるとよいでしょう。そのため、altには「ダウンロード」やファイル種別を含め、クリック後の動作が想像できる文にするのが自然です。

方法7：picture要素で画像形式を切り替えながらリンクする

高画質な画像を多く扱うページでは、<picture>と<source>を使い、ブラウザが対応する形式を選べるようにできます。リンク化する場合は、<a>タグの中に<picture>全体を入れる構成が扱いやすいです。

この構成では、type="image/avif"やtype="image/webp"で候補を渡し、最後に通常の<img>を置きます。対応しないブラウザでも代替画像が表示されるため、段階的な埋め込みとして使えると考えられます。

<a href="/web/2597/">
  <picture>
    <source srcset="/images/tree.avif" type="image/avif">
    <source srcset="/images/tree.webp" type="image/webp">
    <img src="/images/tree.jpg" alt="ツリー構造の解説ページへ移動する図版" width="800" height="450">
  </picture>
</a>

結果: 期待される表示は、対応ブラウザではAVIFやWebPが選ばれ、非対応時はJPEG画像がリンク付きで表示される状態です。

公式仕様に近い情報を確認したい場合は、WHATWGのpicture要素も参照できます。ウェブ開発で画像容量を調整する場面では、形式の切り替えと表示サイズの両方を合わせて考える必要があります。

alt属性とリンク文脈の考え方

画像リンクでは、altが単なる画像説明に留まらない場合があると言えるでしょう。たとえばバナー画像が「問い合わせフォームへ進む」役割を持つなら、altにもリンク先の目的が伝わる文を入れると理解しやすくなります。

一方、隣に同じ内容のテキストリンクがあり、画像が装飾として添えられているだけなら、alt=""を検討する余地があります。ただし、画像だけがクリック対象になっている場合に空のaltを使うと、支援技術ではリンクの目的が伝わらない可能性があるのが基本です。

初心者がつまずきやすいのは、画像の見た目だけで判断してaltを短くしすぎる点です。「犬の写真」より「ペット相談フォームへ移動する写真」のように、必要な場面ではリンク先の文脈を含めると整理しやすくなります。

内部リンクとして画像を使うときのSEO設計

画像リンクも内部リンクの一種として扱われます。そのため、移動先の内容、周辺テキスト、alt、見出し構造がそろっていると、ページ間の関係を伝えやすくなるのが目安です。

具体的には、フォーム作成へ誘導する画像なら問い合わせフォームの作り方へ、カレンダーUIの画像ならカレンダー作成の記事へつなげるのが自然です。リンク先と画像の内容が一致しているほど、ユーザーの期待と遷移後の内容がずれにくくなります。

ただし、同じ画像を何度も貼り、同じリンク先へ過剰に誘導する設計は読みづらさにつながります。本文の流れに沿って必要な位置へ置き、テキストリンクと画像リンクの役割を分けるほうが実用的です。

カード型レイアウトで画像リンクを使う

記事一覧や商品一覧では、画像、タイトル、説明文をまとめたカード全体をリンク化したくなることがあるのがポイントです。この場合、カード全体を<a>にする設計と、画像だけをリンクにしてタイトルにも別のリンクを置く設計があります。

カード全体をリンクにすると押しやすくなりますが、内部に別リンクやボタンを入れにくくなります。一方、画像とタイトルだけをリンクにすると構造は単純になり、説明文やタグ表示を独立して扱いやすくなるのが一般的です。

<article class="post-card">
  <a class="post-card__image" href="/web/2517/">
    <img src="/images/slider-card.jpg" alt="スライドショー作成ページのサムネイル">
  </a>
  <h3><a href="/web/2517/">スライドショーを作る</a></h3>
  <p>画像を切り替えるUIを作るための基礎を扱います。</p>
</article>

結果: 期待される表示は、カード内の画像と見出しが同じ記事へ移動するリンクとして働く状態です。

この形なら、カード内にカテゴリ名やタグ一覧を足しても構造が崩れにくくなります。ウェブ開発でCMSテーマを作るときにも、一覧カードの設計としてよく採用されますが、これは押さえたい点です。

埋め込み画像のサイズと読み込み速度を整える

画像リンクは見た目の面積が大きいため、ファイルサイズがページ速度に影響しやすい要素です。そのため、実際に表示する寸法に近い画像を用意し、必要に応じてsrcsetやsizesで候補を渡します。

一方、すべての画像に大きな高解像度ファイルを使うと、読み込み量が増えます。ファーストビューでは表示速度を優先し、下部の画像にはloading="lazy"を使うなど、配置に応じて切り替えるのが現実的です。

<a href="/web/2445/">
  <img
    src="/images/calendar-640.jpg"
    srcset="/images/calendar-640.jpg 640w, /images/calendar-1280.jpg 1280w"
    sizes="(max-width: 768px) 100vw, 640px"
    alt="カレンダーUI作成ページへ移動する画像"
    width="640"
    height="360"
    loading="lazy"
    decoding="async">
</a>

結果: 期待される表示は、画面幅に応じた候補画像が選ばれ、下部配置では遅延読み込みされる状態です。

テキストリンクと画像リンクを併用する判断

画像だけでリンク先を伝えきれない場合は、近くにテキストリンクを置くと意味が補われます。視覚的には画像で興味を引き、テキストで移動先を明確にする構成です。

その場合、画像とテキストが同じリンク先を指すなら、リンク文言とaltの重複を調整するのが現実的です。たとえば画像のaltを短めにし、見出しリンク側で詳しいタイトルを示すと、読み上げ時の冗長さを抑えられます。

逆に、画像だけを大きく見せてテキストが離れていると、どこを押せばよいのか分かりにくくなります。クリック対象、説明文、タグ表示の距離を近づけることで、埋め込みコンテンツとしてのまとまりが出ますし、これが一つの目安です。

よくある失敗と修正方針

画像リンクで多い失敗は、<img>だけを書いて<a>タグで囲んでいないケースです。この状態では画像は表示されてもクリックできないため、移動先が必要ならhrefを持つリンク要素で包みます。

そのほか、srcのパス違い、alt不足、target="_blank"とrelの併用漏れも起こりやすい点です。画像が表示されないときは、ファイル名、拡張子、相対パス、公開ディレクトリを順に確認すると原因を絞り込めます。

初心者がつまずきやすいのは、CSSでpointer-events:noneを指定してしまい、リンクが反応しなくなるパターンです。クリックできない場合は、開発者ツールで該当要素のdisplay、position、z-index、pointer-eventsを確認すると整理できます。

WordPressやCocoonで扱うときの注意

WordPressのブロックエディターでは、画像ブロックにリンク先を設定できる場合があります。コードを直接書かなくても、メディア設定からリンク先を選べるため、通常の記事作成ではエディター機能を使う方法もあります。

ただし、Cocoonの親テーマ標準だけで記事を保つなら、独自の子テーマclassへ依存しないほうが移行時の崩れを避けやすくなると理解できます。本文中の装飾は、通常の<a>、<img>、<figure>、<figcaption>と標準的なCSSで成立させるのが扱いやすいです。

このとき、画像リンクの周囲に余白を足したい場合は、テーマ側のブロック余白と個別CSSの両方が影響します。意図しない余白が出る場合は、margin、padding、line-heightを確認してください。

実装前に確認したいチェック項目

画像リンクを公開する前は、見た目だけでなく操作と意味を確認します。クリック範囲、リンク先、代替テキスト、別タブ設定、読み込み速度がそろうと、画像の埋め込みが単なる装飾ではなく実用的な導線になると覚えるとよいでしょう。

• hrefが正しいURLを指している
• srcの画像が公開環境で読み込める
• altがリンク先の目的を補えている
• 外部リンクのtarget="_blank"にrel="noopener noreferrer"がある
• max-width:100%とheight:autoで小さい画面に対応している
• :focus-visibleでキーボード操作時の位置が分かる
• widthとheightで画像領域の目安を渡している
• 画像ファイルが過度に大きくない
• 同じリンク先への過剰な重複がない
• 自分自身の記事URLへリンクしていない

特に押さえたいのは、画像の見た目とリンク先の期待を一致させることです。ユーザーが「この画像を押すと何が起こるか」を自然に予測できる状態なら、ウェブ開発の導線として安定します。

関連記事

• 『HTMLでアンカーリンクを活用する方法10選
• HTMLとJSを使ってカレンダーを作成・更新する方法10選
• HTMLとCSSで手軽に作るスライドショーコピペ12選
• HTMLとツリー構造をマスターする！初心者からプロまでわかる7つの完全ガイド
• HTMLで問い合わせフォームを作成する方法5選！

※本記事は実在のエンジニア複数名で構成される Japanシーモア編集部が、AI支援を活用して作成・校正・公開しています。