リンクを表す要素 0:12

HTMLには別のHTMLファイルに移動するハイパーリンクという機能があります。
今回はそのハイパーリンクを利用するための要素を学習しましょう。ハイパーリンクは
a
要素にhref
属性を使ってをリンク先を指定します。
要素名 | 意味・役割 |
---|---|
a |
リンク |
RERUN
リンクしたい箇所を、a
要素で挟む。
0: 51
a
要素は、anchorの略で別のHTMLファイルなどにハイパーリンクを定義します。
アンカーとは船の錨のことで、繋がっている他のHTMLファイルをたぐり寄せる要素です。
なお、
a
要素に挟まれた文字列のことをアンカーテキストと呼びます。
- カテゴリ
- コンテンツ・モデル
- トランスペアレント(透明)
- 主な属性
a
要素の基本的な使い方
a
要素は、ハイパーリンクを設定したい箇所を、<a>
〜 </a>
タグで挟み、
href
属性を用いてリンク先を指定します。
href
属性は、hypertext referenceの略で、ハイパーリンクのリンク先を指定する属性です。
リンク先のパスの指定方法は、Chapter13で詳しく説明します。
a
要素の使い方<a href="リンク先のパス">アンカーテキスト</a>
同じフォルダ内にあるHTMLファイルにリンクするサンプル
同じフォルダ内にあるHTMLファイルにリンクする場合は、リンク先のパスに、相手のファイル名を記述すればリンクできます。
<p>
なんとか<a href="faq.html">ボブの父親の会社のよくある質問ページ</a>を更新できた。
</p>
RERUN
外部のサイトにリンクするサンプル
外部のWebサイトにリンクしたい場合は、そのページのURLをリンク先のパスに指定します。
<p>
<a href="https://creatorquest.jp/">CreatorQuest</a>へ
</p>
RERUN
基本的なリンクを設定してみよう 5:58
それでは、a
要素を使って基本的なリンクを設定してみましょう。
- 「Chapter12」フォルダ内の「index.html」をテキストエディタで開く
-
下記を参考に
a
要素をマークアップ
<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>
- 上書き保存し、ブラウザで確認
RERUN
リンク先を新しいウインドウで表示する方法 12:21
リンク先を新しいウインドウまたはタブで表示したい場合は、a
要素に、target
属性というリンク先を表示する場所を指定する属性を用いて、属性値に "_blank" と指定します。
<a href="リンク先のパス" target="_blank">アンカーテキスト</a>
別ウインドウでリンク先を表示するサンプル
<p>
僕は<a href="https://creatorquest.jp/" target="_blank">CreatorQuest</a>でWebの勉強をしている。
</p>
RERUN
リンク先を新しいウインドウで表示してみよう 12:53
それでは、target
属性を使ってリンク先を新しいウインドウまたはタブで表示してみましょう。
- 「Chapter12」フォルダ内の「index.html」をテキストエディタで開く
-
下記を参考に、
target
属性を追記
<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>
- 上書き保存し、ブラウザで確認
RERUN
ページ内の特定の場所にリンクする方法 14:24
同じページ内の違う箇所にリンクすることも可能です。
その場合はまず、リンク先
(ジャンプして来てほしい場所)となる要素に、グローバル属性の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
それでは、ページ内の特定の場所にリンクを設定してみましょう。
- 「Chapter12」フォルダ内の「story.html」をテキストエディタで開く
-
下記を参考に、リンク先となる要素に
id
属性を指定
<h2 id="section1">第一章 -ボブのお父さんの会社-</h2>
<p>
ボブから「父親が経営している会社のWebサイトの更新を手伝って欲しい」と頼まれた。
でも僕は、断ろうと考えていた。なぜなら僕は、<em>まだ</em>HTMLの勉強中で、とてもボブの期待に応えれる気がしなかったからだ
<strong>他の人に頼んだほうが、きっといいホームページができる。</strong>
その方がボブもボブのお父さんも喜ぶだろうと思い、断ることを決意した。
</p>
<h2 id="section2">第二章 -ムカミの記憶-</h2>
<p>
ムカミはWebプログラマーになるために日々勉強をしている。
朝から晩まで、<em>ずっと</em>プログラムを書いているらしい。
ただ、ムカミは<strong>物覚えがあまり良くない。</strong>
</p>
-
下記を参考に、リンクを設定する
a
要素をマークアップ
<h1>あらすじ</h1>
<ol>
<li><a href="#section1">第一章</a></li>
<li><a href="#section2">第二章</a></li>
</ol>
- 上書き保存し、ブラウザで確認
RERUN
a要素の注意点 18:43
a
要素のコンテンツ・モデルは透明という意味のトランスペアレントです。
具体的には親要素
(自分を挟んでいる要素)と同じコンテンツ・モデルになるという変わったコンテンツ・モデルです。
従ってHTML5からは以下のように
親要素のコンテンツ・モデルがフロー・コンテンツであればa
要素の中にフロー・コンテンツの要素を配置することも可能です。
(div要素:グループ化を表す要素で、コンテンツ・モデルはフロー・コンテンツ)
<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
属性を使う