HTML初心者でもわかる！画像リンクの作り方をゼロから解説

こんにちは。ゆうせいです。

今回は、新人エンジニアさん向けに「画像リンクの作り方」についてやさしく、ていねいに解説していきます。

「画像リンクって、どうやって作るの？」
「imgタグとaタグって何が違うの？」

そんな疑問をスッキリさせましょう！

画像リンクとは？

まずは基本の確認です。

画像リンクとは、画像をクリックすると別のページにジャンプするリンクのことです。たとえば、バナー広告や、会社のロゴをクリックするとトップページに戻るような仕組みがそれにあたります。

HTMLでは、これを作るには2つのタグを組み合わせます。

• imgタグ（画像を表示する）
• aタグ（リンクを作る）

この2つを組み合わせることで、クリックできる画像が作れるというわけです。

画像リンクの基本構文

まずは一番シンプルな例を見てみましょう。

<a href="https://example.com">
  <img src="logo.png" alt="Exampleサイトのロゴ">
</a>

解説します！

このように、画像タグ（img）をリンクタグ（a）の中に入れることで、画像がクリック可能になるのです。

よくあるパターン

パターン1：別サイトへのバナーリンク

<a href="https://news.ycombinator.com" target="_blank">
  <img src="banner.jpg" alt="ニュースサイトへのリンク">
</a>

• target="_blank"をつけると、リンク先が新しいタブで開きます。
• ユーザーを現在のページから離れさせたくないときに便利ですね。

パターン2：画像のサイズを指定する

<a href="https://example.com">
  <img src="logo.png" alt="ロゴ" width="150" height="100">
</a>

• widthやheightを使うと、画像サイズをピクセル単位で指定できます。
• ただし、CSSで指定するのがモダンな方法です。

CSSを使った画像リンクの調整

HTMLの属性だけでは限界があります。見た目を整えるにはCSSを併用しましょう。

<a href="https://example.com">
  <img src="logo.png" alt="ロゴ" class="logo-link">
</a>

<style>
  .logo-link {
    width: 150px;
    height: auto;
    border: none;
  }
</style>

• .logo-linkはクラス名です。
• width: 150px;で横幅だけ指定し、高さはautoで比率維持。
• border: none;は、リンク画像の周囲に変な枠線が出るのを防ぎます。

相対パスと絶対パスの違い

画像リンクを作るときに、srcやhrefに入れるパスにも注意が必要です。

例えるなら、絶対パスは住所、相対パスは道案内みたいなものです！

よくあるエラーと対策

画像リンクを動的に作る方法（JavaScript）

「リンク先を動的に変えたい」という場面では、JavaScriptを使います。

<a id="dynamic-link">
  <img src="logo.png" alt="ロゴ">
</a>

<script>
  document.getElementById('dynamic-link').href = "https://example.com";
</script>

このように、IDを使ってリンク先を書き換えられるのです。

数式：画像サイズの縦横比の保持

画像の縦横比（アスペクト比）を維持するための基本式を紹介します。 高さ=横幅×(元の高さ元の横幅)\text{高さ} = \text{横幅} \times \left(\frac{\text{元の高さ}}{\text{元の横幅}}\right)

（たかさ）＝（よこはば）×（もとのたかさ÷もとのよこはば）

• たとえば、元のサイズが200×100で横幅を100にしたいとき、高さは：
  • 100 × (100 ÷ 200) = 50

まとめ：画像リンクの作り方

今後の学習ステップ

1. HTMLの基本タグ（a, img, divなど）をしっかり身につけよう！
2. CSSで画像の見た目を整える練習をしよう！
3. JavaScriptと連携して動的な画像リンクも扱えるようにしよう！
4. 実際のWebページで、どんなふうに画像リンクが使われているか観察しよう！

もし「SVG画像を使いたい」や「画像にホバーエフェクトをつけたい」など、もう一歩進んだことに挑戦したくなったら、いつでも聞いてくださいね！

セイ・コンサルティング・グループの新人エンジニア研修のメニューへのリンク

投稿者プロフィール

山崎講師代表取締役

セイ・コンサルティング・グループ株式会社代表取締役。
岐阜県出身。
2000年創業、2004年会社設立。
IT企業向け人材育成研修歴業界歴20年以上。
すべての無駄を省いた費用対効果の高い「筋肉質」な研修を提供します！
この記事に間違い等ありましたらぜひお知らせください。

最新の投稿

• 山崎講師2025年6月9日HTML初心者でもわかる！画像リンクの作り方をゼロから解説
• 山崎講師2025年6月9日MySQLの同時接続ユーザー数とは？新人エンジニア向けにやさしく解説！
• 山崎講師2025年6月8日MySQLの「ON DUPLICATE KEY UPDATE」とUPSERTを徹底解説！重複データへのスマートな対応術
• 山崎講師2025年6月8日MySQLのDELETE文とは？データを安全に削除するための完全ガイド