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

●同じページの特定の位置にリンクする

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

【HTML】↓

<h2><a name="top">●同じページの特定の位置にリンクする</a></h2>

〜途中のHTMLソース省略〜

<p><a href="#top">ページトップへ戻る</a></p>

 この方法だとウィンドウズ版IE(6.0、7.0)では問題ないのですが、Netscape、Mozilla、Firefox、Operaの各ブラウザで確認すると到達点の位置(リンク先としてのテキスト部分)にマウスポインタをポイントすると 「a:hover」 のスタイルで指定したリンク色に変化してしまいます。この形でのname属性、id属性の単独指定または、両方を指定しても結果は同じです。これは、Netscape、Mozilla、Firefox、OperaのブラウザがCSS(2)の仕様に厳密に従っているためです。これを回避するには次のように到達点の親要素に id属性を配置します。

■ id属性でアンカー(リンク)指定

<p><a href="#jump">移動元</a></p>

〜途中略〜

<h2 id="jump">ジャンプ先</h2>

 XHTML1.0 Strict、XHTML1.1、XHTML Basicの場合は a要素に対して、name属性が使えませんので、これらの種類で同じページの特定の位置にリンクする場合は、こちらの id属性による指定を使うようにしてください。なお、DTD(文書型定義)の種類、バージョンに関係なく、h1〜h6、div要素、p要素などのブロック要素に対して、name属性は使えません。汎用属性である id属性と異なり、name属性は使用が限定されている要素もありますので注意してください。

■フラグメント識別子について

 同じページの特定の位置にジャンプする場合でid属性を使ったフラグメント識別子は1回しか使えません。すなわち、id属性の属性値としての名前は一対しか使えませんのでご注意ください。移動先も移動元に使うのも貼るのもid属性で使うフラグメント識別子はひとつしか配置できません。言い方を変えますと、必要な数だけそれぞれ違うフラグメント識別子を用意する必要があります。実際は幾つかの移動元に同じ名前のフラグメント識別子を指定しても動作しますが、同じフラグメント識別子を数個所指定するのは文法的にエラーで使うのは避けたほうが賢明です。

 それ以外のアンカーの到達点として、目的の要素(テキスト部分)の真上にフラグメント識別子と同じ名前が入ったa要素を配置する方法があります。実践においてはすでに要素に対して id属性を使っており、使いたくても使えないケースもあるかと思いますので参考のため、紹介しておきます。

【HTML(XHTML】↓

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

〜途中略〜

<p><a href="#jump">ジャンプ元</a></p>

 こちらの方法はHTML4.01、XHTML 1.0 Transitional、XHTML1.0 Frameset のDTD(文書型定義)で使えますが、XHTML1.0 Strict、XHTML1.1、XHTML Basicでは a要素に対して、name属性が使えないということで文法的にエラーとなってしまいます。本来、a要素はインライン要素なので必ず、親要素(ブロック要素)の入れ子として適用させる必要があります。かと言って、1番最初に解説した方法ではブラウザによって、アンカーテキストをマウスポインタでポイントしたときに色が変化してしまいます。

 アンカーテキストにマウスポインタでポイントしたときに色の変化を回避する方法としては次にような方法もあります。それはCSSのほうで通常のリンク指定に“要素名[属性名]”の属性セレクタを取り入れた疑似クラスを追加する方法です。ただし、属性セレクタは、肝心のウィンドウズ版IEとMac版IEが対応していません。

【CSS】↓

a:link {
 color: #bff;
 text-decoration: underline;
}
a:visited {
 color: #fff;
 text-decoration: underline;
}
a:hover {
 color: #f0f;
 background-color: #fff;
 text-decoration: none;
}
a:active {
 color: #f00;
 text-decoration: underline;
} /* ↑ここまでは通常のリンク指定。以下を追加する。↓ */
a[id]:hover, a[id]:active {
 background-color: transparent;
 color: inherit;
 text-decoration: none;
}

【CSS】↓

a:link {
 color: #bff;
 text-decoration: underline;
}
a:visited {
 color: #fff;
 text-decoration: underline;
}
a:hover {
 color: #f0f;
 background-color: #fff;
 text-decoration: none;
}
a:active {
 color: #f00;
 text-decoration: underline;
}
a[id]:hover, a[id]:active, a[name]:hover, a[name]:active {
 background-color: transparent;
 color: inherit;
 text-decoration: none;
}

【色が変化したサンプル画像】↓

ジャンプ先にマウスポインタをポイントすると写真のように色が変化する。

【ポイント】↓

 アンカーテキストにid属性で指定している場合は、[id]を使い、name属性を使っている場合は[name]を使います。“transparen”は透明の意味で、“inherit”は相続する、継承するという意味があり、この場合、親要素で指定したフォントカラーを強制的に継承させています。

 サンプルでは“inherit”というキーワードを使っていますが、このキーワードは子要素にスタイルの継承を行わないプロパティに追加指定すると子要素にスタイルを強制的に継承させることができます。ただし、“inherit”のキーワードに正しく対応しているのは、Netscape6以降、Opera7以降、および、Firefoxブラウザです。(そのほかのブラウザは未確認です。)また、ウィンドウズ版IEは“inherit”のキーワードに対応していません。上の二つはサンプルですが、Netscape (v7.1)、Firefox(v2.0)、Opera(v9.0)のバージョンで動作を確認しています。

■補足↓

1 top、jumpの属性値はページ作者が任意の半角英数字の名前を付けます。(記号も一部使えます)また、#の後に続く任意に付ける名前のことをフラグメント識別子と言います。そのほか、記号や数字など、フラグメント識別子の先頭文字として使えない文字があります。(#は半角記号で、♯のシャープと似ていますが、番号記号、井げた、または、ナンバーサインと呼ばれています。そのほかにもいろいろな名称があります。)

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

■まとめ↓

1 XHTML 1.1、XHTML Basicの場合はid属性を使ってアンカーを指定する。(name属性は使えない。)

2 XHTML 1.0 Transitional、XHTML1.0 Frameset DTDで id属性を使う場合は既存(過去)のブラウザとの互換性を考りょして、name属性を同時に指定することもできます。

【移動のサンプル】↓

※ここのページはXHTML 1.0 Transitional DTDで作成されています。併せて、タイトルにアンカーを付けていますので、ウィンドウズ版IE以外のブラウザでポイントしてみると色が変化します。

■関連ページ

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

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