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

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

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

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

 

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

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

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

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

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

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

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

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

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

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

 

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

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

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

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

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

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

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

 

HTML リンクを別タブ（ウィンドウ）で開けるようにしよう！

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

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

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

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

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

 

画像をリンクにしよう！

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

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

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

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

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

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

 

いかがでしたか？

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

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

 

WEBデザイン学習者が学ぶべきスキルセット

Webデザイナーを目指すなら

イラレの基本～実践的なテクニックを学ぶ

Photoshopの技術を身につける

動画編集をマスターしよう！