3分で丸わかり!HTMLで画像をリンクにする簡単な方法とは

HTMLで画像をリンクにする方法がよくわからない
画像をリンクにするタグって何?

今回はHTMLで画像のリンクを作る方法について、解説をしていきます! 画像のリンクは、例えば画像をクリックして記事に飛んだり、より大きな画像として表示させたりするために使われています。

また画像のリンクは、初心者の方が思うよりも簡単に作ることが出来ます。この記事では、以下の内容について解説していきます。

  • 画像をリンクにする理由
  • aタグの使い方
  • imgタグの使い方
  • 画像をリンクにする方法

リンクとはなにかから、易しく解説していくのでぜひご覧ください!

画像をリンクにする理由

まずは基本的なことから解説をしていきます。Webサイトを作るとき、ハイパーリンクという仕組みを使って、ページからページに飛ぶことが出来ます。

そしてそのハイパーリンクは、aタグを使って作ることが出来ます。ちなみに画像の表示にはimgタグを使います。ハイパーリンクは文字の他にも今回解説する画像などの要素に適用させることが出来ます。画像をリンクとして扱いたい場面としては、タイトルなどが考えられます。

こちらを見てみてください。

こちらは侍エンジニアのロゴの画像を用意して、実際にクリックをすると侍エンジニアのトップページに飛ぶことが出来ます。ページのタイトルを画像にした場合は、クリックしたらトップページに戻る挙動は、画像をリンクとして扱う必要が出てきます。

また、CSSでは作れないような複雑なボタンなども、画像をリンクとして扱う必要が出てきます。

aタグの使い方

それでは基本となるaタグの使い方を見ていきましょう。aタグではリンクを作ることが出来ます。こちらのコードをご覧ください。

<html>
    <a href="#">ここはボタンになる予定です。</a>
</html>

実行結果

とても簡単なコードですが、「#」となっている部分に移動先のページのURLを指定するだけで、ページを移動することが出来ます。詳しくはこちらの記事をご覧ください。

HTMLのaタグとは?基本的な使い方やよく使われる属性を解説
更新日 : 2020年3月9日

imgタグの使い方

先程はリンクを作るためのaタグの使い方を解説しました。次に、画像を表示させるためのimgタグの使い方を見ていきましょう。こちらのコードをご覧ください。

<html>
    <img src="./Parrots.png" alt="Parrots">
</html>

実行結果

画像:shutter stock

こちらもとても簡単なコードですが、src属性に、どこに表示させたい画像があるのかを知らせるだけで画像を表示させることが出来ます。詳しくはこちらの記事をご覧ください。

https://www.sejuku.net/blog/81331

画像をリンクにする方法

必要な知識について解説を終えたところで、本題の画像をリンクにして扱う方法を解説していきます。こちらのコードをご覧ください。

<html>
    <a href="#">
        <img src="./Parrots.png" alt="Parrots">
    </a>
</html>

実行結果

画像:shutter stock

先程のaタグでimgタグを囲いました。HTMLのコードはほとんど変えていませんが、これだけで画像をリンクにすることが出来ます。見かけ上は先程の実行結果と変わりませんが、実際にブラウザで開いてマウスを乗せてみると、リンクになっていることが分かると思います。

まとめ

この記事では画像をリンクにする方法について解説してきました。画像をリンクにする方法は分かって頂けたでしょうか?

画像を表示するためにはimgタグを使い、それをaタグで囲むだけのシンプルなものでしたね。aタグで囲むと、文字だけではない要素をリンクにできるということを覚えておきましょう。

Writer

侍テック編集部

株式会社SAMURAI

侍エンジニア塾は「人生を変えるプログラミング学習」をコンセンプトに、過去多くのフリーランスエンジニアを輩出したプログラミングスクールです。侍テック編集部では技術系コンテンツを中心に有用な情報を発信していきます。

あなたの目的に合わせた
SAMURAI ENGINEERの運営サービス

SAMURAI ENGINEER Pro

未経験でも挫折しないプログラミングスクール

詳細はこちら

SAMURAI ENGINEER Plus

日本最大級のサブスク型オンラインITスクール

詳細はこちら

SAMURAI ENGINEER Freelance

「一人で稼げる」スキルを身につける

詳細はこちら