スライドショー

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

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

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

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

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

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

画像をリンクにする理由

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

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

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

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

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

aタグの使い方

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

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

実行結果

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

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

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

無料でSEからWebエンジニアへ転職しませんか?



侍エンジニア塾では、完全未経験の方から現在SEだけどプログラミングはやっていないという経験者まで、幅広い方々の人生を好転させるプログラミング指導を行ってきました。SEの方とお話していくなかで、

  • システムエンジニアという職業だけどコードが書けない
  • 事務作業が多くスキルがないため将来が不安
  • スクールに通うと完全未経験者と同じスタートになるからレベルが合わない
という、すでに知識があるSEならではのお悩みがあることに気づきました。そんな方におすすめなのが、弊社の「転職コース 」です。

弊社では、マンツーマンでレッスンを行いますので、現在お持ちの知識レベルからカリキュラムを作成いたします。さらにこちらの転職コースは無料で受講を始められて転職成功でそのまま卒業できるというとてもお得なコースとなっています。

既に知識のあるSEといっても転職は年齢が若いほど受かりやすいため、まずは無料体験レッスンで今の現状や理想の働き方について一緒に考えていきましょう。

まずは無料体験レッスンを予約する

書いた人

ryo

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説