XHTML/CSS・トップ | HP編・目次

●ほかのページの特定の位置にリンクする

 ほかのWebページの特定の位置に移動(ジャンプ)させるときのリンク指定は次のように指定します。

【HTML】↓

■ジャンプとしてのリンク元↓

<p><ahref=" 〜 ファイル名+#+フラグメント識別子">移動元の文字列</a></p>

■同じく、リンク元サンプル↓

<p><a href=" 〜 #jump">移動元の文字列</a></p>

※ 〜はパス、ファイル名はピリオド( . )、拡張子を含みます。フラグメント識別子とは 「#」記号の後に続くページ作者が任意で付ける固有の名前のことです。フラグメント識別子で使える名前は半角英字です。数字や記号の一部も使えます。また、#は半角記号です。(#は♯のシャープと似ていますが、番号記号、井げた、または、ナンバーサインと呼ばれていますが、ほかにもいろいろな名称があります。)

■ジャンプ先↓

<h3 id="jump">ジャンプ先の文字列</h3>

【補足】↓

 実践においては、すでに使っている場合など、id属性が同じ要素に対して使えないケースもあるかと思いますので別の方法も紹介しておきます。

<a id="jump" name="jump"></a>
<div>要素内容</div>

 ただし、この方法はHTML4.01、XHTML 1.0 Transitional、XHTML1.0 Framesetで使えますが、XHTML1.0 Strict、XHTML1.1、XHTML Basicでは親要素に適用しない a要素を配置するとエラーとなります。また、XHTML1.1、XHTML Basicでは a要素に対して、「name属性」は廃止されており、使用することができません。エラーを避けるには最初の解説のように親要素に直接、id属性を指定する方法でアンカーを配置してください。

※ここでは name属性と id属性の両方を指定した場合を解説していますが、id属性のみを使った場合、または name属性のみを使った場合でも上記のDTD(文書型定義)のケースで同じ結果となります。

■注意

・ジャンプの到達点↓

<p><a name="jump">ジャンプ先</a></p>

 この方法だとNetscape、Mozilla、Firefox、Operaのブラウザで到達点の位置(テキスト部分)にマウスポインタをポイントすると「a:hover」 の擬似クラスで指定したリンクカラーに変化してしまいます。(別項の「同じページの特定の位置にリンクする」をご参照ください。)

■まとめ

※ XHTML 1.1、XHTML Basicの場合は a要素に対して name属性が使えませんので代わりに id属性を使います。

※ XHTML Basicとは携帯電話、PDAなど携帯情報端末(モバイル)向けのXHTMLモジュール。W3Cによって仕様が勧告されています。ただし、使える要素や属性はXHTML1.0、XHTML1.1に比べ、限られています。

【サンプル】↓

※トップページの「脚注」もこのWebページに適用されます。

■関連ページ

XHTML/CSS・目次 | HP編・目次

Copyright (C) 2005 http://www.xml.vc/