【ご案内】このページの内容は、AI(GPT)が作成したテキストをもとに構成されています。必ずしも完全に正確とは限らないため、学習や制作に利用する際は、公式ドキュメントや信頼できる資料とあわせて確認することをおすすめします。

a タグ(リンク)の基本を学ぼう

このページでは、a タグを使ってリンクを作る方法を説明します。

あわせて、p や h1〜h5、color、font-size、background-color も使ってレイアウトしています。

a タグとは?

a タグは「アンカー(anchor)」の略で、リンクを作るためのタグです。

Web ページの別のページや、同じページ内の別の場所、メールアドレスなどに移動したいときに使います。

a タグの基本構造

a タグの基本的な書き方は次のとおりです。

<a href="リンク先のURL">リンクとして表示したい文字</a>

例)Google へのリンク:

<a href="https://www.google.com/">Google へ移動</a>

h1〜h5 と a タグの組み合わせ

見出しの文字全体をリンクにすることもできます。

見出しの中でリンクを使う例

a タグの詳細を MDN で確認する(h1 のリンク例)

example.com へのリンク(h2 のリンク例)

ページの下部へジャンプ(h3 のリンク例)

a タグの種類の説明へ(h4 のリンク例)

まとめへ移動(h5 のリンク例)

1. 別サイトへのリンク

<a href="https://example.com/">Example サイト</a>

2. 同じサイト内の別ページへのリンク

相対パスで書くこともできます。

<a href="about.html">このサイトについて</a>

3. 同じページ内の特定の場所へのリンク(ページ内リンク)

移動先に id をつけて、href に #id名 を書きます。

例:下の「ページの一番下へ」のリンクは、id="bottom" の場所に移動します。

<a href="#bottom">ページの一番下へ</a>

色や背景色を使ってリンクを目立たせる

a タグにも color や background-color、font-size を指定できます。

例:ボタン風のリンク

<a href="index.html" style="background-color: #1976d2; color: #ffffff; font-size: 18px; padding: 6px 12px;"> トップページへ戻る </a>

テキストとリンクの違いをはっきりさせる

通常、ブラウザは a タグの文字を青色+下線で表示します。

CSS で色や下線を変えることもできますが、「どこがリンクなのか」が分かるようにデザインすることが大切です。

通常のテキスト: これはただのテキストです。

リンクのテキスト: これはリンクのテキストです(Yahoo! JAPAN)

まとめ

a タグはリンクを作るための HTML タグです。

href 属性にリンク先の URL や #id 名などを書いて使います。

p や h1〜h5 の中で使うこともでき、color、font-size、background-color で見た目を調整できます。

リンクはユーザーが移動したい場所へ導く大切な要素なので、分かりやすく目立たせるデザインを心がけましょう。

ここがページの一番下(id="bottom")です。