HTML

【HTML5】リンクの設定を解説![画像リンク,メールアドレスへリンク]

ライター「みさ」

こんにちは。ライター「みさ」です。

さっそくですが、プログラミングを勉強していて、Web上で【画像をクリックしたら、リンク先へ飛ぶ】なんていう設定をしてみたいと思ったことはありませんか。

今回は、そんな設定をしたいときに、どのような【HTML】コードを記述すれば良いのか⁈を解説していきます。

また、【応用編】として【画像リンクの設定など、リンクの設定に関する知っておいたほうが良いHTML】も合わせて解説していきます。

それでは、始めます。

リンクの設定【基礎編】

ライター「みさ」

まず、リンクの設定【基礎編】です。

基本(ベース)のHTMLコード
<a href=”●●●“>▲▲▲▲▲</a>

リンクの設定【基礎編】として、リンクの設定をするときに使用するHTMLコードの基礎(ベース)の記述方法です。

リンクの設定【基礎編】
アンカータグ<a></a> href 属性を使用して設定します。

<a href=”●●●“>▲▲▲▲▲</a>

※●●●:ファイル名やリンク先のURL[たとえば、book.html][たとえば、https://nomadsite.net]
※▲▲▲▲▲:リンク対象[たとえば、本のファイル][たとえば、ノマド生活]

リンクの設定【基礎編】  例

以上のリンクの設定【基礎編】をベースに、次項ではリンクの設定【応用編】を解説していきます。

リンクの設定【応用編】

ライター「みさ」

次に、リンクの設定【応用編】です。

※【応用編】:5種類

  • 画像リンクの設定
  • 画像を拡大表示する設定
  • メールアドレスへのリンク
  • リンク先ページを別ウィンドウで開きたいときの設定
  • [画像の枠線]を非表示にする

前項でリンクの設定【基礎編】HTMLコードの基礎(ベース)の記述方法を解説しました。

そこで、ココからはリンクの設定【応用編】として、5種類の【HTMLコード】を解説していきます。※一部、CSSを使用するべきところはCSSを使用していきます。

【応用編】のHTMLコードが記述できるようになると、使用範囲がとても広がります。

それでは、始めます。

【HTMLコード】画像をクリックするとリンク先へ飛ぶようにする

画像リンクの設定
画像をクリックするとリンク先へ飛ぶようにする

【基礎編】<a href=”●●●“>▲▲▲▲▲</a>


↓※●●●:ファイル名[たとえば、book.html]
↓※▲▲▲▲▲:リンク対象[画像挿入タグ<img src=”♦♦”>

【応用編】<a href=”●●●”><img src=”♦♦”></a>

【さらに応用編】

【応用編】
<a href=”●●●”><img src=”♦♦”></a>


↓alt属性を利用する

【さらに応用編】
<a href=”●●●”><img src=”♦♦” alt=”■■■”></a>

【HTMLコード】クリックで、画像を拡大表示させたいとき

画像を拡大表示する設定
画像をクリックしたときに、その画像を拡大表示する

前項の
【さらに応用編】を使用していきます。
<a href=”●●●”><img src=”♦♦” alt=”■■■”></a>


↓拡大表示させたい大きさ[たとえば、 width=”150″ height=”100″に拡大させたい]を付け加えます。

<a href=”●●●”>
<img src=”♦♦” alt=”■■■” width=”150″ height=”100″>
                            </a>

【HTMLコード】リンク先がメールアドレスになるように指定する

メールアドレスへのリンク
[リンク先●●●=メールアドレス]となるように設定する

メールアドレスを指定した[リンク対象▲▲▲▲▲]をクリックすると、指定したメールアドレスのメールソフトが起動します

【基礎編】
<a href=”●●●”>▲▲▲▲▲</a>


mailto:★★★@☆☆
↓ ※★★★@☆☆:メールアドレス

↓※▲▲▲▲▲:リンク対象


【応用編】メールアドレスへのリンク
<a href=”mailto:★★★@☆☆“>▲▲▲▲▲</a>

≪補足事項≫

メールの「件名」も設定する方法

メールアドレスのみではなく、その件名まで設定することが可能です。

<a href=”mailto:★★★@☆☆”>▲▲▲▲▲</a>


?subject=件名
↓  ※たとえば、
↓   件名を「メール相談はこちら」とします。

<a href=”mailto:★★★@☆☆?subject=メール相談はこちら“>▲▲▲▲▲</a>

【HTMLコード】リンク先ページを別ウィンドウで開きたいときの設定

リンク先ページを別ウィンドウで開きたいとき
(通常のリンク設定【基礎編】のままだと、現在開いているページがリンク先ページに切り替わってしまいます。)
そこで、現在開いているページを維持したままでリンク先ページを別ウィンドウで開きたいときは、target属性に「_blank」と指定します

【基礎編】
<a href=”●●●”>▲▲▲▲▲</a>


target=”_blank”

【応用編】
<a href=”●●●” target=”_blank”>▲▲▲▲▲</a>

【HTMLコード】画像の枠線を消したいとき ※CSS優先

[画像の枠線]を非表示にする
(通常、画像リンクの設定をすると、画像そのものに枠線が表示された状態になります。)
もし、画像の枠線を消したいとき(非表示にしたいとき)は、<img>にborder属性[枠線の幅をゼロにする:noまたは0]を指定します。

≪例≫
<a href=”●●●”>
<img src=”♦♦” alt=”■■■” width=”150″ height=”100″>
</a>


border=”0″

<a href=”●●●”>
<img src=”♦♦” alt=”■■■”
         width=”150″ height=”100″ border=”0″>
</a>

画像の枠線を非表示にするCSS
※CSS優先

HTMLコードで【<img>にborder属性[枠線の幅をゼロにする:noまたは0]】も良いですが、border属性に関しては、CSSを使用するほうが推奨されています

img{
border-style:none;
}

※基本的には、枠線を非表示にしておくべき。(ブラウザによって表示のされ方が異なるから。枠線があると、ダサイから。)

以上、リンクの設定【応用編】を解説しました。

それでは、さいごにまとめます。

まとめ

ライター「みさ」

【HTML】リンクの設定

まとめ(再結論)

●【基礎編】

基本(ベース)のHTMLコード
<a href=”●●●”>▲▲▲▲▲</a>

●【応用編】

  • 画像リンクの設定 <a href=”●●●”><img src=”♦♦”></a>
  • 画像を拡大表示する設定 <a href=”●●●”>
  • <img src=”♦♦” alt=”■■■” width=”150″ height=”100″></a>
  • メールアドレスへのリンク <a href=”mailto:★★★@☆☆”>▲▲▲▲▲</a>
  • リンク先ページを別ウィンドウで開きたいときの設定 <a href=”●●●” target=”_blank”>▲▲▲▲▲</a>
  • [画像の枠線]を非表示にする ※CSS優先 img{ border-style:none; }

※HTML5.0からは、CSSを使えるなら使おうという流れに感じています。

以上、今回はココまで。

さいごまでご覧いただき、ありがとうございました。

ABOUT ME
みさ
当サイト運営者・ライターをしています。