あるページのあらかじめ定めた位置へリンクさせたい

質問

色々なホームページを見ていると、同じページ内の定められた位置へリンクされている場合が見られます。

例えば、ページの一番下にある「先頭へもどる」ボタンのようなイメージです。「先頭へもどる」ボタンではページの先頭へ戻りますが、ページの真ん中にリンクさせたい場合や微妙な位置にリンクさせる場合どのように記述すればよいでしょうか？

以前、pxで調整できると聞いたことがあるのですが具体的な記述方法が分かりません。よろしくお願いします。

回答No.3

ORUKA1951 · ベストアンサー

＞以前、pxで調整できると聞いたことがあるのですが
　これは何かの誤解でしょう。
　HTMLは、Hyper Text Markup Languageの略ですが、このHyperという言葉は、他の文書または、他の文書の特定の【要素】にリンクできる機能を意味しています。
　そして、Markupの意味ですが、それは文書をその文書を構成する要素(Element)に分解して、それぞれがその文書にとってどのような意味を持つ要素であるかをタグによってマークアップされているのです。
　このふたつをきちんと理解してください。
　その文書にリンクするときは、<a href="[URL]">その文書</a>でリンクできますし、その文書の特定の要素にリンクするときは、ページ内のアンカー(Anchor--これが<a>の語源)を目標にします。そのアンカーを示すのがnameです。
<h2><a name="section1">セクション１</a></h2>
　hとはHeading(見出し)の意味で、階層2の見出しが<h2></h2>

　これは、
<p><a href="[URL]#section1">セクション1</a>へ</p>
　とリンクを書くことでリンクできます。<p>はParagraph--段落

　同じページ内の場合は、<a href="#section1">セクション1</a>へ・・・と書きます。

　位置ですが、それは<h2><a name="section1">セクション１</a></h2>がどの位置に表示されているかですから、ウィンドウ幅や文字サイズなどで変化します。変化してもその要素にリンクできるということです。

★12.1.1 リンク先リソースの訪問 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/links.html#h-12.1.1 )

★HTML4.01までは、正確にはリンク先は<a name=""></a>でマークアップします。上記の例の場合<h2 id="section1">セクション１</h2>とも書くことが出来、リンクもできます。idはどの要素にも書くことが出来ますから便利ですし、HTML1.1やHTML5は、idを使うことになりますから、idで統一しても良いでしょう。・・とっても古いブラウザはIDに対応できないものもありますが、すでに考慮しなくて良いでしょう。
　厳密な文法的には<a name=""></a>が正しいのですが、idで指定するほうが良いでしょう。

お礼

返信おくれて申し訳ありません。

根本的なところから解説していただきありがとうございました。

h2タグにsection1という名前をつけることでリンク先に指定できるんですね。

初めてhtmlファイルやcssファイルを開いた時はチンプンカンプンでしたが、どの部分とどの部分がつながってサイトに反映されているのか分かるようになってきました。

また何かありましたらよろしくお願いします。

回答No.2

naokita

これで試して下さい。
<a href="http://okwave.jp/qa/q7804435.html#q_area">指定場所</a>
質問が先頭に来るはずです。

つまり、
HTMLで飛び先を設定する。idを指定
今回の例：
<div id="q_area">

<a id="そのページURL#q_area">○○に飛びます</a>

URLの末尾に「 # 」＋「 idの名前 」です。
但し、同じページ内の場合には、URLは不要なので、例としては、
<a id="#q_area">○○に飛びます</a>
だけで良いです。相対パスでも良いです。

name よりも id です。　多少の位置をズラす場合にはCSSでtopから移動できます。

お礼

返信おくれてすみませんでした。

<div id="q_area">と記述した箇所がリンク先になるのですね。自分のサイトで適当な名前でid名をつけてリンクさせてところ上手くいきました。

ありがとうございました。

回答No.1

sutchmarco

<a href="#name属性の属性値">リンクさせる要素</a><br>

<a name="#リンク先に付ける名前">リンク先の要素</a><br>

でどうでしょう

お礼

返信おくれてしまい本当に申し訳ありませんでした。

#nameと記述したあとに属性値を指定することが可能なのでしょうか？それだったら細かく指定できますね。もう少し探って勉強してみます。

ありがとうございました。