スライドショー

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タグで囲むと、文字だけではない要素をリンクにできるということを覚えておきましょう。

LINEで送る
Pocket

ITエンジニアへ転職したい方におすすめ

自分を評価してくれる企業に転職して年収を上げたい! 自分のスキルにあった独自案件を知りたい!
エンジニアは今もっとも注目されている職業の1つ。エンジニアになって年収を増やしたい方や、あなたのスキルに見合った企業へ転職したいエンジニアの方も多いですよね。

しかし、大手の転職媒体は扱う求人数が多くても、誰もが登録しているので競争率もかなり高くなっています。そのため、あなたの条件に見合った企業を見つけても転職するためには、相応の努力とスキルが必要となります。

こういった媒体では、未経験からエンジニアを目指す方やエンジニア歴2〜3年で転職を考えている方にとって、最適な転職環境とはいえません。

そこでオススメしたいのが、未経験者や若手エンジニア向けの独自案件を多く掲載している「侍ワークス」です。

侍ワークスは、独自案件を多く掲載しているだけでなく、

・応募から就業まで一貫したサポート

・就業後もアフターフォロー

といった経験の浅い方や初めてエンジニアを目指す方にも安心のフォロー体制が整っています。もちろん登録は完全無料!しかも案件を見るだけなら登録も不要です。

まずは、お気軽にどんな求人があるか見てみてください。あなたにピッタリの企業がきっと見つかりますよ! 侍ワークスの求人情報を見る

書いた人

侍テック編集部

侍テック編集部