画像をリンクにするタグって何？
今回はHTMLで画像のリンクを作る方法について、解説をしていきます！ 画像のリンクは、例えば画像をクリックして記事に飛んだり、より大きな画像として表示させたりするために使われています。
また画像のリンクは、初心者の方が思うよりも簡単に作ることが出来ます。この記事では、以下の内容について解説していきます。
- 画像をリンクにする理由
- aタグの使い方
- imgタグの使い方
- 画像をリンクにする方法
リンクとはなにかから、易しく解説していくのでぜひご覧ください！
画像をリンクにする理由
まずは基本的なことから解説をしていきます。Webサイトを作るとき、ハイパーリンクという仕組みを使って、ページからページに飛ぶことが出来ます。
そしてそのハイパーリンクは、aタグを使って作ることが出来ます。ちなみに画像の表示にはimgタグを使います。ハイパーリンクは文字の他にも今回解説する画像などの要素に適用させることが出来ます。画像をリンクとして扱いたい場面としては、タイトルなどが考えられます。
こちらを見てみてください。
こちらは侍エンジニアのロゴの画像を用意して、実際にクリックをすると侍エンジニアのトップページに飛ぶことが出来ます。ページのタイトルを画像にした場合は、クリックしたらトップページに戻る挙動は、画像をリンクとして扱う必要が出てきます。
また、CSSでは作れないような複雑なボタンなども、画像をリンクとして扱う必要が出てきます。
aタグの使い方
それでは基本となるaタグの使い方を見ていきましょう。aタグではリンクを作ることが出来ます。こちらのコードをご覧ください。
<html>
<a href="#">ここはボタンになる予定です。</a>
</html>
実行結果
とても簡単なコードですが、「#」となっている部分に移動先のページのURLを指定するだけで、ページを移動することが出来ます。詳しくはこちらの記事をご覧ください。
imgタグの使い方
先程はリンクを作るためのaタグの使い方を解説しました。次に、画像を表示させるためのimgタグの使い方を見ていきましょう。こちらのコードをご覧ください。
<html>
<img src="./Parrots.png" alt="Parrots">
</html>
実行結果
こちらもとても簡単なコードですが、src属性に、どこに表示させたい画像があるのかを知らせるだけで画像を表示させることが出来ます。詳しくはこちらの記事をご覧ください。
https://www.sejuku.net/blog/81331
画像をリンクにする方法
必要な知識について解説を終えたところで、本題の画像をリンクにして扱う方法を解説していきます。こちらのコードをご覧ください。
<html>
<a href="#">
<img src="./Parrots.png" alt="Parrots">
</a>
</html>
実行結果
先程のaタグでimgタグを囲いました。HTMLのコードはほとんど変えていませんが、これだけで画像をリンクにすることが出来ます。見かけ上は先程の実行結果と変わりませんが、実際にブラウザで開いてマウスを乗せてみると、リンクになっていることが分かると思います。
まとめ
この記事では画像をリンクにする方法について解説してきました。画像をリンクにする方法は分かって頂けたでしょうか？
画像を表示するためにはimgタグを使い、それをaタグで囲むだけのシンプルなものでしたね。aタグで囲むと、文字だけではない要素をリンクにできるということを覚えておきましょう。
