リンク <a> と属性

解説
1. リンクとは
2. aタグの書き方
3. 属性とは
4. 属性の書き方

問題に挑戦！

進捗を変更する

このページは無料で始められるオンラインプログラミング学習サービス「DigSkill」の一般公開ページです。
この前後のページを見たい方や学習内容に興味を持たれた方は、こちらをクリックしてコース一覧をご覧ください！

解説

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」ボタンをクリックしてブラウザで表示してください。

下記コードを該当ファイルにペーストし、各問に答えてください。

html_basic/a_tag/index.html
<!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>

想定結果を表示

解答

（問1）解答を表示

<p>
    URL: <a href="https://www.google.com">https://www.google.com</a>
</p>

（問2）解答を表示

<p>
    Googleのトップページは<a href="https://www.google.com">こちら</a>です。
</p>

（問3）解答を表示

<p>
    Googleのトップページは<a href="https://www.google.com" target="_blank">こちら</a>です。<br>
    <small>※リンクは別タブで開きます。</small>
</p>

ソース全文を表示

html_basic/a_tag/index.html
<!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: <a href="https://www.google.com">https://www.google.com</a>
    </p>

    <!--
    （問2）20行目のテキスト「こちら」をリンク化してください。
    リンク先は「https://www.google.com」を指定してください。 -->
    <p>
        Googleのトップページは<a href="https://www.google.com">こちら</a>です。
    </p>

    <!--
    （問3）27行目のテキスト「こちら」をリンク化してください。
    リンク先は「https://www.google.com」を指定し、別タブで開くようにしてください。 -->
    <p>
        Googleのトップページは<a href="https://www.google.com" target="_blank">こちら</a>です。<br>
        <small>※リンクは別タブで開きます。</small>
    </p>
</body>
</html>