HTMLのアンカーリンクについて。

質問

HTMLのアンカーリンクについて。

アンカーリンクですが、通常どおりリンクをはると、ブラウザ画面の一番上にぴったりくっついたかたちでリンクしてしまします。
たしか、リンク先の上の幅を指定できたと思うのですが、やり方を忘れてしました(^^;ゞ

ちなみにHTMLはこんな感じです。

<div id="content">
　<div id="anchor">
　　<ul>
　　　<li><a href="post-1">投稿１</a></li>
　　　<li><a href="post-2">投稿２</a></li>
　　　<li><a href="post-3">投稿３</a></li>
　　</ul>
　</div>
　<div id="entry">
　　<h2 id="post-1">投稿１</h2>
　　<h2 id="post-2">投稿２</h2>
　　<h2 id="post-3">投稿３</h2>
　</div>
</div>

すこし検索してみましたが見当たらなくて、質問させていただきました。
どなたか、おわかりの方ご教授いただけると助かります。

よろしくお願いします。

回答No.3

koumild · ベストアンサー

回答1の者です。申し訳ありません。質問の意味を間違えていました。
確かにこのままでは画面上部にピッタリとくっついた形で移動しますね。

回避策としてですが、
h2にスタイルシートでpaddingを設定してはいかがでしょうか。
padding-topに指定した大きさ分、移動時も上部に隙間ができます。

ただし、アンカーの有無に限らず、上部に隙間ができてしまいます。
それ意外に任意の値を設定して、移動位置を調節できるということですか？（質問に質問を返してすみません。）
それであれば、申し訳ないです。私では力不足です。

補足

そうですね、paddingでも上部にスペースをあけることもできますが、直接アンカーリンクのリンクの移動位置を調整できたと思います。
たしか以前調整していた記憶があるのですが・・・

自分のボケでしたらすみません(^^;ゞ

回答No.2

nine999

<li><a href="post-1">投稿１</a></li>

ここは

<li><a href="#post-1">投稿１</a></li>

<h2 id="post-1">投稿１</h2>

こっちは

<h2><a name="post-1"></a>投稿１</h2>

ですね。

補足

「#」が抜けているのは記入ミスです。
失礼しました。

たしかname属性は推奨されていません。
id属性に対応していないブラウザ用に残されている属性だったと思います。

回答No.1

koumild

簡単に申し上げます。

リンク先に「#（シャープ）」が抜けているためと思います。

<a href="#post-1">投稿1</a>
…
<h2 id="post-1">投稿1</a>

補足

大変失礼いたしました。
質問文の例での記入ミスです。
実際は「#」は抜けていません。