HTMLリンクタグの使い方が一目でわかる!3つの便利な知識も紹介

HTMLにおけるリンクの作り方について、HTML初心者向けに解説します。

※HTMLとは何かがあまり理解できていない人は、HTMLについて初心者向けに解説した記事をご覧ください。

本記事を読めば、HTMLでのリンクの貼り方(タグ)、リンクに色をつける方法、リンクを別タブ(別ウィンドウ)で開くようにする方法、画像をリンクにする方法が理解できるでしょう。

ぜひ最後まで読んで、HTMLでのリンクの作り方を学習してください!

 

HTML リンクタグでリンクを作ろう!

HTMLでリンクを作るには、<a>タグを使います。

<a>タグの使い方は以下のようになります。

アンカーテキストとは、「こちら」や「トップページに行く」「ここをクリック!」など様々な言葉が使われます。

アンカーテキストの例

では、実際にリンクタグを使ってみましょう。

「Googleへ」というリンクをクリックしたら、Googleのトップページ(https://www.google.co.jp/)へ遷移できるようなリンクを作ってみます。

以上のようなHTMLを書くと、以下のようになります。

HTML リンクの例

そして、実際にリンクをクリックすると、Googleのページへ遷移できます。

Googleのページへ遷移後

いかがでしたか?HTMLのリンクタグのイメージができましたか?

次の章からは、HTML リンクタグで使える便利な知識を紹介していきます!

 

\文字より動画で学びたいあなたへ/

Udemyで講座を探す >

HTML リンクに色を付けよう!

HTMLでリンクを作成するときには、一目でリンクだとわかるように色をつけることをお勧めします。

例えば、以下の2つのリンクを並べたとき、下のリンクのように色が付いている方がリンクであることが一目でわかると思います。

2つのリンクを並べた場合

今回は、リンクに色をつけるためにstyle属性を使ってみます。

※style属性とは何かを学習したい人は、style属性について解説した記事をご覧ください。

では、先程と同様にGoogleのトップページへのリンクを作成してみましょう。

すると、以下のようにリンクに色が付きました。

HTML リンクに色が付いた場合

 

HTML リンクを別タブ(ウィンドウ)で開けるようにしよう!

今までの学習してきたリンクの作成方法では、リンク先が別タブ(ウィンドウ)で開きませんでした。

リンク先を別タブ(ウィンドウ)で開くようにするには、target属性というものを使い、「_blank」という値を指定します。

では、Googleのトップページへのリンクを別タブ(ウィンドウ)で開けるようにしてみましょう。

すると、以下のように別タブ(ウィンドウ)で開けるようになります。

別タブ(ウィンドウ)で開けるようになった場合

するt、以下のようにリンク先が別タブで開きます。

別タブ(ウィンドウ)で開けるようになった場合

 

画像をリンクにしよう!

HTMLで画像をリンクにするには、<a>タグの中に<img>タグを配置します。

※<img>タグが理解できていない人は、<img>タグについて解説した記事をご覧ください。

では、下のようにGoogleへという画像(google.png)をクリックするとGoogleのトップページへ遷移するようにしてみましょう。

Googleへという画像

以下のようにHTMLを記述します。

すると、以下のように画像がリンクになります。

すると、以下のように画像がリンクになった場合

Googleトップページに遷移します。

Googleのページへ遷移後

 

いかがでしたか?

HTMLでのリンクの作成方法や色を付ける方法、リンク先を別タブ(ウィンドウ)で開く方法、画像をリンクにする方法が理解できましたか?

リンクを生成するのはHTMLの基本の1つなので、ぜひ覚えておきましょう!