- ベストアンサー
リンクの飛ばし方とその位置について
- 一枚の縦に長いウェブサイトを作っていて、アンカータグを使って同じページ内のリンクを作りたいです。しかし、ページのトップに固定されたメニューがあり、リンク先の位置をトップから200px下にしたいです。
- ウェブサイトを作っていて、アンカータグを使って同じページ内のリンクを設定したいです。しかし、固定されたメニューがあるため、リンク先の位置をトップから200px下にしたいです。
- ウェブサイトの作成中において、同じページ内のリンクを設定したいのですが、上部に固定されたメニューがあるため、リンク先の位置をトップから200px下にしたいです。
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
fixedでメニューを固定されているということでしょうか？ であれば、それぞれの記事に関して、padding-topで余白を取りましょう。 paddingはボックス内の余白なので、marginと違って余白を含めた位置にページ移動ができるようになります。 <html> <head> <style type="text/css"> .article{ padding-top:200px; } </style> </head> <body> <div id="Hoge1" class="article"> <p>記事1の内容</p> </div> <div id="Hoge2" class="article"> <p>記事2の内容</p> </div> <a href="#Hoge1">記事1へ</a> <a href="#Hoge2">記事2へ</a> </body> </html>
その他の回答 (1)
- rurino
- ベストアンサー率55% (38/68)
HTMLタグだけだとpx指定は難しいですね。 （タグ以外で方法があるのかもしれませんがJavaScriptなどは詳しくないので 完全にないとは自分は断言できません） この場合通常ですと この行から見せたい というところに id="hogehoge" を入れます。 （hogehoge には半角アルファベットで始まる好きな名前（半角英数字）を入れてください。） リンクには <a href="#hogehoge"> と書きます。 （a name="hogehoge"でもOKですが おそらくアンカーリンクのname属性は近いうちに非推奨になると思われますので idのほうがいいとおもいます）
お礼
ありがとうございます！ a nameは非推奨になるんですね。Dreamweaverのリンクは あたりまえのようにa nameになっていました。 ソフトまかせではいけませんね！
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/spn/images/related_qa/c205_2_thumbnail_img_sm.png)
お礼
キレイにできました！ わかりやすくとても助かりました。 本当にありがとうございますm(__)m