- Home ›
- ホームページ作成入門 ›
- リンクの設定
文書の中の特定の場所へリンク
今まではリンク先としてWebページ単位で指定していましたが、リンク先はWebページの文書の中の特定の場所へリンクを設定する事も可能です。特定の場所がページの先頭でなかった場合、リンク先へ移動すると指定した場所が表示されるように自動的にスクロールされます。
特定の場所へリンクを設定するには、リンク先となる特定の場所に目印を付けておく必要があります。その為、リンク先のWebページを編集できなければなりませんので必然的に自分で管理しているWebページが対象となります。(他のWebサイトであってもたまたまできる場合もあります)。
この形式のリンクを設定する場合、HTML/XHTMLの種類毎に記述方法が異なりますので順に確認していきます。
HTML4.01の場合
HTMLではa要素のname属性を使ってリンク先の場所へ目印を付けます。
<a name="名前">テキスト</a>
HTML文書の中のリンクを行いたいテキストや画像に対してa要素でマークアップすることで目印を作成できます。この時「name」属性の値として名前を指定します。この名前は同じ文書内でユニークである必要があります。
そしてリンク先からは目印に対して次のようにhref属性の値を設定します。
<a href="リンク先を表すURI#名前">テキスト</a>
リンク先のURLの後にシャープ「#」を記述した後で目印に付けた名前を記述します。
具体的には次のように記述します。
リンク先のWebページとして「baseball.html」が次のようなものだった場合を考えて見ます。
<h2>読売ジャイアンツ</h2> <p> 読売ジャイアンツはセントラル・リーグに所属し、本拠地は東京ドームです。 </p> <h2>中日ドラゴンズ</h2> <p> 中日ドラゴンズはセントラル・リーグに所属し、本拠地は名古屋ドームです。 </p>
リンク元のページから「baseball.html」の中の「中日ドラゴンズ」の箇所にリンクを張りたい場合には「baseball.html」を次のように変更します。
<h2>読売ジャイアンツ</h2>
<p>
読売ジャイアンツはセントラル・リーグに所属し、本拠地は東京ドームです。
</p>
<h2><a name="dragons">中日ドラゴンズ</a></h2>
<p>
中日ドラゴンズはセントラル・リーグに所属し、本拠地は名古屋ドームです。
</p>
そしてリンク元のWebページでは次のような記述を行います。
<a href="baseball.html#dragons">中日ドラゴンズ</a>
これでリンク先の特定の場所へリンクを設定することが出来ました。
XHTML1.1及びXHTML Basicの場合
XHTML1.1及びXHTML Basicではa要素のname属性が廃止されるため、リンク先の場所へ目印を付けるにはid属性を使います。
<a id="名前">リンク先</a>
使い方はa要素のname属性と同じですが、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>
HTMLの場合との違いは、HTMLの場合はリンク先の目印としてa要素を使っていましたがXHTML1.1などではh2要素などにid属性を指定できますので別途a要素を追加しなくても済むことです。もちろんid属性が指定できない場所に対してはa要素を同じように使ってid属性を指定することもできます。
そしてリンク元のWebページでは次のような記述を行います。
<a href="baseball.html#dragons">中日ドラゴンズ</a>
こちらの記述は同じです。
なお、id属性はHTML4.01から利用できるようになっていますのでHTML4.01であっても同じように記述することが出来ます。なぜHTMLでid属性を使用しないかと言うとブラウザによってはリンク先の目印としてid属性を使えないものもあるためです。その為HTMLではa要素のname属性を使っています。XHTML1.1などではname属性は使用できませんのでブラウザによっては特定の場所へのリンクが使えない場合もあります。
XHTML1.0の場合
XHTML1.0の場合もXHTML1.1と同じく場所へ目印を付けるにはid属性を使います。ただXHTML1.1と異なりa要素のname属性も記述が出来るためid属性に未対応のブラウザ対策としてid属性とname属性を併用することが可能です。
<a id="名前" name="名前">テキスト</a>
注意点として、id属性の値とname属性の値には同じ名前を指定して下さい。
使い方はHTMLの場合と同じです。詳しくは次のサンプルを見てください。
サンプル
では実際に試してみます。
今回はIT関連用語を解説するページを一つ作成しました。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>語句説明 - IT用語辞典</title>
</head>
<body>
<h1>語句説明</h1>
<p>
IT用語に関する語句説明を行います。
</p>
<h2><a id="homepag" name="homepage">ホームページとは</a></h2>
<p>
インターネットを使うと多くの企業や個人が情報を公開しています。利用者
はブラウザと呼ばれるソフトウェアを使い企業や個人が公開している情報を
閲覧できるのですが、公開している文書の1ページ1ページをWebページと呼
びます。
</p>
<h2><a id="browser" name="browser">Webブラウザとは</a></h2>
<p>
インターネット上で公開されているWebページなどの様々な情報を見るため
に使用するソフトウェアがWebブラウザです。単にブラウザと呼ばれること
も多いです。
</p>
<h2><a id="html" name="html">HTMLとは</a></h2>
<p>
HTMLはHyperText Markup Languageの略で、Webページを作成する時に使用
される言語の一つです。HTMLを使用して文書を作成することで、文書の構
造を明確にしたり文書の中に画像や動画などを配置することができます。
</p>
<h2><a id="blog" name="blog">ブログとは</a></h2>
<p>
時事のニュースに対して自分の意見などをWebサイトで公開されたものを、
Webサイトに記録するという意味でWeb＋Log＝Weblog(ウェブログ)と呼ばれ
るようになりました。そしてウェブログが略されたブログが一般的に使わ
れるようになっています。
</p>
<p>
<a href="../index.html">目次へ戻る</a>
</p>
</body>
</html>
今回はXHTML 1.0 Transitionalで作成しています。一つのWebページに複数の項目の解説を記述し、各項目毎にリンクの目印となるようa要素でマークアップしてid属性とname属性を指定しています。
また各項目への目次として「index.html」を作成しました。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html;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>
では「index.html」ファイルをブラウザで開いてみます。
各項目のリンクはファイル内の各項目に対応した場所へのリンクとなっています。では「Webブラウザとは」をクリックしてみます。
リンク先である「it.html」が表示されますが、文書の先頭が表示されているのではなく名前として「browser」が指定してある場所が先頭に表示される位置に自動的に移動しています。
では「index.html」に戻って「HTMLとは」をクリックしてみます。
今度は名前として「html」が指定していある場所が先頭に表示される位置に自動的に移動しています。
( Written by Tatsuo Ikura )
著者 / TATSUO IKURA
初心者～中級者の方を対象としたプログラミング方法や開発環境の構築の解説を行うサイトの運営を行っています。