この記事では、HTMLで画像をリンクにする方法を解説します。
画像をリンクにするタグって何？
今回はHTMLで画像のリンクを作る方法について、解説をしていきます！ 画像のリンクは、例えば画像をクリックして記事に飛んだり、より大きな画像として表示させたりするために使われています。
また画像のリンクは、初心者の方が思うよりも簡単に作ることが出来ます。この記事では、以下の内容について解説していきます。
- 画像をリンクにする理由
- aタグの使い方
- imgタグの使い方
- 画像をリンクにする方法
リンクとはなにかから、易しく解説していくのでぜひご覧ください！
- ページタイトルを画像にする場合やクリックでトップページに戻る挙動は画像をリンクとして扱う必要がある
- 画像のリンク化には「aタグ」「imgタグ：を使う
なお、休日やふと空いたすきま時間に収入が増やせるスキルを身につけたい人は、ぜひ「侍エンジニア」をお試しください。
侍エンジニアでは現役エンジニアと学習コーチの2名体制で学習をサポート。月5~10万円の収入獲得を見据え、スキルの習得から仕事の取り方・進め方まで一貫して学べます。
未経験から副業で収入を増やしたい人は、ぜひ一度お試しください。
＼ 給付金で受講料が最大80%OFF ／
画像をリンクにする理由
まずは基本的なことから解説をしていきます。Webサイトを作るとき、ハイパーリンクという仕組みを使って、ページからページに飛ぶことが出来ます。
そしてそのハイパーリンクは、aタグを使って作ることが出来ます。ちなみに画像の表示にはimgタグを使います。ハイパーリンクは文字の他にも今回解説する画像などの要素に適用させることが出来ます。画像をリンクとして扱いたい場面としては、タイトルなどが考えられます。
こちらを見てみてください。
こちらは侍エンジニアのロゴの画像を用意して、実際にクリックをすると侍エンジニアのトップページに飛ぶことが出来ます。ページのタイトルを画像にした場合は、クリックしたらトップページに戻る挙動は、画像をリンクとして扱う必要が出てきます。
また、CSSでは作れないような複雑なボタンなども、画像をリンクとして扱う必要が出てきます。
なお、IT企業への転職や副業での収入獲得に向け、HTMLやCSS以外でどの言語が自分にあうのか、どう学習を進めればいいのかなどがあいまいな人は「プログラミング学習プラン診断」をお試しください。
かかる時間は1分ほど。4つの質問に答えるだけで、あなたにあう言語や学習プランを診断してもらえます。
効率よくスキル習得したい人は、ぜひ一度お試しください。
＼ 4つの質問に答えるだけ ／
aタグの使い方
それでは基本となるaタグの使い方を見ていきましょう。aタグではリンクを作ることが出来ます。こちらのコードをご覧ください。
<html>
<a href="#">ここはボタンになる予定です。</a>
</html>
実行結果
とても簡単なコードですが、「#」となっている部分に移動先のページのURLを指定するだけで、ページを移動することが出来ます。詳しくはこちらの記事をご覧ください。
なお、ITの仕事に興味はあるものの、どの職種が自分にあうのかわからない人もいますよね。そんな人は「ITキャリア診断」をお試しください。
かかる時間はたったの1分。5つの質問に答えるだけで、自分にあうIT職種を診断してもらえます。
自身に適した職種が知りたい人は、手軽に試してみると良いですよ。
＼ 5つの質問に答えるだけ ／
imgタグの使い方
先程はリンクを作るためのaタグの使い方を解説しました。次に、画像を表示させるためのimgタグの使い方を見ていきましょう。こちらのコードをご覧ください。
<html>
<img src="./Parrots.png" alt="Parrots">
</html>
実行結果
こちらもとても簡単なコードですが、src属性に、どこに表示させたい画像があるのかを知らせるだけで画像を表示させることが出来ます。詳しくはこちらの記事をご覧ください。
なお、副業での収入獲得を目指しているものの、どんな仕事が自分に合うかわからない人は「副業診断」をお試しください。
かかる時間はたった1分ほど。5つの質問に答えるだけで、自分にあう副業を診断してもらえます。
自身が取り組みやすい副業で収入を獲得したい人は、ぜひ一度お試しください。
＼ 5つの質問に答えるだけ ／
画像をリンクにする方法
必要な知識について解説を終えたところで、本題の画像をリンクにして扱う方法を解説していきます。こちらのコードをご覧ください。
<html>
<a href="#">
<img src="./Parrots.png" alt="Parrots">
</a>
</html>
実行結果
先程のaタグでimgタグを囲いました。HTMLのコードはほとんど変えていませんが、これだけで画像をリンクにすることが出来ます。見かけ上は先程の実行結果と変わりませんが、実際にブラウザで開いてマウスを乗せてみると、リンクになっていることが分かると思います。
なお、IT企業への転職や副業での収入獲得を見据え、独学でスキル習得できるか不安な人は「侍エンジニア」をお試しください。
侍エンジニアでは、現役エンジニアと学習コーチの2名体制で学習をサポートしてもらえます。
「受講生の学習完了率98%」「累計受講者数4万5,000名以上」という実績からも、侍エンジニアなら未経験からでも挫折なく転職や副業収入の獲得が実現できますよ。
＼ 給付金で受講料が最大80%OFF ／
まとめ
この記事では画像をリンクにする方法について解説してきました。画像をリンクにする方法は分かって頂けたでしょうか？
画像を表示するためにはimgタグを使い、それをaタグで囲むだけのシンプルなものでしたね。aタグで囲むと、文字だけではない要素をリンクにできるということを覚えておきましょう。
