HTML要素 ・ リンク・画像
<a>
ハイパーリンク
別のページやファイル、同じページ内の位置へ移動するためのリンクをつくります。移動先は href 属性で指定します。
01
サンプルコード
HTML
1<p>
2 詳しくは<a href="https://example.com/">公式ドキュメント</a>を参照してください。
3</p>
4<p>
5 <a href="https://example.com/" target="_blank" rel="noopener">新しいタブで開く</a>
6</p>
CSS
1a {
2 color: #9a5a1c;
3 text-underline-offset: 3px;
4}
5a:hover {
6 text-decoration: none;
7}
02
実行結果
ブラウザでの表示リンクにマウスを乗せると下線が消えます
03
解説
a は "anchor（いかり）" の略です。href 属性に移動先のURLを書くと、囲んだテキストや画像がクリックできるリンクになります。
target="_blank" を指定すると新しいタブで開きます。その場合は、セキュリティのために rel="noopener" もあわせて指定します。
リンクの色や下線はCSSで変更できます。:hover を使うと、マウスを乗せたときの見た目を変えられます。
04
応用例・注意点
主な属性
| 属性 | 説明 |
|---|---|
href | リンク先のURL。#id でページ内、mailto: でメールを指定 |
target="_blank" | 新しいタブ（ウィンドウ）で開く |
rel="noopener" | 開いたページから元のページを操作させない |
download | リンク先をファイルとしてダウンロードさせる |
ページ内リンク
href に「#」とid名を書くと、同じページ内の該当箇所へ移動します。
HTML
1<a href="#contact">お問い合わせへ</a>
2
3<section id="contact">
4 <h2>お問い合わせ</h2>
5</section>
注意点
- 01リンクテキストは「こちら」ではなく、移動先がわかる言葉にします。
- 02ページ移動ではなく動作（送信・開閉など）を行う場合は button を使います。
- 03target="_blank" を多用すると、ユーザーが元のページに戻りにくくなります。