リンク先アンカーの表示位置を下げたい

質問

宜しくお願いいたします。

FAQページを作成中で、ページ最上部に質問だけずらり並んでいて、クリックするとリンク先（ページ下部にある回答）に埋め込んだアンカーに飛びます。
しかしCSSで
.header {
height:180px;
}
.main_content {
top:180px;
}
となっているので、飛んだ先の回答がブラウザ最上部、この180pxの部分に表示されて他の要素の裏に隠れてしまいます。リンク先のアンカーを180px下げて表示させるような方法はあるのでしょうか。
質問がわかりにくかったらスミマセン。

回答No.4

nobuoka · ベストアンサー

おおう、なんか思ってたのと全然違ってびっくりしました笑
デザインはいい感じですね。 コードに関しては色々言いたいことがありますが (空要素 br などで閉じていないものがある、など)、書き換え途中っぽいので黙っておきます。

んで肝心の 「リンク先のアンカーを180px下げて表示させるような方法」 ですが、180px 下げているように見せかける手段として、padding-top で 180px 下げる、という方法があります。 そうすると上に 180px の隙間ができてしまいますが、そこは負のマージンで相殺しちゃうと問題無しです。
例えば、#a1 のリンク先を例にすると

<!-- 変更前 -->
<p> <a name="a1"></a> </p>
<h3 class="blue">A.1 1001ツールはどのようにインストールすればよいですか?</h3>

<!-- 変更後 -->
<h3 class="blue" id="a1" style="padding-top: 180px; margin-top: -180px;">A.1 1001ツールはどのようにインストールすればよいですか?</h3>

のように書き換えてみてください。 多分期待通りの動きになると思います。

お礼

ああ、スミマセン、これはリンク先の話をされていたんですね。
そのものずばりです、出来ました。
何故出来たのかはこれから徐々に勉強させて頂きます。現時点ではこれらのhtmlの働きが今ひとつ分かっておりません。
本当に助かりました。有り難うございました。

補足

回答有り難うございます。
リンク元は回答頂いたタイトルのすぐ下、リスト化された部分です。

例：□インストール先のフォルダーの場所を変えることは出来ますか?

この部分のhtmlは以下です。

<a href="#a2" class="norm"><li class="square">インストール先のフォルダーの場所を変えることは出来ますか?</li></a>

nobuokaさんのコードを参考に色々試してみたのですが、なにぶん初心者で応用が利かないのでうまくいきませんでした。上記のhtmlに対して再度方法を教えて頂けると有り難いです。宜しくお願いいたします。

ちなみに見よう見まねで試したのは、styleのみを付け加える以下のようなコードです。これでは同じ結果でした（Mac, Firefox）。

<a href="#b1" class="norm" style="padding-top: 180px; margin-top: -180px;"><li class="square">モデル内の何が日影の解析対象となりますか</li></a>