ブラウザ依存？<a name="#xxx" id="#xxx"></a>へ飛ばない

ブラウザ依存でしょうか？・・・

<li class="yyy"><a href="hoge.html#xxx">ホゲ</a></li>
と記述しているリンクをクリックして、URLは
http://hogehoge.com/hoge.html#xxx
へ移動するのですが、
hoge.html内に
<a name="#xxx" id="#xxx"></a>
と記述している指定箇所に飛んでくれません。

ＩＥ７は正常に飛んでくれますが、
Firefox, Safari, Opera, GoogleChromeなど、
ＩＥ７以外のブラウザを用いると飛んでくれないのです。

この機能はＩＥだけの機能だったでしょうか？
ご存知の方がいましたら、ご教授いただけると幸いです。
よろしくお願いします。

No.1 回答者： pasocom 回答日時： 2008/10/07 14:23

<a name="#xxx" id="#xxx"></a>

のうち「id="#xxx"」は不要ではないでしょうか。
単に「<a name="#xxx"></a>」
だけなら良いと思うのですが。

この回答へのお礼

ご回答ありがとうございました。
name と id の概念を、今一度、調べてみます。

お礼日時：2008/10/07 15:18

No.2 回答者： yambejp 回答日時： 2008/10/07 14:24

<a name="xxx" id="xxx"></a>

とすればよいでしょう。
ハッシュについて勘違いしてますね？

この回答へのお礼

ご回答ありがとうございます。

#はいらなかったんですね。
前任者が#付きで記述していたので、そのままで使っていました。

同html内で、例えば、ページ上部に飛ばす場合は、
<a href="#pagetopr">ページ上へ↑</a></p>
のように#付きで問題なく動作しているので、
別htmlの場合、#を付けないということですね。

お礼日時：2008/10/07 15:12

No.3 回答者： abril 回答日時： 2008/10/07 14:53

ANo.2様が正解を出しておられます。

つまり、

> ＩＥ７は正常に飛んでくれますが、

こちらの方が「正常」なわけではなくおかしな挙動です。
#は<a href="～">ホゲ</a>の方にのみ指定するもので、呼び先<a name="～" id="～"></a>の方には付きません。
それから、蛇足ですが、

> <a name="#xxx" id="#xxx"></a>

の様に、要素がないところにアンカーを打つ、というのも推奨されません。呼び先として妥当な箇所にアンカーもマークアップするべきです。
また、id属性は不要という事もありません。むしろ、name属性の方が廃止の方向にあります（【参考】http://w3g.jp/xhtml/dic/a）。

この回答への補足

ご回答ありがとうございます。

> <a name="#xxx" id="#xxx"></a>
の様に、要素がないところにアンカーを打つ、というのも推奨されません。呼び先として妥当な箇所にアンカーもマークアップするべきです。

ということは、
<a name="xxx" id="xxx">●●●●●</a>
のように、なにがしかの要素を入れ、アンカー打ちするのが良いということでしょうか？

補足日時：2008/10/07 15:16

No.4 回答者： abril 回答日時： 2008/10/07 15:50

ANo.3です。

> <a name="xxx" id="xxx">●●●●●</a>
> のように、なにがしかの要素を入れ、アンカー打ちするのが良いということでしょうか？

結果はそうなる場合もありますが、考え方が逆になっています。「飛んで欲しい箇所が予め存在しているのだから、その要素を個別識別できる目印を適切に打ってマークアップする」という意味です。
例えば、飛び先が以下の様な内容になっているとします。
-----------------------------------------------------------
<h1>大見出し</h1>
<h2>小見出し</h2>
<p>文章…</p>
-----------------------------------------------------------
で、「大見出し」の箇所に飛んで欲しいのであれば、
-----------------------------------------------------------
<h1 id="xxx">大見出し</h1>
-----------------------------------------------------------
もしくは、
-----------------------------------------------------------
<h1><a name="xxx" id="xxx">大見出し</a></h1>
-----------------------------------------------------------
とすべきでしょう、という事です。ただし先程の回答でも触れましたが、name属性はDOCTYPEによって非推奨又は廃止、となっていますのでご自分のニーズに合った方法で記述して下さい。XHTML1.1では前者の記述が必須となります。（【参考】http://w3g.jp/webstandards/optimize/anchor）

この回答へのお礼

皆さん、ありがとうございました。
いただいた内容を基にソースを見直してみたいと思います。

お礼日時：2008/10/20 20:05

No.5 ベストアンサー 回答者： ok_kkkkkk 回答日時： 2008/10/07 16:16

>同html内で、例えば、ページ上部に飛ばす場合は、

><a href="#pagetopr">ページ上へ↑</a></p>
>のように#付きで問題なく動作しているので、
>別htmlの場合、#を付けないということですね。

「#」は続く文字列がid値であることを明示します。
同html／別htmlは関係ありません。


・飛び先となる要素にはid値を書きます。
　<タグ id="xxx">

　→「id=」と書いているので、さらに「#」を付けて
　　「これはid値ですよ」と明示する必要はありません。
　

・リンクのhrefには"#"＋id値を書きます。
　同html　<a href="#xxx">
　別html　<a href="hoge.html#xxx">

　→「xxx」だけではパスの一部と認識するので
　　「#」をつけて「これはid値ですよ」と明示します。
　→hrefにページの指定が無いなら（同html）、
　　同html内の「xxx」というid値の要素へ移動します。
　→hrefにページの指定があるなら（別html）、
　　指定html内の「xxx」というid値の要素へ移動します。

この回答へのお礼

皆さん、ありがとうございました。
いただいた内容を基にソースを見直してみたいと思います。

お礼日時：2008/10/20 20:06

No.6 回答者： higekuman 回答日時： 2008/10/07 16:47

<a href="#pagetopr">ページ上へ↑</a>

これは、

<a name="pagetopr"></a>　のところにジャンプします。

<a name="#pagetopr"></a>　のところにジャンプするわけじゃないです。

そして、もしページの最上部に　<a name="#pagetopr"></a>　という記述があるのであれば、<a href="#pagetopr">ページ上へ↑</a>　のジャンプすべきところが無いということになります。

そして、IEだけはそのページのトップに飛ぶようになっているだけだと思います。もしくは、<a name="#pagetopr"></a>　と書いてあっても、<a name="pagetopr"></a>　と同じように扱うことにしてるのか。

ジャンプすべきところが見つからないから、どこにもジャンプしないというIE以外のブラウザのほうが、命令に忠実ということになるのかもしれません。

試しに、<a name="#pagetopr"></a>　をページの最上部ではなく最下部に書くと、どうなりますか？

この回答へのお礼

皆さん、ありがとうございました。
いただいた内容を基にソースを見直してみたいと思います。

お礼日時：2008/10/20 20:06

No.7 回答者： 0wl 回答日時： 2008/10/10 13:37

もしかして、idやnameを数字から始まる名前を付けていませんか？

もし、そうなら、アルファベットから始まる名前を付けてみてください。

的外れでしたら、失礼しました。