Webページの魅力のひとつは、クリックひとつで他のページへ移動できるリンク機能です。
この記事では、超初心者向けに<a>タグの使い方をわかりやすく解説します！
aタグとは？
<a>タグは「アンカー（Anchor）」の略で、他のページやサイト、ファイルに飛ぶリンクを作成するためのタグです。
<a>タグの基本の書き方:
<a href="https://www.google.com">Googleへ移動</a>💡 ポイント:
hrefの後にURLを記載します。- Googleへ移動 の部分がクリックできるテキストです。
💡 実践してみよう！
下記をコピペでhtmlファイルとして保存し、リンクがどのように動くか確認してみてください。
<!DOCTYPE html>
<html>
<head>
<title><a>タグの基本</title>
</head>
<body>
<h1>リンクの基本サンプル</h1>
<p><a href="https://www.google.com">Googleへ移動</a></p>
</body>
</html>aタグでリンクできる種類
外部サイトへのリンク:
他のサイトへ飛ぶようなリンクも作成できます。
<a href="https://www.example.com">外部サイトに移動</a>同じサイト内のページへのリンク:
もちろん自分のサイトに飛ぶリンクも作成可能です。
<a href="https://mikeiken-engineer.com/">このサイトの「About」ページへ</a>⬇️ PDFや画像ファイルへのリンク:
<a href="https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf">PDFを開く</a>
<a href="https://picsum.photos/200/300">画像を表示する</a>💡 実践してみよう！
下記をコピペでhtmlファイルとして保存し、リンクがどのように動くか確認してみてください。
<!DOCTYPE html>
<html>
<head>
<title>リンクの練習</title>
</head>
<body>
<h1>リンクの実践サンプル</h1>
<p><a href="https://www.example.com">外部サイトに移動</a></p>
<p><a href="https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf">PDFを開く</a></p>
<p><a href="https://picsum.photos/200/300">画像を表示する</a></p>
</body>
</html>新しいタブでリンクを開く方法
パソコンやスマホでリンクをクリックした際に、新しいタブで開くようなリンクも作れます。
<a href="https://www.google.com" target="_blank">新しいタブでGoogleを開く</a>💡 ポイント:
target="_blank"を追加するだけで、新しいタブで開ける！- 外部サイトへのリンクには便利です。
💡 実践してみよう！
下記をコピペでhtmlファイルとして保存し、リンクがどのように動くか確認してみてください。
<!DOCTYPE html>
<html>
<head>
<title>新しいタブでリンクを開く</title>
</head>
<body>
<h1>新しいタブでリンクを開くサンプル</h1>
<p><a href="https://www.google.com" target="_blank">新しいタブでGoogleを開く</a></p>
</body>
</html>おさらいクイズ！
これが解けたら、今回の内容はバッチリ！
❶どちらのリンクが正しく機能するでしょう？
A:
<a href="#">リンクの基本</a>B:
<a href="https://www.google.com">Googleへ</a>✅ 答え: → Bが正解！ href属性でリンク先を指定し、クリックできるテキストを囲むのがポイントです。
❷新しいタブでリンクを開くために必要な属性は？
A. new-tab="true"
B. target="_blank"
✅ 答え: → Bが正解！ target="_blank" で新しいタブが開きます。
まとめ
<a>タグはリンクを作成するための基本タグ！href属性でリンク先を指定、テキスト部分がクリック可能。- 新しいタブで開くなら
target="_blank"を追加。
コメントを残す