- Webデザイン
- 2017/04/11
HTMLリンクタグの使い方が一目でわかる!3つの便利な知識も紹介
HTMLにおけるリンクの作り方について、HTML初心者向けに解説します。
※HTMLとは何かがあまり理解できていない人は、HTMLについて初心者向けに解説した記事をご覧ください。
本記事を読めば、HTMLでのリンクの貼り方(タグ)、リンクに色をつける方法、リンクを別タブ(別ウィンドウ)で開くようにする方法、画像をリンクにする方法が理解できるでしょう。
ぜひ最後まで読んで、HTMLでのリンクの作り方を学習してください!
HTML リンクタグでリンクを作ろう!
HTMLでリンクを作るには、<a>タグを使います。
<a>タグの使い方は以下のようになります。
1 |
<a href="リンク先のURL">アンカーテキスト</a> |
アンカーテキストとは、「こちら」や「トップページに行く」「ここをクリック!」など様々な言葉が使われます。
では、実際にリンクタグを使ってみましょう。
「Googleへ」というリンクをクリックしたら、Googleのトップページ(https://www.google.co.jp/)へ遷移できるようなリンクを作ってみます。
1 |
<a href="https://www.google.co.jp/">Googleへ</a> |
以上のようなHTMLを書くと、以下のようになります。
そして、実際にリンクをクリックすると、Googleのページへ遷移できます。
いかがでしたか?HTMLのリンクタグのイメージができましたか?
次の章からは、HTML リンクタグで使える便利な知識を紹介していきます!
HTML リンクに色を付けよう!
HTMLでリンクを作成するときには、一目でリンクだとわかるように色をつけることをお勧めします。
例えば、以下の2つのリンクを並べたとき、下のリンクのように色が付いている方がリンクであることが一目でわかると思います。
今回は、リンクに色をつけるためにstyle属性を使ってみます。
※style属性とは何かを学習したい人は、style属性について解説した記事をご覧ください。
では、先程と同様にGoogleのトップページへのリンクを作成してみましょう。
1 |
<a href="https://www.google.co.jp/" style="color: blue;">Googleへ</a> |
すると、以下のようにリンクに色が付きました。
HTML リンクを別タブ(ウィンドウ)で開けるようにしよう!
今までの学習してきたリンクの作成方法では、リンク先が別タブ(ウィンドウ)で開きませんでした。
リンク先を別タブ(ウィンドウ)で開くようにするには、target属性というものを使い、「_blank」という値を指定します。
では、Googleのトップページへのリンクを別タブ(ウィンドウ)で開けるようにしてみましょう。
1 |
<a href="https://www.google.co.jp/" target="_blank">Googleへ</a> |
すると、以下のように別タブ(ウィンドウ)で開けるようになります。
するt、以下のようにリンク先が別タブで開きます。
画像をリンクにしよう!
HTMLで画像をリンクにするには、<a>タグの中に<img>タグを配置します。
※<img>タグが理解できていない人は、<img>タグについて解説した記事をご覧ください。
では、下のようにGoogleへという画像(google.png)をクリックするとGoogleのトップページへ遷移するようにしてみましょう。
以下のようにHTMLを記述します。
1 |
<a href="https://www.google.co.jp/"><img src="google.png"></a> |
すると、以下のように画像がリンクになります。
Googleトップページに遷移します。
いかがでしたか?
HTMLでのリンクの作成方法や色を付ける方法、リンク先を別タブ(ウィンドウ)で開く方法、画像をリンクにする方法が理解できましたか?
リンクを生成するのはHTMLの基本の1つなので、ぜひ覚えておきましょう!
WEBデザイン学習者が学ぶべきスキルセット
Webデザイナーを目指すなら
Webデザイナーのキャリアを未経験からスタートするためのオールインワン講座

Webデザインに挑戦したい人が一気通貫して学べる総合学習コースです。
イラレの基本~実践的なテクニックを学ぶ
【初級〜中級】Illustrator(イラストレーター)でグラフィックデザインをしよう!!ロゴ・印刷物・WEB用素材

グラフィックデザイン・印刷の基礎知識を手に入れて、仕事に役立ててみませんか?
最新のAdobe XDを最短でマスター
【2020年最新版】Adobe XD 手を動かして覚えるUI/UXプロトタイピング。初級から高度テクニックまで全てを学ぶ

機能の紹介や単なる操作方法の説明に終わらせず、実践的な作品制作をしながら機能の完全理解と応用力を育てることに重点を置いたXDマスター講座!
動画編集をマスターしよう!
業界最先端の動画制作テクニックを制覇!Adobe Premiere Pro 完全版

動画制作をはじめたい方へ、短期間で仕事で応用できるほどのスキルアップ技をお届け。
関連記事

フォトショップのぼかし!便利な3つの技を画像で解説!初心者でも即理解
フォトショップで、画像の背景をぼかしたい、文字をぼかしたい…

HTML div styleとは?HTML初心者でも5分でわかる事例解説
HTMLの学習で、div styleというソースコードを目にしたことはあ…

HTML placeholderとは?初心者向けに解説&使い方もわかる!
HTMLにおけるplaceholderについて、Web開発経験のある筆者がHTM…

図解で簡単!CSSの書き方4つが初心者でも5分で理解できる!
CSSの書き方について、HTML/CSS初心者向けに丁寧に解説します。…
最新情報・キャンペーン情報発信中