HTML初心者でもわかる！画像リンクの作り方をゼロから解説
山崎講師
こんにちは。ゆうせいです。
今回は、新人エンジニアさん向けに「画像リンクの作り方」についてやさしく、ていねいに解説していきます。
「画像リンクって、どうやって作るの？」
「imgタグとaタグって何が違うの？」
そんな疑問をスッキリさせましょう！
画像リンクとは？
まずは基本の確認です。
画像リンクとは、画像をクリックすると別のページにジャンプするリンクのことです。たとえば、バナー広告や、会社のロゴをクリックするとトップページに戻るような仕組みがそれにあたります。
HTMLでは、これを作るには2つのタグを組み合わせます。
imgタグ（画像を表示する）aタグ（リンクを作る）
この2つを組み合わせることで、クリックできる画像が作れるというわけです。
画像リンクの基本構文
まずは一番シンプルな例を見てみましょう。
<a href="https://example.com">
<img src="logo.png" alt="Exampleサイトのロゴ">
</a>
解説します！
| タグ | 意味 | 備考 |
|---|---|---|
<a> | 「リンクを作る」タグ | hrefにリンク先のURLを書く |
<img> | 「画像を表示する」タグ | srcに画像のパスを書く。altは画像が表示されないときの代替テキスト |
このように、画像タグ（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に入れるパスにも注意が必要です。
| パターン | 例 | 説明 |
|---|---|---|
| 絶対パス | https://example.com/img/logo.png | 完全なURL。外部サイトでも使える。 |
| 相対パス | img/logo.png | 現在のファイルを基準にしたパス。サイト内でよく使う。 |
例えるなら、絶対パスは住所、相対パスは道案内みたいなものです！
よくあるエラーと対策
| エラー内容 | 原因 | 対策 |
|---|---|---|
| 画像が表示されない | パスが間違っている | srcのスペルやパスをチェック |
| 画像の代替テキストが出る | 画像ファイルが存在しない | altで意味が伝わるか確認 |
| リンクが開かない | hrefの書き間違い | URLのスペルを見直そう |
| 枠線がついている | aタグに画像だけ入れた | CSSでborder: noneを指定 |
画像リンクを動的に作る方法（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
まとめ：画像リンクの作り方
| 項目 | ポイント |
|---|---|
| 基本タグ | aタグとimgタグの組み合わせ |
| クリックできる画像 | <a><img></a> の構造にする |
| パス指定 | 相対パスと絶対パスを正しく使い分ける |
| CSS活用 | サイズ調整やデザインはCSSで！ |
| エラー回避 | altやborderの工夫が大事 |
今後の学習ステップ
- HTMLの基本タグ（
a,img,divなど）をしっかり身につけよう！ - CSSで画像の見た目を整える練習をしよう！
- JavaScriptと連携して動的な画像リンクも扱えるようにしよう！
- 実際のWebページで、どんなふうに画像リンクが使われているか観察しよう！
もし「SVG画像を使いたい」や「画像にホバーエフェクトをつけたい」など、もう一歩進んだことに挑戦したくなったら、いつでも聞いてくださいね！
セイ・コンサルティング・グループの新人エンジニア研修のメニューへのリンク
投稿者プロフィール
