リンク <a> と属性
- 解説
- 1. リンクとは
- 2. aタグの書き方
- 3. 属性とは
- 4. 属性の書き方
解説
1. リンクとは
リンク（ハイパーリンク）とは、別のWebページへジャンプする機能のことです。
また、このページの一番上に表示されている目次のように、自分と同じページ内へのリンクを、ページ内リンクといいます。
リンクを作成するには、リンクとして機能させたい文字や画像を、aタグで囲みます。
※a は Anchor の略です。
2. aタグの書き方
構文：aタグ（リンクを作成する）
<a href="リンク先のURL"></a>例）テキストをリンク化する
<p>
Googleのトップページは<a href="https://www.google.com">こちら</a>です。
</p>表示結果｜例）テキストをリンク化する
順を追ってリンクの作成方法を見ていきましょう。
テキストや画像をaタグで囲む
まずはリンク化したいテキストや画像を、aタグで囲みます。
<p>
Googleのトップページは<a>こちら</a>です。
</p>href属性にリンク先のURLを指定する
次に、aタグ（開始タグ）の中にリンク先のURLを指定します。リンク先の指定はhref属性を使用します。
<p>
Googleのトップページは<a href="https://www.google.com">こちら</a>です。
</p>以上でGoogleのトップページへのリンクを作成することができました。
3. 属性とは
属性とは、タグの性質のことです。
属性には様々な種類があり、タグごとに指定できる属性が複数あります。例えばaタグでは、href属性を設定することにより、リンク先を指定することができます。
4. 属性の書き方
属性は開始タグの中に記述します。
タグ名に続けて半角スペースで区切り、「属性名="値"」の形式で記述します。
※「=」（イコール）の前後に余分なスペースが入ると、エラーの原因となるので注意してください。
例えばこれまでに見てきた、HTMLのテンプレート作成時に記述される、
<html lang="ja">は、lang属性に「ja」と指定することで、HTML文書の言語が日本語（japanese）であることを設定しています。
複数の属性を指定する
属性はタグ内に複数指定することができます。属性を複数指定する場合は、属性ごとに半角スペースで区切り、記述します。
例えば、aタグに「target="_blank"」と指定することで、リンク先を新しいタブで開くようになります。
<p>
Googleのトップページは<a href="https://www.google.com" target="_blank">こちら</a>です。
</p>表示結果｜例）リンク先を新しいタブで開く
Googleのトップページはこちらです。
問題
実践問題
| (1) | VSCodeを起動し、ヘッダーメニューの「ファイル」から、「workspace_html_css」フォルダーを開いてください。 |
| (2) | 「workspace_html_css」フォルダー内の、「html_basic」フォルダー内に、「a_tag」フォルダーを新規作成してください。 |
| (3) | 「a_tag」フォルダー内に、「index.html」を新規作成し、フッターメニューの「Go Live」ボタンをクリックしてブラウザで表示してください。 |
下記コードを該当ファイルにペーストし、各問に答えてください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>aタグ</title>
</head>
<body>
<!--
（問1）13行目のテキスト「https://www.google.com」をリンク化してください。
なお、リンク先はテキストと同じURLを指定してください。 -->
<p>
URL: https://www.google.com
</p>
<!--
（問2）20行目のテキスト「こちら」をリンク化してください。
リンク先は「https://www.google.com」を指定してください。 -->
<p>
Googleのトップページはこちらです。
</p>
<!--
（問3）27行目のテキスト「こちら」をリンク化してください。
リンク先は「https://www.google.com」を指定し、別タブで開くようにしてください。 -->
<p>
Googleのトップページはこちらです。<br>
<small>※リンクは別タブで開きます。</small>
</p>
</body>
</html>
