HTMLで画像をリンクにする方法をサンプルコード付きで解説！
HTMLで画像をリンクにする方法をサンプルコード付きで解説します。ここではHTMLで画像をリンクにし、ページを遷移させたり、画像を拡大表示させたりする方法について解説します。またリンクの枠線の太さをなしにする方法などについても解説します。
HTMLで画像をリンクにしたい
HTMLで画像にリンクを貼り、ページを遷移させたり、画像を拡大表示させユーザーを惹きつけたいといったことがあります。
その方法について以下の項目で解説します。
HTMLで画像をリンクにする方法
HTMLで画像をリンクに貼る通常のパターンについて解説します。
ではまずサンプルコードを用いて、挙動を見てみましょう。
画像をクリックしていただくと、Qumeruマガジンのトップページに遷移することが分かります。
ではサンプルコードの解説を行います。
まず画像をリンクにしたいので、img要素をa要素で囲みます。
そしてa要素のhref属性にURLを埋め込みそのURLページに飛ぶ、もしくは#idなどで、id属性を設定している要素のところへ飛ぶことができます。
HTMLで画像をリンクにし別タブで表示する方法
ブラウザの同じタブで別ページや画像が開いてしまい、ユーザーが「戻る」を頻繁に押さないといけない、もとのページに戻るのが面倒、などの問題が発生する場合に、別タブで開く設定をしておくとユーザビリティを向上させることができます。
HTMLで画像をリンクにし別タブで表示するにはtarget="_blank"を用います。
ではサンプルコードを用いて挙動を確認してみましょう。
画像をクリックしていただくと、別タブでQumeruマガジンのトップページに遷移することが分かります。
ではサンプルコードの解説を行います。
先ほどのHTMLで画像をリンクに貼る通常のパターンに加えa要素の中にtarget="_blank"を設定します。
これだけで遷移したいページを別タブで開くことができます。
画像を拡大表示させる方法
画像をあえて小さく表示させておいて、ユーザを惹きつけ、クリックしたときに画像を拡大表示させたいという時があります。
画像を拡大表示させるのはHTMLのみで可能です。
サンプルコードを用いて挙動を見てみましょう。
画像をクリックすると、画面が拡大表示されることが分かります。
ではサンプルコードの解説を行います。
まずa要素のhref属性に画像を設定します。そしてa要素の中にimg要素を記述しwidthとheightを元の画像より小さめに設定します。
これで画像をクリックした際に画像を拡大表示することができます。
枠線を消す方法
リンクにすると画像に枠線が設定されてしまいます。その枠線を消す方法について解説します。
枠線を消すにはborder="0"を用います。
ではサンプルコードを用いて、挙動を確認してみましょう。
このように分かりづらいとは思いますが、枠線が消えています。
ではサンプルコードの解説を行います。
今まで通りa要素の中にimg要素を記述し、img要素の中にborder="0"を設定します。これで画像の枠線を消すことができます。
まとめ
いかがでしたでしょうか？
HTMLで画像をリンクにするというのは、よく用いられる手法です。
ぜひここで紹介した方法を試してみてください。
