リンクの設定

文書の中の特定の場所へリンク

特定な場所に目印を付ける

今まではリンク先としてWebページ単位で指定していましたが、リンク先はWebページの文書の中の特定の場所へリンクを設定する事も可能です。特定の場所がページの先頭でなかった場合、リンク先へ移動すると指定した場所が表示されるように自動的にスクロールされます。

特定の場所へリンクを設定するには、リンク先となる特定の場所に目印を付けておく必要があります。その為、リンク先のWebページを編集できなければなりませんので必然的に自分で管理しているWebページが対象となります。(他のWebサイトであってもたまたまできる場合もあります)。

この形式のリンクを設定する場合、HTML/XHTMLの種類毎に記述方法が異なります。ここではHTML5について記述します。

HTML5の場合

HTML5ではa要素のname属性が廃止されるため、リンク先の場所へ目印を付けるにはid属性を使います。

<a id="名前">リンク先</a>

id属性はa属性に限らず様々な要素で指定することができます。例えばh2要素に次のようにid属性を付けることができます。

<h2 id="名前">テキスト</h2>

id属性の値として指定する名前は同じ文書内でユニークである必要があります。

リンク先としての記述方法はHTMLの場合と同じです。

<a href="リンク先を表すURI#名前">テキスト</a>

リンク先のURLの後にシャープ「#」を記述した後で目印に付けた名前を記述します。

具体的には次のように記述します。

リンク元のページから「baseball.html」の中の「中日ドラゴンズ」の箇所にリンクを張りたい場合には「baseball.html」は次のようになります。

<h2>読売ジャイアンツ</h2>
<p>
読売ジャイアンツはセントラル・リーグに所属し、本拠地は東京ドームです。
</p>
<h2 id="dragons">中日ドラゴンズ</h2>
<p>
中日ドラゴンズはセントラル・リーグに所属し、本拠地は名古屋ドームです。
</p>

HTML5ではh2要素などにid属性を指定できますので別途a要素を追加しなくても済むことです。もちろんid属性が指定できない場所に対してはa要素を同じように使ってid属性を指定することもできます。

そしてリンク元のWebページでは次のような記述を行います。

<a href="baseball.html#dragons">中日ドラゴンズ</a>

こちらの記述は同じです。

サンプル

では実際に試してみます。

今回はIT関連用語を解説するページ「it.html」を一つ作成しました。

保存場所は下の層「dict」にします。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>語句説明 - IT用語辞典</title>
</head>
<body>
<h1>語句説明</h1>
<p>
IT用語に関する語句説明を行います。
</p>
<h2><a id="homepage">ホームページとは</a></h2>
<p>
インターネットを使うと多くの企業や個人が情報を公開しています。利用者
はブラウザと呼ばれるソフトウェアを使い企業や個人が公開している情報を
閲覧できるのですが、公開している文書の1ページ1ページをWebページと呼
びます。
</p>
<h2><a id="browser">Webブラウザとは</a></h2>
<p>
インターネット上で公開されているWebページなどの様々な情報を見るため
に使用するソフトウェアがWebブラウザです。単にブラウザと呼ばれること
も多いです。
</p>
<h2><a id="html">HTMLとは</a></h2>
<p>
HTMLはHyperText Markup Languageの略で、Webページを作成する時に使用
される言語の一つです。HTMLを使用して文書を作成することで、文書の構
造を明確にしたり文書の中に画像や動画などを配置することができます。
</p>
<h2><a id="blog">ブログとは</a></h2>
<p>
時事のニュースに対して自分の意見などをWebサイトで公開されたものを、
Webサイトに記録するという意味でWeb＋Log＝Weblog(ウェブログ)と呼ばれ
るようになりました。そしてウェブログが略されたブログが一般的に使わ
れるようになっています。
</p>
<p>
<a href="../terms_index.html">IT用語辞典目次へ戻る</a>
</p>
</body>
</html>

今回はHTML5で作成しています。一つのWebページに複数の項目の解説を記述し、各項目毎にリンクの目印となるようa要素でマークアップしてid属性を指定しています。

また各項目への目次として「terms_index.html」を作成しました。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>IT用語辞典</title>
</head>
<body>
<h1>IT用語辞典</h1>
<p>
IT用語辞典の目次です。
</p>
<p>
<a href="dict/it.html#homepage">ホームページとは</a>
</p>
<p>
<a href="dict/it.html#browser">Webブラウザとは</a>
</p>
<p>
<a href="dict/it.html#html">HTMLとは</a>
</p>
</body>
</html>

では「terms_index.html」ファイルをブラウザで開いてみます。

各項目のリンクはファイル内の各項目に対応した場所へのリンクとなっています。では「Webブラウザとは」をクリックしてみます。

リンク先である「it.html」が表示されますが、文書の先頭が表示されているのではなく名前として「browser」が指定してある場所が先頭に表示される位置に自動的に移動しています。

では「terms_index.html」に戻って「HTMLとは」をクリックしてみます。

今度は名前として「html」が指定してある場所が先頭に表示される位置に自動的に移動しています。

再び「terms_index.html」に戻って「ホームページとは」をクリックしてみます。

今度は名前として「homepage」が指定してある場所が先頭に表示される位置に自動的に移動しています。

以上で、ページ内リンクの練習は終わりです。