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

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

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

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

HTMLのリンクって何？

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

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

ウェブモエ

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

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

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

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

あわせて読みたい

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

linkタグとの違いについて

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

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

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

あわせて読みたい

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

aタグの書き方

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

<a href="リンク先のURL">テキスト/画像</a>

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

テキストリンク

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

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

予期せぬところまでリンクになっている場合、</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>

Apple

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

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

<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以外にも_parent・_self・_topがありますが、使う機会はほとんどありません。

ページ内リンク

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

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

<div id="contact">
  <!--コンタクトフォーム-->
</div>

<a href="#contact">お問い合わせはこちら</a>

あわせて読みたい

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

電話をかける

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

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

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

リンクタグまとめ

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