リンクを表す要素 0:12

ハイパーリンク

HTMLには別のHTMLファイルに移動するハイパーリンクという機能があります。
今回はそのハイパーリンクを利用するための要素を学習しましょう。ハイパーリンクは a要素にhref属性を使ってをリンク先を指定します。

リンクの要素
要素名 意味・役割
a リンク
今回のゴール

RERUN

新しいウインドウで表示する

リンクしたい箇所を、a要素で挟む。 0: 51

a要素は、anchor（アンカー）の略で別のHTMLファイルなどにハイパーリンクを定義します。
アンカーとは船の錨のことで、繋がっている他のHTMLファイルをたぐり寄せる要素です。
なお、 a要素に挟まれた文字列のことをアンカーテキストと呼びます。

カテゴリ
コンテンツ・モデル
トランスペアレント（透明）
主な属性
  • href属性： リンク先を指定する属性
  • target属性： リンクの表示場所を指定する属性

a要素の基本的な使い方

a要素は、ハイパーリンクを設定したい箇所を、<a> 〜 </a>タグで挟み、 href（エイチレフ）属性を用いてリンク先を指定します。 href属性は、hypertext（ハイパーテキスト） reference（リファレンス）の略で、ハイパーリンクのリンク先を指定する属性です。

リンク先のパスの指定方法は、Chapter13で詳しく説明します。

a要素の使い方
<a href="リンク先のパス">アンカーテキスト</a>

同じフォルダ内にあるHTMLファイルにリンクするサンプル

同じフォルダ内にあるHTMLファイルにリンクする場合は、リンク先のパスに、相手のファイル名を記述すればリンクできます。

faq.htmlというファイルにリンクする例
<p>
  なんとか<a href="faq.html">ボブの父親の会社のよくある質問ページ</a>を更新できた。
</p>
ブラウザでの表示例

RERUN

新しいウインドウで表示する

外部のサイトにリンクするサンプル

外部のWebサイトにリンクしたい場合は、そのページのURLをリンク先のパスに指定します。

CreatorQuestにリンクする例
<p>
  <a href="https://creatorquest.jp/">CreatorQuest</a>へ
</p>
ブラウザでの表示例

RERUN

新しいウインドウで表示する

基本的なリンクを設定してみよう 5:58

それでは、a要素を使って基本的なリンクを設定してみましょう。

  1. 「Chapter12」フォルダ内の「index.html」をテキストエディタで開く
  2. 下記を参考にa要素をマークアップ
Chapter12/index.html
<h1>僕のリンク集</h1>

<h2>僕が勉強してきたこと</h2>
<ul>
  <li><a href="chapter06.html">段落と見出しの練習</a></li>
  <li><a href="chapter07.html">特別な記述が必要な文字と改行の練習</a></li>
  <li><a href="chapter08.html">強調を表す要素と重要を表す要素の練習</a></li>
  <li><a href="chapter09.html">箇条書きの練習</a></li>
  <li><a href="chapter10.html">用語説明型リストの練習</a></li>
</ul>

<h2>僕がWebの勉強に使っているサイト</h2>
<p>
  CreatorQuest<br>
  <a href="https://creatorquest.jp/">https://creatorquest.jp/</a>
</p>
  1. 上書き保存し、ブラウザで確認
ブラウザでの表示例

RERUN

新しいウインドウで表示する

リンク先を新しいウインドウで表示する方法 12:21

リンク先を新しいウインドウまたはタブで表示したい場合は、a要素に、target（ターゲット）属性というリンク先を表示する場所を指定する属性を用いて、属性値に "_blank" と指定します。

target属性の使い方
<a href="リンク先のパス" target="_blank">アンカーテキスト</a>

別ウインドウでリンク先を表示するサンプル

別ウインドウでリンク先を表示する例
<p>
僕は<a href="https://creatorquest.jp/" target="_blank">CreatorQuest</a>でWebの勉強をしている。
</p>
ブラウザでの表示例

RERUN

新しいウインドウで表示する

リンク先を新しいウインドウで表示してみよう 12:53

それでは、target属性を使ってリンク先を新しいウインドウまたはタブで表示してみましょう。

  1. 「Chapter12」フォルダ内の「index.html」をテキストエディタで開く
  2. 下記を参考に、target属性を追記
Chapter12/index.html
<h1>僕のリンク集</h1>

<h2>僕が勉強してきたこと</h2>
<ul>
  <li><a href="chapter06.html">段落と見出しの練習</a></li>
  <li><a href="chapter07.html">特別な記述が必要な文字と改行の練習</a></li>
  <li><a href="chapter08.html">強調を表す要素と重要を表す要素の練習</a></li>
  <li><a href="chapter09.html">箇条書きの練習</a></li>
  <li><a href="chapter10.html">用語説明型リストの練習</a></li>
</ul>

<h2>僕がWebの勉強に使っているサイト</h2>
<p>
  CreatorQuest<br>
  <a href="https://creatorquest.jp/" target="_blank">https://creatorquest.jp/</a>
</p>
  1. 上書き保存し、ブラウザで確認
ブラウザでの表示例

RERUN

新しいウインドウで表示する

ページ内の特定の場所にリンクする方法 14:24

同じページ内の違う箇所にリンクすることも可能です。
その場合はまず、リンク先 （ジャンプして来てほしい場所）となる要素に、グローバル属性のid属性で、固有の名前を指定します。

id属性
id属性は、要素に固有の名前を指定できるグローバル属性。
一般的には任意の文字列を半角英数字で指定します。
id属性の使い方
<要素名 id="固有の名前">...</要素名>

そして、リンクを指定するa要素のhref属性に、まず「#」と記述します。
そして、その後ろに先程指定した id属性の属性値を記述します。

ページ内リンクの指定方法
<a href="#リンク先に指定した固有の名前">アンカーテキスト</a>

ページ内の特定の場所にリンクするサンプル

ページ内リンクの例
<ul>
  <li><a href="#bob">ボブ</a></li>
  <li><a href="#mukami">ムカミ</a></li>
  <li><a href="#mary">メアリー</a></li>
</ul>

<h2 id="bob">ボブ</h2>
<p>
  Webディレクターになりたいテンションが高めの熱い男。
</p>
.
.
.
<h2 id="mukami">ムカミ</h2>
<p>
  Webプログラマーになりたいちょっと変わり者の男。
</p>
.
.
.
<h2 id="mary">メアリー</h2>
<p>
  Webデザイナーになりたい天然で気が強い女の子。
</p>
ブラウザでの表示例

RERUN

新しいウインドウで表示する

ページ内の特定の場所にリンクを設定してみよう。 16:28

それでは、ページ内の特定の場所にリンクを設定してみましょう。

  1. 「Chapter12」フォルダ内の「story.html」をテキストエディタで開く
  2. 下記を参考に、リンク先となる要素にid属性を指定
Chapter12/story.html
<h2 id="section1">第一章 -ボブのお父さんの会社-</h2>
<p>
  ボブから「父親が経営している会社のWebサイトの更新を手伝って欲しい」と頼まれた。
  でも僕は、断ろうと考えていた。なぜなら僕は、<em>まだ</em>HTMLの勉強中で、とてもボブの期待に応えれる気がしなかったからだ
  <strong>他の人に頼んだほうが、きっといいホームページができる。</strong>
  その方がボブもボブのお父さんも喜ぶだろうと思い、断ることを決意した。
  </p>
<h2 id="section2">第二章 -ムカミの記憶-</h2>
<p>
  ムカミはWebプログラマーになるために日々勉強をしている。
  朝から晩まで、<em>ずっと</em>プログラムを書いているらしい。
  ただ、ムカミは<strong>物覚えがあまり良くない。</strong>
</p>
  1. 下記を参考に、リンクを設定するa要素をマークアップ
Chapter12/story.html
<h1>あらすじ</h1>
<ol>
  <li><a href="#section1">第一章</a></li>
  <li><a href="#section2">第二章</a></li>
</ol>
  1. 上書き保存し、ブラウザで確認
ブラウザでの表示例

RERUN

新しいウインドウで表示する

a要素の注意点 18:43

a要素のコンテンツ・モデルは透明という意味のトランスペアレントです。
具体的には親要素 （自分を挟んでいる要素）と同じコンテンツ・モデルになるという変わったコンテンツ・モデルです。
従ってHTML５からは以下のように 親要素のコンテンツ・モデルがフロー・コンテンツであればa要素の中にフロー・コンテンツの要素を配置することも可能です。
（div要素：グループ化を表す要素で、コンテンツ・モデルはフロー・コンテンツ）

a要素の中にフロー・コンテンツを配置した例
<div>
  <a href="https://creatorquest.jp/" target="_blank">
    <h2>CreatorQuest</h2>
    <p>僕がWebの勉強に使っているWebサイト</p>
  </a>
</div>
ブラウザでの表示例

RERUN

新しいウインドウで表示する

HTML5より前は、a要素はインライン要素しか配置できなかったので、昔からHTMLを触っている人はとても違和感を感じるかもしれませんが、HTM5ではこのようなマークアップが可能です。

練習問題 20:49

「Chapter12」　-> 「quest」フォルダ」内の「index.html」を開いて下記の問題を解いてみましょう。
なお、解けた問題は問題文の横のチェックボックスをオンにしましょう。

    • 文字列「ホーム」
      • リンク先：index.html
    • 文字列「企業情報」
      • リンク先：about-us.html
    • 文字列「会社概要」
      • リンク先：company.html
    • 文字列「よくある質問」
      • リンク先：faq.html
完成イメージ

RERUN

新しいウインドウで表示する

解答例

まとめ 24:40

リンクの設定方法はわかりましたか？

  • リンクする箇所は、a 要素で表す
  • リンク先は、href 属性で指定する
  • 新しいウインドウに表示する場合は、target 属性を使う