• ベストアンサー

ページ内リンクのidって・・・

超初級ですがHTML+CSSでホームページを作っています。 ページの最下段によく見る「TOPへ戻る」といったページ内リンクについてですが、 出発点に <a href="#abc">TOPへ</a> 到達点に <div id="abc"></div> という記述をし、この「abc」にスタイルを指定しても問題ないでしょうか? (例えば到達点のdivには会社名を入れ、テキストの大きさや色を指定するとか) 語句などの使い間違いあるかもしれませんが、よろしくお願いします。

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

  • ベストアンサー
  • torayoshi
  • ベストアンサー率62% (910/1449)
回答No.1

特に問題はないでしょう。 試しにサンプルを作りW3CのCSSチェッカーにかけてもエラーなしでした。 チェッカーにかけたサンプル↓ http://www16.plala.or.jp/zaq_501/sample/sample.html あと、これは直接の問題というわけではないのですが、 近い将来xhtmlがブラウザ標準仕様となった場合は、 scriptやCSSは外部ファイルにするべきです。

epocari
質問者

お礼

ありがとうございます! 検証&アドバイスまでして頂いて感動です。 他のサイトを参考にすると、全てといっていいほどわざわざ 『<div id="abc"></div>』の様な空のボックスを置いているので、 不安になっていました。 まだまだ行き詰るかと思いますので、またご教授頂けると助かります。 本当にありがとうございました。

関連するQ&A

  • 同じページ内にリンクする

    同じページ内にリンクする方法で、ハッシュリンクがあります。 ジャンプする到着点に、idでスタイルシートを指定している場合、どのようにすれば良いですか? リンク元(出発点) <a href="#a">Aの位置へジャンプ</a> リンク先(到達点) <div id="a" id="スタイルシート">ここがAの位置</div>

    • ベストアンサー
    • CSS
  • 「同じページ内にリンクする」で、リンク先にスタイルシートのid="st

    「同じページ内にリンクする」で、リンク先にスタイルシートのid="style"があった場合、どのように対処すれば良いのでしょうか? よろしくお願いします。 「同じページ内にリンクする」とは リンク元(出発点) <a href="#a">Aの位置へ移動</a> リンク先(到達点) <div id="a">ここがAの位置</div>

  • 同一ページの先頭へのリンク

    縦長のページの下に ▲topへ というリンクを作って、ページの先頭に戻れるようにしたいと思っています。 <a href="#top">▲topへ</a>としていますが、IE以外ではページの頭に飛んでくれません。 ▲topへ の文字の指定や枠を作るため<div><span>で囲んでいますが、それが影響しているのでしょうか? 本文はHTML4.01です。 色々見て、考えているのですが、どうしても分りません。 どうしたらページ先頭へ飛ぶように直せるでしょうか。 教えてください。よろしくお願いします。

    • ベストアンサー
    • HTML
  • リンクで違うページの指定箇所へ飛ばそうとしています。

    リンクで違うページの指定箇所へ飛ばそうとしています。 IEやsafariでは問題なく指定箇所に飛ぶのですが、 Firefoxだと何故か指定箇所ではなく、そのページの一番下に飛んでいきます。 IEは6、7、8 safariは4.0.2で、 Firefoxは3.6.6を使用しています。 Firefoxのバグなのでしょうか? (同じページ内の指定箇所だとちゃんと飛びます) 急ぎの為大変困っております。 ご回答お願い致します。 HTML-------------------------------------------------------------- <a href="http://~~~/●●.html#abc" /> 飛ばしたい場所 <div id="abc"> <img src="画像URL" border="0" alt="" /> </div>

  • トップページにリンクを貼る方法

    トップページにリンクを貼るときに、いつもだと"<a href="../index.html">topへ</a>"で指定しているのですが、たまたま指定を"<a href="/">topへ</a>" というふうに"/"のみで指定しても、どの階層からでもトップに戻ることができました。 これはHTMLの文法的には正しい記述方法なのでしょうか? とっても楽チンで簡単なので使いたいのですが、ちょっと不安です。 申し訳ございませんが、どなたかお助けください。 よろしくおねがいします。

    • ベストアンサー
    • HTML
  • divのクラス内のリンクの設定

     CSSの設定でわからない点がありましたので質問させてください。  div自体にクラスを設定しているのですが、このブロック内にリンクがあります。このdivないの<a href="">のみのCSS指定をしたいのですが、どうやってやったらよいのでしょうか?  これまでは、divにidを指定して、 #id a:link {… とか、アンカー自体にクラスを指定してやっていたのですが、ここではHTML自体を変更せずにCSSでコントロールしたいのです。 ソース自体はこんな風になっています。 <div class="asset-more-link"> <a href="example.html">バージョンアップ</a>の続きを読む </div> これに対して、あれこれCSSを設定したのですが一向に反応してくれません。もしわかる方がいたらおしえてください。よろしくお願いします。

    • ベストアンサー
    • CSS
  • ページ内リンクについて

    ページ内リンクについて質問です。 以下のプログラム内容で、実行するとTopにはいくのですが、 微妙に少しだけTopより下の位置にジャンプします。 完全にTopにいきません・・・ なぜでしょうか? リンク到着地点のタグの位置が不適切なんでしょうか? 色々挑戦したんですが、どこがいけないのかわかりません。 回答よろしくお願いします。 【HTML】 <body id="center"> <a name="container" id="container"></a> <div id="rogo">    会社のロゴ </div>   <div class="UD-msg">      本文      <a href="#container"><img src="images/page_top.GIF" alt="Page Top" title="Page Top" width="58px" height="12.5px"></a>   </div> </body> 【css】 #center{ width: 770px; margin-top: 0px; margin-left: auto; margin-right: auto; } #rogo{ margin-top: 6.6px; } .UD-msg{ margin-top: 20px; margin-left: 30px; }

    • ベストアンサー
    • HTML
  • 擬似フレームでのページ内リンクについて

    擬似フレームの横分割のレイアウトで、 左に位置固定された折りたたみ式メニュー 右にメイン画面を置いてあります。 左で折りたたみメニューを開き、ページ内リンクで右に出てくる本文の項目ごとにリンクさせたいんですが普通にaタグを設置してみても上手くいきません。 どうやったらできるでしょうか? 折りたたみメニュー ・外部js function oritatami(id){ obj=(document.all)?document.all(id):((document.getElementById)?document.getElementById(id):null); if(obj) obj.style.display=(obj.style.display=="none")?"block":"none"; } ・外部CSS body { font-size: 82%; color: #505050; position: relative; padding: 0px 20px 0px 150px; } #PAGETOP { margin: 0px auto; max-width: 700px; } #MENU { width: 220px; padding-top: 20px; position: fixed; left: 30px; top: 0px; font-size: 85%; } .box{ line-height: 1.2; background-color: #FFFFFF; border: 1px solid #000000; padding: 1em; margin-top: 0.5em; } #MEIN {line-height: 1.5;} 以下、text.htmlのソース ----------------------------------------- (中略) <body> <div id="PAGETOP"> <div id="HEADER"> (中略) </div> <!--  左メニュー  --> <div id="MENU"> <div class="box"> <ul> <li><a href="text.html" onclick="oritatami('o0');return false">メニュー1</a></li> <div id="o0" style="display:none"> <ul> <li><a href="text.html#abc.html">ABC</a> <li><a href="text.html#def.html">DEF</a> </ul> </div> </div> </div> <!--  右メイン  --> <div id="MEIN"> <h2 id="abc">ABC</h2> (中略) <h2 id="def">DEF</h2> (中略) </div> <div id="FOOTER"> (中略) </div> </div> </body> 検討よろしくお願いします。

    • ベストアンサー
    • HTML
  • ページ内リンク アンカー

    ページ内リンクの記述について教えてください。 <A href="#top">このページの先頭へ</A>ですが <A name="top"></A>をHTML中に記述するとページ最上部の余白がなくなります。 記述しないと最上部の余白があり正常表示されます。 <A name="top"></A>を記述しなくてもよいのでしょうか。 該当ページhttp://www.geocities.jp/sinsaku102578/01/fujikawa.html よろしくお願いします。

  • HTML トップページから各ページへのタグの作り方

    ホームヘージを作っていますが、 ド素人で分かりません。 教えてください。 http://webz.jugem.jp/?tid=12 上記のようなホームページを作るのですが、 「menu1」のボタンから新しいページを作りたいのですが、 どのようなタグを使えばよいのでしょうか? 下記はトップページの一部分です。 次のページに移動するにはどこへそのタグを書き込めば良いでしょうか? <div class="header"><p class="description">{blog_description}</p></div> <div class="navigation"> <a href="./" id="active">Home</a> <a href="./#top">menu1</a> <a href="./#top">menu2</a> <a href="./#link">Link</a> <a href="./?pid=1">Profile</a> <div class="clearer"></div> </div>

専門家に質問してみよう