firefoxでのページ内リンクの表示とa要素について

前へ 次へ
このQ&Aのポイント
  • firefoxでのページ内リンクの表示に関する質問です。
  • IDとname属性をふった飛び先のテキスト部分で、firefoxでオンマウスで下線が出てしまう問題が発生しています。
  • 解決策として、idのみの指定や要素の記述変更などが考えられます。他に簡単な解決方法をご存知の方は教えてください。
回答を見る
  • ベストアンサー

firefoxでのページ内リンクの表示とa要素について

こんにちは、いつもお世話になります。 仕事でweb制作をしております。 ページ内リンクのfirefoxの表示に関して質問させてください！ IDとname属性をふった飛び先のテキスト部分、firefoxでみると オンマウスで下線が出てしまいます。 これは正しい挙動と聞いたこともありますが 意図した物ではないので出ないようにしたいです。 色々調べたのですがあまり解決策として下記2点ぐらいしか思いつきませんでした。。 (1)idのみの記述にする。。 IDのみの指定なら、もちろん発生しないのですが リンクに関しては今のところはまだ、ID/name両方振っといたほうが良いというのが つたない私の認識ですがいかがなのでしょうか。 (2)記述を変える 例としてこんな感じのhtmlです。 <a href="#F1">新メニュー登場！</a> <h4 class="course_title1"><a name="F1" id="F1">新メニュー登場！</a></h4> これを、下記のようにすると発生しませんでしたが、 aを空にすることに問題は無いのでしょうか。 ちなみに文法チェックだとエラーは出ませんでした。 <a href="#F1">新メニュー登場！</a> <h4 class="course_title1"><a name="F1" id="F1"></a>新メニュー登場！</h4> その他簡単な解決方法などご存知の方いらっしゃいましたらお願いします！

  • anoyo
  • お礼率66% (169/256)
  • HTML
  • 回答数3
  • ありがとう数2

質問者が選んだベストアンサー

  • ベストアンサー
  • uni-taka
  • ベストアンサー率46% (6/13)
回答No.3

a要素を使わず、h4にid="F1"を振ってやれば解決します。 nameは使う機会がほぼない属性ですし、XHTML1.1では使えません。 そんな感じでいかがでしょうか。

anoyo
質問者

お礼

回答ありがとうございます！ お礼遅くなりすいません。 そうしてみます。 ありがとうございました。

その他の回答 (2)

回答No.2

> オンマウスで下線が出てしまいます onmouseoverとかonmouseoutとかonmouseupとかonmouserdownとか onmousemoveと、「オンマウス」で始まるイベントは沢山あります が、区別できてますか。この場合のonは「～した時」であって、マ ウスの上になにかが乗っかったって話じゃありませんよ。 ところで、質問のような状況では、基本的にはHTML4.01の12.1.1に 書いてある通り、(1)でいいと思います。A要素を使いたい積極的な 理由があるようには見えませんし、ましてやname属性なんて、よほ ど古式ゆかしいブラウザを想定するか、多言語化で実体参照が欠か せないかでないと、優先的に使う意味がありません。 空のA要素は、たしかアクセシビリティ上の不都合があったように 記憶しています。

anoyo
質問者

お礼

回答ありがとうございます！ お礼遅くなりすいません。 そこまでしてa要素をふる理由も私にも不明ではあるのですが 世のサイトのソースを、見ると割とまだ両方振ってる記述が多く 見られるような気がしていたものですから、 こだわってしまってました。 ありあがとうございました。

noname#100277
noname#100277
回答No.1

course_title1か<a name="F1" id="F1">にtext-decoration: none; かな？ 未検証なので・・・

anoyo
質問者

補足

回答ありがとうございます！ お礼遅くなりすいません。 検証しましたが、だめです。 ありがとうございました。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. HTML

関連するQ&A

  • 外部ページから指定場所にリンクをさせる

    ページ内で、リンクをするとき、hrefに飛ばしたい場所を#で指定すれば、name属性のところに ページ移動させれることは知っているのですが、 外部ページから、指定の場所に飛ばすことはできないでしょうか？ ==========内部ページ内でリンクを作成する時(link.html)============= <h1>リンクテスト</h1> <h2>サンプル</h2> <h3><a name="menu" id="menu">メニュー</a></h3> <ul> <li><a href="#section1">メニュー1</a></li> <li><a href="#section2">メニュー2</a></li> <li><a href="#section3">メニュー3</a></li> </ul> <h3><a name="section1" id="section1">セクション1</a></h3> <p>メニュー1の内容。 ...</p> <h3><a name="section2" id="section2">セクション2</a></h3> <p>メニュー2の内容。 ...</p> <h3><a name="section3" id="section3">セクション3</a></h3> <p>メニュー3の内容。 ...</p> <p><a href="#menu">メニューに戻る</a></p> 上記ソースのメニュー部分を別ページ(top.html)に作成し、 リンクページの指定部分をメインで映るようにしたいのです。 例えば、下のメニュー3がクリックされたとき、 link.htmlのsection3の内容部分(link.htmlの下にある、セクション3)が画面中央に来るようにしたいのです。 ご教授お願いします。 ===top.hmtml(メニュー部分抜粋)================== <h1>リンクテスト</h1> <h2>サンプル</h2> <h3><a name="menu" id="menu">メニュー</a></h3> <ul> <li><a href="#section1">メニュー1</a></li> <li><a href="#section2">メニュー2</a></li> <li><a href="#section3">メニュー3</a></li> </ul>

    • ベストアンサー
    • HTML
  • FireFoxで＃を使った同ページ内リンクが動きません

    MTで作ったブログ形式のＨＰを作っています。 投稿記事の中で＃を使った同ページ内リンクを貼っていますが、 FireFoxではこのリンクが動作しません。 IEでは動作するのにFireFoxでは動作しないのは、何故なのでしょうか？ ちなみに私はこんなふうに書いています。↓ -------------------------------------------- <a href="#a">▼説明はこちらです。▼</a> <a name="#a"></a> ここに説明文が書いてあります。 -------------------------------------------- FireFoxで同ページ内リンクがちゃんと動くようにするには どうしたらいいでしょうか？

  • テーブル自体にページ内リンク

    テーブル自体にページ内リンクを貼りたいです。 以下のようにテーブルそのものにリンクを貼ると 正常に動作はするのですが、 htmlチェッカーで ”<table> を ×行目の <a>～</a> 内に書くことはできません。 ” という重大なエラーになってしまいます。 <a href="#r01">テーブルへ</a> <a name="r01" id="r01"><table class="table-01" summary="相談料金・弁護士費用のご案内"></a> そこで、以下のようにcaptionやthやtdにリンクを貼ってみたところ htmlチェッカーでのエラーは消えたのですが ブラウザによって正常にリンク先へ飛んでくれませんでした。 <caption><a name="r01" id="r01">××</a></caption> 上記だと、Firefoxだと正常に動きますがIEだと動きませんでした。 <th><a name="r01" id="r01">××</a></th> <td><a name="r01" id="r01">××</a></td> 上記だと、Firefox,IEともに正常に動きませんでした。 どのように修正したらいいのでしょうか？ ご教授お願いいたします！

    • ベストアンサー
    • HTML
  • Firefoxでアンカーリンクが飛ばない件

    こんにちわ。 Firefoxのみアンカーリンクが機能しません。 別ページには飛ぶのですが、そのページのTOPへ飛んでしまいます。 こういうことです。 B.htmlページ内からA.html内の#abc_01へ飛ばしたいのです。 しかしA.htmlのページTOPへ飛ばされ、ぜんぜーーん#abc_01へ飛んでくれず 機能しないのです。 しかし、ローカル環境では飛んでくれております。 ※A.html <h2 id="abc_01">ダミー</h2> ※B.html <li><a href=A.html#abc_01>ダミーはこちら！</a></li> 色々調べて、以下の事を試してみましたが代わりませんでした。 ■IDの名前を変更 ■name="abc_01"を付け加える。 Firefox　Ver.21.0 もう少しで納品の期日が迫ってきていますので急いでおります。 どなたかわかる方お返事お願いいたします。

    • ベストアンサー
    • HTML
  • 一部のjavascriptがfirefoxで効かない

    ホームページのコーディングをしている者ですが、一部のjavascriptがfirefoxで効きません。 クリックした際にサブメニューを表示させていのですが、firefoxだとクリックしてもサブメニューが表示されません。 （IE、safariは正常に表示されます） どなたか下記ソースでの間違えをご教授いただけますでしょうか。 よろしくお願いします。 【jsファイルの記述】 function dispChange(id) { if(id.style.display=="none"){ id.style.display="block"; } else{ id.style.display="none"; } } 【htmlファイルの記述】 <div id="sublist"><a href="JavaScript:dispChange(movieSub)">&gt;&gt;test</a> <div id="movieSub" STYLE="display:none"> <div class="SubSub">├<a href="#">test</a></div> <div class="SubSub">├<a href="#">test</a></div> <div class="SubSub">└<a href="#">test</a></div> </div> </div>

  • FireFoxだけちゃんとうごいてくれないです

    いつもお世話になっています。 Javascriptでメニューを閉じたり開いたりさせたくて難儀してます。 <script type="text/javascript"> <!-- // ツリーメニュー flag = false; function treeMenu(tName) { tMenu = document.all[tName].style; if(tMenu.display == 'none') tMenu.display = "block"; else tMenu.display = "none"; } //--> </SCRIPT> <li class="li> <a href="javaScript:treeMenu('treeMenu')">メニュー</a> </li> <DIV id="treeMenu" style="display:none"> <li class="li_sub"> <a href="index.html">　小メニュー１　</A> </li> <li class="li_sub"> <a href="index.html">　小メニュー２　</A> </li> </DIV> こんな感じでクリックすると小メニューが出てさらにクリックで非表示になるようにしています。 ＩＥ８やGoogleChromeですとうまくいきます。 （Safariではまだ試していません。） が・・・ FireFox3ではウンともスンともいいません。 記述自体がFirefox3では受け付けないのでしょうか？ 根本的に考え方が違うぞ！とか そういったご意見でもかまいません。 どうかお助けください。 よろしくお願いいたします。

  • ページ内の特定リンクで…

    同じページの特定の場所へのリンクについてお聞きしたいのですが、 リンク元に <a href="#name">リンク</a> リンク先に <a name="#name">リンク先</a> を使いますが、 同じウィンドウ内だとうまく飛び、 別ウィンドウで開くとうまく飛ばない方もいるようなのですが なぜでしょう？ 私はIE6.0で、Netscape7.0、Firefoxでも確認してみましたがどれも飛びました。 でも友人はIE6.0なのでうまく飛ばず、Firefoxだとうまく飛んだそうなのです。 これはPCの設定違いなのですか？ もしそうだとしたらどんな設定なのでしょうか？ パソコンの設定についてほとんど分からないので 教えてください。宜しくお願い致します。

    • ベストアンサー
    • HTML
  • ページ内リンクが動作しません

    IE6.0でCGIで動的に作成したHTMLでページ内リンクがききません。 <a href="foo.cgi#top">a</a> このように記述していてfoo.cgiで吐き出すHTML内には <a name="top"></a> があります。 FireFoxでは上の記述で問題なくページ内リンクがきくのですが、IEだけききません。 IE固有の問題だと思うのですが、とても困っています。 シェアの関係から言ってIEできいて、FireFoxできかないのならある程度許せるのですが逆はさすがにまずいです。 IEでもうまく動作させる方法はあるのでしょうか？ ちなみに <a href="foo.html#top">a</a> はうまく動いてくれます。動的に生成したページのみ無理なのです。 IE7.0でこの問題が解決されているようなら問題ないのですが、確認できていません。 ネットでもいろいろ調べてみましたがうまくヒットせず探しきれていません。

    • 締切済み
    • CGI
  • FireFoxでリンクをクリックしても飛ばない

    ・Firefoxで表示すると、左上にあるリンクをクリックしてもリンク先に飛びません。 (なぜか他のリンクはきちんと飛ぶ) LunascapeでGekkoエンジンにした時も同じ結果です。 ・IE 8.0/9.0 では、正確にリンク先に飛びます ・何かブラウザによって違う動きをするHTMLを書いてしまったのでしょうか? すみません、教えてください。 ---------- そこのところの記述ですが <p> <a href="http://********************.com/">index.htm</a> | <a href="http://********************.com/about_me.htm">About me</a> </p> FireFoxのみ これでリンク先に飛べません。 http://********************.com/index.htm内で 例えば、 <li><a href="**************.htm"> PCs, **********:ミニタワー</a> </li> と記述したところは、どちらのブラウザでもリンク先に飛べます ヒントや解決方法をいただければ幸いに存じます。

    • ベストアンサー
    • HTML
  • ページの途中にリンクするとそれより上部分が表示されない。

    ページの途中にリンクするとそれより上部分が表示されない。 HTML,css,javascriptを組み合わせてページを作っています。 リンク先：<a name="tochu" id="tochu"></a> リンク元：<a href="ファイル名#tochu">途中へ</a> と記述しております。リンクをクリックすると移動はするのですが、 リンク先の名前をつけたところがページの一番上になってしまい、 それより上部が表示されず、上にスクロールも出来ません。 ページ全体が上にずれ、画面外にはみ出してしまっている状態です。 cssのposition等の設定かと思い、探したのですがそのような記述はありません。 原因を思い当たる方、おられましたらよろしくお願いいたします。

    • ベストアンサー
    • HTML

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する