MENU

リンクタグの使い方を分かりやすく解説します!

2021 2/13
リンクタグの使い方を分かりやすく解説します!

今回はHTMLでリンクを作成する際に使用するaタグの使い方についてです。基本的な使い方や知識に加え、実際の制作現場でよく使用する

  • 別タブ(ウィンドウ)で開く
  • ページ内リンク
  • 電話発信

も合わせて徹底的に分かりやすく解説していきたいと思います!

目次

HTMLのリンクって何?

HTMLのリンクという言葉を聞くとなんとなく分かる人の方が多いとは思いますが、念のためそこから解説していきますね。

リンクとはweb上に存在する別ページ(ファイル)への繋がりのことです。

この画像もリンクです

ウェブモエ

こちらの画像やテキストがリンクです。(クリックすると、当ブログのトップページへ飛びます)

書き方はのちほど紹介しますが、こういったリンクは全てaタグを使って書いています。

webページ同士の繋がり、ときくとピンとこない方もいるかもしれませんが、web上に存在するページは、全てインターネットという大きな蜘蛛の巣の中にあり、各ページが蜘蛛の糸によって繋がることができる、というイメージです。

webページの成り立ちや仕組みについて詳しく学びたい方はこちらの記事を読んで勉強してください。

あわせて読みたい
webやインターネットの仕組みを分かりやすく解説します!
webやインターネットの仕組みを分かりやすく解説します!普段パソコンやスマホから何気なく見ているwebサイトですが、どうやって表示されているのか、その仕組みはご存知でしょうか?今回はwebサイトの製作から実際に表示され...
linkタグとの違いについて

似たタグにlinkタグがありますが役割は全く違います!

  • linkタグ:外部ファイルを読み込むタグ
  • aタグ:外部ページへ移動するタグ

「リンク」という言葉があるので少しややこしいですが、linkタグとaタグは全くの別物ということだけきちんと理解しておきましょう!

あわせて読みたい
headタグに書く内容を総まとめ!
headタグに書く内容を総まとめ!今回はhead内に書いておいたほうがいいタグや、その意味を総まとめしていきます!【headとは】今ご覧のこのページも含め、WebページはHTMLにより作られています。HTMLは...

aタグの書き方

それでは、ここからはaタグの書き方を解説していきたいと思います。

<a href="リンク先のURL">テキスト/画像</a>
  1. href="○○"にリンク先のURLを書く
  2. テキスト(画像)をaタグの中に書く

実は書き方はシンプルで、たったこれだけなんです。

テキストリンク

テキスト(文字)をリンクにしたい場合、このような書き方になります。

Apple
<a href="https://www.apple.com/">Apple</a>
Apple

Apple

Apple

Apple

href="○○"の部分にリンク先(例:Apple公式ページ)のURLを書き、aタグの中にはリンクにしたいテキストを書いていますね。

今回、例として3つ「Apple」という文字を並べましたが、2つめの「Apple」だけリンクになっているのが確認できると思います。

aタグの中にある文字だけがリンクとなり、それ以外の文字は通常通りのテキストになります。

予期せぬところまでリンクになっている場合、</a>(閉じタグ)の場所が間違っている場合がほとんどです。もしそうなった場合、aタグの範囲を確認してみましょう!

画像リンク

続いて、画像でリンクを作成する場合の書き方です。

<a href="https://www.apple.com/">
  <img src="apple.png">
</a>

href="○○"の部分にリンク先(例:Apple公式ページ)のURLを書き、aタグの中に画像を書いていますね。

テキストリンクの際には文字を書いていた場所に、imgタグを使って画像を表示させるだけなんです!

画像+テキストリンク

それでは、画像とテキストの両方をリンクにしたい場合はどうすればいいのでしょうか?

<a href="https://www.apple.com/">
  <img src="apple.png">
  <p>Apple</p>
</a>

答えは簡単で、aタグの中に画像とテキストの両方を入れるだけです。

aタグの中に入っているものをまるごとリンクにすることができます。

URLの指定方法について

リンク先のURLは絶対パス・相対パスどちらでも構いません。

コーポレート(企業)サイトのメニューだと、このように相対パスでURL指定をしている場合がほとんどです。

<ul>
  <li><a href="service.html">事業内容</li>
  <li><a href="company.html">会社概要</li>
  <li><a href="contact.html">資料請求</li>
</ul>

(※絶対パス・相対パスに関しては後日別記事にて解説します)

aタグの書き方:応用編

ここからはaタグを書く際、知っておくと便利なやり方をご紹介します。実際の現場でよく使うものもありますので、aタグとセットで覚えておきましょう。

新しいタブ(ウィンドウ)で開く

デフォルトでは、aタグで作成されたリンクをクリックすると、開いているページがそのまま切り替わります。コーポレートサイトやお店のページなど、同じサイト内でリンクを貼っている場合はそのまま移動して何も問題はないですよね。

ところが、外部ページなどを参考で貼る場合など、現在開いているページにまた戻ってきて欲しい場合もありますよね。そんなときは新しいタブでリンク先を開くように設定しましょう。

<a href="https://www.google.co.jp/" target="_blank">Apple(新しいタブで開く)</a>

新しいタブでリンク先を開きたい時はtarget="_blank"という属性をaタグの中に書きます。

新しいタブで開く条件やルールは決まっていませんので、どちらを選ぶかは自由です。

かもめ かもめ

target="○○"に書くものは_blank以外にも_parent_self_topがありますが、使う機会はほとんどありません。

ページ内リンク

同じwebページの中で、クリックすると特定の箇所へ移動するリンクのことをページ内リンクと呼びます。LP(ランディングページ)と呼ばれるものなど、縦に長いwebページでよく使用されています。

それでは、ページ内リンクの書き方を見てみましょう。今回は、ページ下部にお問い合わせフォームがあるという想定で解説しますね。

STEP
移動先へidを書く
<div id="contact">
  <!--コンタクトフォーム-->
</div>

ページ内の移動させたい要素にid属性をつけます。

名前はなんでもOKですが、分かりやすいものにしましょう。

STEP
リンク先を指定する
<a href="#contact">お問い合わせはこちら</a>

リンクのhref=""で指定するリンク先に「#(シャープ)+ id名」を書きます。

STEP1で作成したid名「contact」をジャンプ先にするので、リンク先に#contactを指定します。

STEP
完成!

これで内部リンクが完成しました!

今回ご紹介したページ内移動は、

  • ページトップへの移動
  • ページ下部にある問い合わせフォームへの移動
  • その他、LPの移動

などによく使われています。

あわせて読みたい
idとclassの使い方を徹底解説!
idとclassの使い方を徹底解説!HTMLやCSSを勉強していると必ず出てくるidとclass。今回はこの2つの違いや使い方含め、徹底的に解説していきたいと思います!【id、classとは一体何?】そもそもidとcl...

電話をかける

スマホで操作している時、電話番号や受話器マークをタップすると、電話を発信できることがありますよね。

実は、これもaタグを使っているんです!

<a href="tel:08012345678">080−1234−5678</a>

電話番号の設定は簡単で、URLを指定するhref="○○"のところにtel:電話番号という形式書くだけでできちゃいます!

tel:電話番号に書く番号は、-(ハイフン)は書かず、数字のみです!

リンクタグまとめ

  • リンクタグは<a href="移動先のURL">テキスト/画像</a>
  • hrefには移動先のページのURL書く
  • 移動先のURLは絶対パス、相対パスどちらでもOK
  • テキスト・画像両方ともリンクにできる
  • 複数の要素を丸ごとリンクにできる
  • リンク先を新しいタブで開く:target=”_blank”
  • ページ内リンク:href="#id"
  • 電話発信:href="tel:電話番号"

この記事が気に入ったら
フォローしてね!

この記事を書いた人

都内勤務のフロントエンドエンジニア。初心者の方向けにブログを更新中。webに萌えてもっと楽しく、もっと素敵に!

目次
閉じる