HTMLのaタグでリンクを作成しよう！初心者向けに詳しく解説

2024年7月5日2024年8月26日

misa

こんにちは、ウェブデザインパレットのmisaです。

HTMLでWebページを作成する際、リンクは欠かせない要素です。
リンクを適切に設置することで、ユーザーは別のページへ移動したり、画像や動画などのファイルを開いたりすることができます。

今回は、HTMLのリンクタグであるaタグについて、基本的な書き方から、応用的な使い方、注意点まで詳しく解説します。

Contents

1. aタグの基本的な書き方

aタグは、「Anchor（アンカー）」の略で、リンク先のURLとリンクテキストを記述するためのタグです。

aタグの書き方

リンクボタンにしたい部分を<a herf="">～</a>で囲みます。リンク先のURLは開始タグの中にherf="リンク先のURL"という形式で記述します。

HTML

<a href="http://web-design-pallet.site/">リンクテキスト</a>

リンクテキスト

文章中にリンクを入れる

HTML

<p>これは<a href="http://web-design-pallet.site/">リンクテキスト</a>です。</p>

これはリンクテキストです。

例：画像へのリンク

画像（imgタグ）をaタグで挟みます。

HTML

<a href="http://web-design-pallet.site/">
  <img
    src="http://web-design-pallet.site/wp-content/uploads/2024/06/Web-Design-Pallet_logo_o-300x40.png"/>
</a>

例：メールアドレスへのリンク

herf="mailto:送信先のメールアドレス"という形式で記述します。

HTML

<a href="mailto:info@example.com">お問い合わせ</a>

お問い合わせ

例：別タブで開くリンク

クリックしたときに別タブで開くようにしたいときは、aタグの中にtarget="_blank"を追加します。また、target="_blank"を使用するときは、脆弱性の対策としてrel="noreferrer noopenerも記述しておきましょう。

HTML

<a href="http://web-design-pallet.site/" target="_blank" rel="noreferrer noopener">別タブで開くリンク</a>

別タブで開くリンク

2. aタグの応用的な使い方

aタグは、基本的な使い方以外にも、様々な応用的な使い方ができます。

ID指定によるページ内移動

同じページ内にジャンプリンクを設置したい場合は、href属性に#記号とID名を使用します。

HTML

<a href="#id">ページ内リンク</a>
<div id="id">ここにジャンプします</div>

ページ内リンク

ここにジャンプします

JavaScriptを使用したリンク

JavaScriptを使用して、リンクの動作をカスタマイズすることもできます。

HTML

<a href="javascript:alert('リンクをクリックしました')">JavaScriptリンク</a>

JavaScriptリンク

クラス指定によるスタイル設定

aタグにクラスを指定することで、CSSを使ってスタイルを適用することができます。

リンクボタンを作成する

CSSでbackground-colorを指定して、ボタンっぽいデザインにします

HTML

<a href="#" class="btn">ボタン</a>

CSS

.btn {
  display: inline-block;
  padding: 10px 20px;
  background-color: #007bff;
  color: #fff;
  text-decoration: none;
}

ボタン

カーソルをのせたのきに色を変える

疑似クラス:hoverを使用することで、カーソルを重ねたときだけデザインを変更することができます。

HTML

<a href="#" class="btn">ボタン</a>

CSS

.btn-02 {
  display: inline-block;
  padding: 10px 20px;
  background-color: #007bff;
  color: #fff;
  text-decoration: none;
}

.btn-02:hover {
  background-color: #ee7800;
}