目次
aタグとは？
<a> タグはHTMLのアンカータグ（リンクタグ）で、クリックすると別のページや場所に移動するリンクを作るタグです。
<a href="リンク先URL">リンクテキスト</a>
href 属性にリンク先を指定し、開始タグと終了タグの間に表示するテキスト（またはクリッカブルな要素）を入れます。
aタグの基本的な書き方
外部リンク（別サイトへのリンク）
<a href="https://example.com">example.comへ移動</a>
内部リンク（同じサイト内のページへ）
<!-- 絶対パス -->
<a href="https://awcs.org/html-basics/">HTML基礎ページへ</a>
<!-- 相対パス（同じサイト内で推奨） -->
<a href="/html-basics/">HTML基礎ページへ</a>
<a href="../contact/">お問い合わせへ</a>
target属性｜別タブで開く
別タブで開く（target=”_blank”）
外部サイトへのリンクは別タブで開くのが一般的なUXです。
<a href="https://example.com" target="_blank">別タブで開く</a>
| target値 | 動作 |
|---|---|
_self |
同じタブで開く（デフォルト） |
_blank |
新しいタブで開く |
_parent |
親フレームで開く |
_top |
最上位ウィンドウで開く |
rel属性｜セキュリティ対策
target="_blank" を使うときは、必ず rel="noopener noreferrer" を一緒に指定してください。
<a href="https://example.com" target="_blank" rel="noopener noreferrer">
外部サイトへ（安全なリンク）
</a>
なぜ必要か？
rel="noopener" がないと、開いた先のページから元のページを操作できるセキュリティリスク（タブナビング攻撃）があります。外部リンクには必ずセットで書く習慣をつけましょう。
| rel値 | 意味 |
|---|---|
noopener |
開いたページから元ページへのアクセスを防ぐ |
noreferrer |
リファラー（参照元）情報を送らない |
nofollow |
検索エンジンにリンクを評価させない |
sponsored |
広告・スポンサーリンクであることを示す |
ページ内リンク（アンカーリンク）
同じページの特定の場所にジャンプするリンクです。id 属性で位置を指定します。
<!-- リンク側 -->
<a href="#section2">セクション2へジャンプ</a>
<!-- ジャンプ先（id属性を設定） -->
<h2 id="section2">セクション2</h2>
目次の作成や、ページトップに戻るボタンに使われます。
<!-- ページトップに戻る -->
<a href="#top">ページトップへ</a>
メールリンク・電話リンク
メールリンク（mailto:）
クリックするとメールソフトが開きます。
<a href="mailto:info@example.com">メールを送る</a>
<!-- 件名・本文を指定する場合 -->
<a href="mailto:info@example.com?subject=お問い合わせ&body=お名前：">
件名付きメールを送る
</a>
電話リンク（tel:）
スマートフォンでクリックすると電話アプリが開きます。
<a href="tel:0120-000-000">0120-000-000</a>
画像・ボタンをリンクにする
画像をリンクにする
<a href="https://example.com">
<img src="banner.jpg" alt="バナー：サービス紹介">
</a>
ボタンをリンクにする
<!-- divやspan要素をaタグで囲む -->
<a href="/contact/" class="btn-primary">
無料相談はこちら
</a>
注意:
<a>タグの中に<a>タグをネストすることは禁止されています。
ダウンロードリンク（download属性）
クリックするとファイルをダウンロードさせる場合は download 属性を使います。
<a href="/files/sample.pdf" download>
PDFをダウンロード
</a>
<!-- ファイル名を指定する場合 -->
<a href="/files/sample.pdf" download="サービス資料.pdf">
サービス資料をダウンロード
</a>
aタグのアクセシビリティ注意点
リンクテキストは具体的に
<!-- × わかりにくい -->
<a href="/about/">こちら</a>をクリック
<!-- ○ リンク先の内容がわかる -->
<a href="/about/">会社概要ページ</a>を見る
スクリーンリーダーはリンクテキストだけを読み上げるため、「こちら」「詳しくはこちら」というテキストはアクセシビリティ上NGです。
aタグのCSSスタイリング
/* デフォルトのスタイルをリセットしてカスタマイズ */
a {
color: #0066cc;
text-decoration: none; /* 下線を消す */
}
a:hover {
color: #004499;
text-decoration: underline; /* ホバー時に下線を表示 */
}
/* ボタン風リンク */
.btn {
display: inline-block;
padding: 12px 24px;
background-color: #0066cc;
color: #fff;
border-radius: 4px;
text-decoration: none;
}
まとめ
| 用途 | 書き方 |
|---|---|
| 基本リンク | <a href="URL">テキスト</a> |
| 別タブで開く | target="_blank" rel="noopener noreferrer" を追加 |
| ページ内リンク | href="#id名" でジャンプ先を指定 |
| メールリンク | href="mailto:アドレス" |
| 電話リンク | href="tel:電話番号" |
| ダウンロード | download 属性を追加 |
aタグはHTMLの中でも最も使用頻度が高いタグです。特に target="_blank" のセキュリティ対策（rel="noopener noreferrer"）は忘れずに実装しましょう。
