Netscape / Firefox でのページ内ジャンプ動作 : Studio Ponytail

Netscape / Firefox でのページ内ジャンプ動作

2005年3月 1日 00:43 | コメント (2) | トラックバック (0)

　Netscape / Firefox はアンカーを使ってページ内にジャンプさせた場合、name もしくは id 属性で目印をつけた要素の範囲内に <a> がないかと必死に探す仕様になっているようです。アンカー部分と <a> のあった場所が1画面に収まるときは問題ないのですが、そうでない場合はアンカーよりも <a> の表示を優先させるようになっています。（そもそもアンカーを広範囲の要素に作るべきでない、という議論はこの際おいといて）

　この文章は HTML に興味がある人や「記事のインデックスを作る」を使う人の一部に向けた、やや特殊な内容です。

Netscape / Firefox での動作の違い

通常の文章の場合、章タイトルのような狭い範囲にアンカーを設定するので、アンカーと <a> が画面に収まらない事はほとんどありません。（それ以前に、<a> が存在する事自体があまり無い）
　しかし、blog で各記事にジャンプさせるためにアンカーを利用するとそれが起こる場合があります。1つの記事を枠で囲んでいるデザインなどがこの典型で、この場合タイトル部分にアンカーを設定すると枠部分がページ上端から切れてしまうため、枠部分（すなわち記事全体）にアンカーを設定する事になります。
　そのため、このページの「記事のインデックスを作る」でも、タイトルではなく <-- BIGIN entry --> 直後の要素に id 属性を付加する方法を紹介しています。
　ほとんどの blog ではタイトルに個別表示ページへのリンクが設定してあるので、その部分が細い枠に囲まれて表示されるだけで済みますが、タイトル部分にリンクが無いと前述の不具合が生じる可能性があります。つまり、Netscape / Firefox は本文中にリンク文字が無いかと必死に探し、見つけたかと思うとそこまでジャンプしてしまいます。（「アンカー部分を表示したけど、リンクを探してどんどん下に進んでしまい、見つけたところで止まった」といった表示になります）
　理由が分かっているので対処法もそのままですが、 <-- BIGIN entry --> 直後の要素に id 属性を付加するのではなく以下のように、a name をまるまる追加してください。

<-- BIGIN entry -->
<a name="e_id{entry_id}" id="e_id{entry_id}">
<!-- BEGIN seque........

　この方法で上記の不具合は避けられますが、ジャンプする位置が上方向に少しズレるという弊害があります。以下は実際にページ内ジャンプを行った直後の表示状態で、この中途半端な隙間が生じるのも Netscape / Firefox 特有の現象です。