HTML & CSS - a タグ

基本的な使い方

a タグはアンカータグとも呼ばれます。主に別の Web ページへのリンクを作成するときに使われます。その他にもファイル、メールアドレス、電話番号などのリンクを作成できます。リンク先の指定は href 属性で指定します。

リンクの基本的な書き方は、以下のようになります。<a></a> の中には表示するテキストを記述します。a タグ内のテキストはアンカーテキストと呼ばれます。

<a href="リンク先のURL"> 表示するテキスト(アンカーテキスト) </a>
a タグの基本的な書き方

href の書き方

リンク先の指定は href 属性で指定します。以下の例は、murashun.jp の URL を指定した例です。

<a href="https://murashun.jp/"> murashun.jp に移動します </a>
href 属性で URL を指定する
ブラウザ表示

ページ内リンク

href 属性に #ページ内のid を指定することで、ページ内へのリンクを設置することができます。ページ内リンクは、主に記事の目次などで使用されます。

<a href="#section1"> セクション1までジャンプします </a>

...(中略)...

<h2 id="section1"> セクション1 </h2>
ページ内リンクの書き方

メールアドレスのリンク

href 属性に mailto:メールアドレス を指定することで、メールアドレスのリンクを設置することができます。メールアドレスのリンクをクリックすると、メールソフトが起動します。

<a href="mailto:murashun@gmail.com"> メールを送信します </a>
href 属性にメールアドレスのリンクを指定する
ブラウザ表示

電話番号のリンク

href 属性に tel:電話番号 を指定することで、電話番号のリンクを設置することができます。スマホなどで電話番号のリンクをタップすると、電話をかけることができます。

<a href="tel:01203456789"> 0120-345-6789 </a> に電話をかけます
href 属性に電話番号のリンクを指定する
0120-345-6789 に電話をかけます
ブラウザ表示

ファイルダウンロードのリンク

href 属性と download 属性を組み合わせることで、ファイルダウンロードのリンクを設置することができます。

<a href="ファイルのURL" download="ダウンロード時のファイル名"> ダウンロード </a>
ファイルダウンロードのリンク

download 属性には、ファイルをダウンロードしたときのファイル名を指定します。

<a href="/img/logo.png" download="logo.png"> ダウンロード </a>
href 属性にファイルの URL を指定する
ブラウザ表示

リンクを別のタブで開く

a タグ内に target="_blank" を指定することで、リンクをクリックしたときに別のタブで開くようになります。

<a href="https://murashun.jp/" target="_blank"> 別タブで開きます </a>
target="_blank" を指定してリンクを別のタブで開く
ブラウザ表示

また a タグに rel 属性を付与することで、リンク先のページとの関係性を指示できるようになります。

noopener

noopener は、リンク先を別のタブで開いたときにリンク元のページを変更できないようにするために使用されます。信頼できないリンクを rel="noopener" なしで開く場合、フィッシングサイトに誘導されるなど悪用される危険があります。

そのため、外部サイトを別のタブで開く場合は rel="noopener" を指定します。

<a href="https://example.com/" target="_blank" rel="noopener"> ... </a>
外部リンクを別のタブで開くときは rel="noopener" を指定する

nofollow

nofollow は、リンク先のページを推奨しない意味になります。信頼できないページにリンクを貼る場合、rel="nofollow" を指定すると、検索エンジンにリンク先のページは評価しなくても良いと伝えることができます。詳細は、検索エンジン最適化とはのページを参照してください。

<a href="https://example.com/" target="_blank" rel="nofollow"> ... </a>
信頼できないページにリンクを貼るときは rel="nofollow" を指定する

noreferrer

noreferrer は、リンク先にリンク元のアドレス情報などを送らない意味になります。信頼できないページにリンクを貼る場合、rel="noreferrer" を指定すると、どこから訪問したのか隠蔽することができます。

<a href="https://example.com/" target="_blank" rel="noreferrer"> ... </a>
信頼できないページにリンクを貼るときは rel="noreferrer" を指定する

rel 属性は複数の値を指定できる

rel 属性に複数の値を指定する場合は、属性値を半角スペースで区切って指定します。

<a href="https://example.com/" target="_blank" rel="nofollow noopener noreferrer"> ... </a>
rel 属性は複数の値を指定する

CSS によるスタイルの変更

a タグに囲まれたアンカーテキストの色を CSS で変更するには、以下のように記述します。

a {
    color: #3884FF;
}
CSS でスタイルを変更する
ブラウザ表示

また、16 進数のカラーコード以外にもキーワードによる色指定も可能です。

a {
    color: red;
}
CSS でスタイルを変更する
ブラウザ表示

下線を消す

アンカーテキストには、デフォルトで下線がつきます。これは、標準で以下の CSS が適用されているためです。

a {
    text-decoration: underline;
}
アンカーテキストの下線を変更する

下線を消すためには、以下のように記述します。

a {
    text-decoration: none;
}
アンカーテキストの下線を変更する
ブラウザ表示

ホバー時のスタイルを変更する

リンクにマウスを乗せたとき(ホバー時)のスタイルを変更するには a:hover { ... } の形で記述します。

a:hover {
    color: red;
}
ホバー時のスタイルを変更する
ホバー時のスタイルを変更します
ブラウザ表示

リンク先が未訪問のスタイルを変更する

リンク先が未訪問のスタイルを変更するには a:link { ... } の形で記述します。

a:link {
    color: green;
}
リンク先が未訪問のスタイルを変更する
ブラウザ表示

リンク先が訪問済みのスタイルを変更する

リンク先が訪問済みのスタイルを変更するには a:visited { ... } の形で記述します。

a:visited {
    color: orange;
}
リンク先が未訪問のスタイルを変更する
ブラウザ表示

外部リンク