悩む人リンクの貼り方がいまいち分からない…
悩む人aタグって結局、どこでどう使えばいいの？
そんな悩みを感じたことはありませんか？
この記事は、HTMLを学び始めた初心者〜中級者の方に向けて、aタグの基本から応用までを体系的に解説するものです。
aタグはWebページにリンクを設置するための基本中の基本。
ですが、単にリンクを貼るだけではなく、属性や装飾、適切な配置など、ユーザーにとってわかりやすく・クリックされやすいリンクを作るためには、知っておくべきポイントがたくさんあります。
Web制作の基礎力を高めたい方は、ぜひ最後までじっくり読み進めてみてください。
かすがHTMLの書き方を初心者の方向けにわかりやすく解説している以下の記事もぜひチェックしてみてくださいね！
- aタグの正しい使い方が理解できる
- よく使われる属性や活用シーンが把握できる
- CSSによる装飾方法やSEOに配慮した使い方が身につく
aタグとは？
aタグ（アンカータグ）は、HTMLでリンクを作成するために使用されます。このタグを使うことで、ユーザーがクリックすることで別のページや特定の場所へ移動できるようになります。
例えば、ブログ記事の中で他の記事を紹介したいときや、外部の参考資料へ誘導したいときには、このaタグが必要不可欠です。
なお、aタグはWebアクセシビリティやSEOにも影響を与える重要な要素の一つです。適切に使うことで、ユーザーの利便性を高めたり、検索エンジンに正しく情報を伝えたりすることができます。
単なる「リンクを貼る」以上の意味を持っているのです。
aタグの基本的な書き方
aタグは非常にシンプルな構造ながら、正しい書き方を理解しておくことで、思い通りのリンクを設置できるようになります。
初心者のうちは「なんとなくコピペして使っている」という方も多いかもしれませんが、意味や構成を理解することで、より柔軟で効果的なリンク設定が可能になります。
ここでは、aタグの基本的な書式とその構成要素を詳しく見ていきましょう。
基本構文とその意味
aタグのもっとも基本的な形は以下のようになります。
<a href="リンク先のURL">リンクテキスト</a>
aタグは<a>で始まり、</a>で閉じられるタグで、href属性でリンク先を指定します。リンクとして表示される部分には、ユーザーがクリックするテキストや画像などを挿入します。
この中で特に重要なのが、href属性です。リンク先のURLを指定する役割を持ちます。
たとえば、自分のサイト内の別のページへリンクを貼る場合は相対パスを、外部サイトへリンクする場合は絶対パスを使います。
例1：外部サイトへリンクする
<a href="https://www.google.com">Google</a>
例2：サイト内の別ページへリンクする
<a href="/about.html">このサイトについて</a>
このように、リンク先のURLの形式を適切に使い分けることが大切です。
aタグの属性を確認しよう
aタグは単にリンクを設定するだけでなく、さまざまな属性を使うことで、リンクの動作や意味を細かくコントロールできます。
- 新しいタブで開く
- ダウンロードさせる
- リンク先の言語を指定する
など、目的に応じた使い方が可能です。
ここでは、特によく使われる7つの属性について、それぞれの役割や具体的な使用例を丁寧に解説していきます。
1.href属性：リンク先のURLを指定
aタグにおいて最も基本となるのが、href属性です。これは「このリンクをクリックしたときに、どこへ移動するか」を指定する属性で、aタグの動作の根幹を担っています。
<a href="https://example.com">公式サイトはこちら</a>
2.target属性：リンク先の表示方法を指定
target属性は、リンクをクリックしたときにどこでページを開くかを制御します。
主な値：
| 値 | 説明 |
|---|---|
_self（デフォルト） | 現在のタブ・ウィンドウで開く |
_blank | 新しいタブまたはウィンドウで開く |
<a href="https://example.com" target="_blank">新しいタブで開くリンク</a>
外部サイトへのリンクや、ユーザーの操作を中断させたくないときなどには_blankを使うのが一般的です。
ただし、セキュリティやユーザー体験を考慮して、必要な場面でのみ使うようにしましょう。
3.title属性：リンクの説明（ツールチップ）を指定
title属性は、リンクに補足的な情報を付けることができます。マウスカーソルを合わせるとツールチップが表示され、リンク先の内容や注意点をユーザーに伝えるのに役立ちます。
<a href="/contact.html" title="お問い合わせページへ移動します">お問い合わせ</a>
ただし、すべてのユーザーがマウス操作を行うとは限らないため、title属性だけに情報を依存するのは避け、視覚的にも内容が伝わるリンクテキストを心がけましょう。
4.rel属性：リンク先との関係を指定
rel属性は、リンク元とリンク先の関係を検索エンジンやブラウザに伝えるための属性です。SEOやセキュリティ対策の観点でも非常に重要です。
主な値：
| 値 | 説明 |
|---|---|
noopener | 新しいタブで開いたページから、元のページへの操作を防ぐ |
noreferrer | 新しいタブまたはウィンドウで開く |
nofollow | 検索エンジンに対してリンク先を評価しないよう指示する |
<a href="https://example.com" target="_blank" rel="noopener noreferrer">外部リンク</a>
5.download属性：リンク先のファイルをダウンロードするように指定
この属性を使うと、リンクをクリックしたときにファイルをブラウザで開かず直接ダウンロードさせることができます。
<a href="/files/sample.pdf" download>PDFをダウンロード</a>
ユーザーにファイルを配布したい場合や、明示的にダウンロードさせたい場面で有効です。
ただし、一部のブラウザではファイルの種類や同一ドメインの制限により、動作しない場合もあります。
6.hreflang属性：リンク先の言語を指定
この属性は、リンク先のコンテンツがどの言語で書かれているかを示すために使います。特に多言語サイトや国別ドメインを運用している場合、検索エンジンへの適切な言語情報の提供に役立ちます。
<a href="https://example.com/en/" hreflang="en">English version</a>
SEOにおいて、hreflangは正しく使えば国や地域ごとの検索結果表示に影響を与えることもあり、グローバル展開するサイトでは重要な属性です。
7.type属性：リンク先のMIMEタイプを指定
type属性は、リンク先のコンテンツがどのような形式か（MIMEタイプ）を示すものです。
ただし、現代のブラウザではこの属性が省略されても問題なく機能するため、あまり使用されないことも多いです。
<a href="/files/sample.pdf" type="application/pdf">PDFを表示</a>
主にブラウザや検索エンジンに対して、リンク先のリソースの種類を明示するために使用されます。特定の条件下でより適切なレンダリングを促すことができます。
ここでは、aタグの属性を7つ取り上げました。それぞれの属性がどのような役割を持っているのかを理解することで、より高度でユーザーに優しいリンク設計が可能になります。
aタグはどんなときに使う？
aタグは「リンクを作るためのタグ」として知られていますが、実際にはその用途は非常に幅広く、様々な場面で活用されています。
単に他のページへ遷移させるだけでなく、
- ページ内ジャンプ
- 外部サイトとの連携
- 電話発信
- メール送信
など、日常的に使われる機能にも密接に関わっています。
ここでは、aタグがどのようなケースで使用されるのか、具体例とともに紹介していきます。
1.サイト内の別のページへのリンクを指定する
Webサイト内にある別のページへユーザーを誘導したい場合に、aタグは必須です。
たとえば「サービス内容」ページから「お問い合わせ」ページへリンクを張るなど、サイト内の回遊を促す重要な役割を果たします。
<a href="/contact.html">お問い合わせはこちら</a>
このようなリンクを適切に配置することで、ユーザーの導線が明確になり、離脱率の低下やCVR（コンバージョン率）の向上にもつながります。
2.同じページ内の任意の場所へ移動する
長いページの中で、特定のセクションへスムーズにジャンプさせたいときにもaタグが活用されます。
これは「ページ内リンク」や「アンカーリンク」と呼ばれる使い方です。
<a href="#faq">よくある質問へ移動</a>
<!-- 移動先の要素 -->
<h2 id="faq">よくある質問</h2>
ページの利便性を高め、ユーザーのストレスを軽減できるので、特にLP（ランディングページ）やQ&Aページなどで多く使われています。
3.外部サイトへのリンクを指定する
他のWebサイトの参考資料や関連情報に誘導する際も、aタグが使われます。
信頼性のある外部サイトへリンクを貼ることで、コンテンツの価値や説得力が増します。
<a href="https://developer.mozilla.org/ja/docs/Web/HTML/Element/a" target="_blank" rel="noopener">MDNのaタグ解説</a>
外部リンクを貼る際には、target="_blank"とrel="noopener"をセットで使うのが基本です。ユーザー体験とセキュリティ両面の配慮が求められます。
4.電話をかけるリンクを指定する
スマートフォン対応サイトでは、電話番号をクリックすると発信できるようにするのが一般的です。
aタグのhrefにtel:を使うことで実現できます。
<a href="tel:0123456789">今すぐ電話する</a>
このようなリンクは、ユーザーが迷わずアクションを起こせるので、特に店舗サイトや緊急時のサポートページで重宝されます。
5.メールアドレスを指定してメールソフトを開く
aタグにmailto:とメールアドレスを指定すれば、リンクをクリックしてユーザーのデフォルトのメーラーが立ち上がるようにもできます。
<a href="mailto:info@example.com">メールでお問い合わせ</a>
このとき、件名や本文をあらかじめ指定することも可能です。
<a href="mailto:info@example.com?subject=お問い合わせ&body=お問い合わせ内容を記入してください。">メールでお問い合わせ</a>
入力の手間を省くことで、ユーザーにとって親切な導線となります。
6.ファイルをダウンロードするリンクを指定する
aタグにdownload属性を追加することで、リンククリック時にファイルを直接ダウンロードさせることができます。資料配布やテンプレート配信に便利です。
<a href="/files/guide.pdf" download>ガイドPDFをダウンロード</a>
ファイル名を指定することも可能で、ユーザーにとって分かりやすい名前にすることで信頼性が高まります。
7.テキストだけでなく画像をリンクにする
aタグはテキストだけでなく、画像もリンクとして使用できます。バナー広告や画像付きナビゲーションなど、視覚的に誘導したい場面でよく使われます。
<a href="/campaign.html">
<img src="campaign.jpg" alt="キャンペーンはこちら">
</a>
画像リンクを使う際には、必ずalt属性で内容を補足し、アクセシビリティへの配慮も忘れずに行いましょう。
このように、aタグは非常に多用途であり、リンクの作成という基本機能をベースに、さまざまな表現やユーザーアクションの導線作りに活用できます。
aタグの装飾例4つ
aタグでリンクを設置するだけでは、見た目が地味になってしまい、ユーザーの目に止まりにくいこともあります。
そこで重要になるのがリンクの装飾です。
CSSを活用することで、リンクの色を変えたり、ボタン風にデザインしたり、マウスオーバー時の動きをつけたりと、クリック率の高い魅力的なリンクを作ることができます。
ここでは、代表的な4つの装飾方法を紹介します。
1.テキストの色を変える
リンクテキストの色を変更するだけでも、ページ全体の印象がガラッと変わります。既存のサイトのデザインに合わせてリンク色を統一することで、自然なデザインに仕上がります。
See the Pen 「html aタグ 使い方」下線をアニメーションさせる by kasuga (@kntkfmgf-the-vuer) on CodePen.
解説
text-decoration: none; を指定することで、リンク特有の下線を消し、より自然なテキストに見せることができます。さらに、hover疑似クラスを使えば、マウスを載せたときの反応も簡単に演出可能です。
2.下線をアニメーションさせる
リンクにアニメーションを加えることで、ユーザーの注目を集めやすくなり、より印象的なUIを提供できます。色の変化に加えて、下線がスライドして現れるなどの動きをつけるのが最近のトレンドです。
See the Pen Untitled by kasuga (@kntkfmgf-the-vuer) on CodePen.
解説
疑似要素::afterを活用することで、マウスオーバー時に下線がスーッと出現するアニメーションを表現しています。シンプルでスタイリッシュな印象を与えつつ、ユーザーのクリックを誘導できます。
3.リンクをボタンにする
リンクをボタンのように装飾することで、視認性とクリック率の向上が期待できます。特にCTA（コール・トゥ・アクション）では、ボタン風のリンクが効果的です。
See the Pen 「Flexbox」サンプル グローバルナビゲーション by kasuga (@kntkfmgf-the-vuer) on CodePen.
解説
ボタン型に装飾する際はborder-radiusで角丸にすると柔らかい印象になります。また、特に強調したいボタンだけ色を変えるのもよく使われるテクニックです。
4.リンクをカードにする
テキストや画像を含むリンクをカード型にデザインすることで、情報量を増やしつつ、クリックしやすいUIを実現できます。ブログの一覧表示やニュースフィードなどでよく使われる手法です。
See the Pen 「Flexbox」サンプル カード型ボックスのサムネイル一覧 by kasuga (@kntkfmgf-the-vuer) on CodePen.
解説
カードリンクは、情報をひとまとまりとして視覚的に伝えることができ、ユーザーが直感的にクリックしやすくなります。マウスオーバー時にscaleをアニメーションさせて強調しています。
装飾は見た目を整えるだけでなく、ユーザーの行動を促進するための重要な要素です。ターゲットユーザーやサイトの目的に合わせて、最適なデザインを選びましょう。
aタグ使用時のポイント5つ
aタグはシンプルな構文で使える便利なHTMLタグですが、使い方を誤るとユーザー体験やSEOに悪影響を及ぼすこともあります。
適切な場所にリンクを配置する、わかりやすいテキストを用いる、セキュリティに配慮するなど、いくつかの基本的なポイントを押さえておくことが重要です。
ここでは、aタグを使う際に気をつけたい5つのポイントを具体的に解説します。
1.優先度が高いリンクはページの上部に設置する
重要なリンク（例：お問い合わせ、商品購入、サービス紹介など）は、ページのファーストビューまたは上部に配置するのが効果的です。
多くのユーザーはページの冒頭しか見ない傾向があるため、優先度の高いリンクを目立たせることで、クリック率やコンバージョン率の向上が期待できます。
また、Googleも「ページ内の重要なリンクは上部にあるべき」とする傾向があり、SEOの観点でも効果的です。
2.aタグのテキストや画像はユーザーの興味を惹くものにする
リンクのテキストが「こちら」「クリック」だけでは、ユーザーにとって分かりにくく、検索エンジンにも内容が伝わりにくくなります。
リンク先の内容を具体的に記述することで、クリック率向上とSEOの両面に好影響を与えます。
NG例：
<a href="/about.html">こちら</a>
OK例：
<a href="/about.html">当サイトの運営者情報はこちら</a>
3.画像リンクの場合はalt属性を指定する
画像をリンクとして使う場合、alt属性を必ず指定しましょう。
alt属性は、画像が表示されなかったときに代替テキストとして表示されるだけでなく、スクリーンリーダーを使う視覚障害者にも情報を提供する役割を持ちます。
<a href="/campaign.html">
<img src="campaign.jpg" alt="今月のキャンペーンページへ">
</a>
SEO面でも、alt属性はGoogleに画像の内容を伝えるための重要な情報源となります。装飾目的でない限り、必ず意味のある文言を入れましょう。
4.絶対パスと相対パスの違いを理解する
リンク先の指定方法には「絶対パス」と「相対パス」があり、それぞれ適した使い方があります。
- 絶対パス：
https://example.com/page.htmlのように、完全なURLを指定。外部リンクや、ドメインをまたいで明示的に指定したい場合に有効。 - 相対パス：
/about.htmlや../index.htmlのように、現在のファイルの位置を基準にしたパス。サイト内リンクでは相対パスの方が移行時に楽です。
サイト構造やリンクの対象によって、使い分けが重要です。たとえば、サイト内のページ同士のリンクには相対パスを使うことで、環境移行時のトラブルを回避できるという利点があります。
5.target=”_blank”は適切な箇所に指定する
aタグで外部サイトに遷移させるときは、target="_blank" を使って新しいタブで開くようにするのが一般的です。ユーザーが元のページに戻りやすくなるため、離脱を防ぐことができます。
ただし、target属性を使うときは、必ずrel="noopener noreferrer"も併用しましょう。これにより、セキュリティリスク（新しく開いたページが元のページを操作できる問題）を防げます。
<a href="https://external-site.com" target="_blank" rel="noopener noreferrer">外部リンクを見る</a>
不用意にすべてのリンクにtarget="_blank"を使うと、ユーザーにとって煩わしくなる場合もあるため、用途と文脈に応じて使い分けることが大切です。
これら5つのポイントを意識するだけでも、リンクの品質とユーザー体験が大きく向上します。シンプルなタグだからこそ、細部に気を配ることが信頼性の高いサイト作りにつながります。
WEBデザイナー・フロントエンドのスキルを確実に身につけたい方へ
「WEBデザインやフロントエンドを学びたい」と思い立ったとき、多くの方がまず独学を選びます。
しかし、独学では「何をどこから学べばいいかわからない」「つまずいたときに誰にも聞けない」といった壁にぶつかることも少なくありません。
一方、スクールで学べば、正しい順序で、現場で使えるスキルを効率よく習得することができます。最短ルートでスキルを身につけたい方には、スクール学習がおすすめです。
かすが私は26歳で印刷業からWEBデザイナーを目指して学び始めましたが、やはり独学に限界を感じ短期スクールで学びました。本気でスキルを身につけたいならスクールはマジで行った方が良いです！
- カリキュラムが体系化されているため、基礎から応用まで無駄なく学べる
- 現役のプロから実践的なフィードバックを受けられる
- わからないことをすぐに質問・解決できる環境がある
- 制作課題を通じて、ポートフォリオが作成できる
- 学習仲間や講師とのつながりが、モチベーション維持につながる
- カリキュラムが現場で必要とされる技術に対応しているか
- 現役デザイナー・エンジニアが講師として在籍しているか
- ポートフォリオ制作のサポートが充実しているか
- 卒業後の就職・転職支援が用意されているか
- オンライン・通学など、自分の生活スタイルに合った受講形式か
遠回りせず、確実にスキルを身につけたいなら、プロに教わるのが一番の近道です。
WEBデザイナー・フロントエンドエンジニアとして一歩踏み出したいあなたにぴったりのスクールを、下記の記事でご紹介しています。ぜひチェックしてみてください。
aタグまとめ
HTMLにおけるaタグは、リンクを作成するための基本的かつ重要なタグであり、WebサイトのユーザビリティやSEOに直結する要素です。
初心者でも使いやすいタグですが、属性や使い方を深く理解することで、より実用的で効果的なWeb制作が可能になります。
最後に、この記事の内容を以下に整理しておきます。
<a>タグは、リンクを作成するためのタグhref属性でリンク先を指定- テキストや画像をリンクとして使用できる
href：リンク先のURLを指定（絶対パス・相対パス）target：新しいタブで開くなど、表示方法を制御title：ツールチップとして補足情報を表示rel：リンク先との関係性を検索エンジンやブラウザに伝えるdownload：ファイルを直接ダウンロードさせるhreflang：リンク先の言語を指定（多言語サイトで有効）type：リンク先のMIMEタイプを指定（利用頻度は低め）
- サイト内の別ページへのリンク
- ページ内ジャンプ（アンカーリンク）
- 外部サイトへのリンク
- 電話発信やメール送信へのリンク
- ファイルダウンロードや画像リンクへの応用
- リンクの色変更：デザインに馴染む色で視認性UP
- ボタン化：CTAなどで目立たせる
- カード型リンク：ブログ一覧や記事紹介に最適
- アニメーション追加：マウスオーバーで動きを出して誘導力UP
- 優先度の高いリンクはページ上部に配置
- リンクテキストは具体的に分かりやすく
- 画像リンクはalt属性を必ず記述
- 絶対パスと相対パスを使い分ける
target="_blank"を使うときはrel="noopener noreferrer"をセットで
aタグは、Web制作の基本中の基本でありながら、工夫次第でユーザー体験やSEO効果を大きく向上させることができます。
正しい知識を持って活用することで、クリックされやすく、伝わりやすいリンク設計が可能になります。
これを機に、aタグの使い方を見直して、より魅力的なWebページを目指しましょう。
