ベストアンサー

a name のちょっと上

2008/07/10 11:58

<a name=""></a> で指定したところにリンクすると、この部分がブラウザの最上部にピッタリつきます。この指定された部分の上 25px にリンクさせたい場合はどうすればいいでしょうか？やり方としては、 <a name="omoshiro"></a><div height="25"></div> <div>面白コーナー！</div> もしくは空白 div のかわりに img で透過 gif を入れてやればできますが、見た目でも 25px の空白ができてしまいます。ですのでこの空白を作らずにやりたいと思ってますがありますでしょうか？よろしくお願いします。

syuricyan
お礼率65% (541/824)

HTML
回答数4
ありがとう数2

みんなの回答 （4）
専門家の回答

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

ベストアンサー

cyokodog
ベストアンサー率56% (13/23)

2008/07/11 10:08 回答No.4

padding-topやposition:relativeで位置調整は可能かと思いますが、調整分の空白スペースが気になるということでしょうか？コンテンツのレイアウト構成が分からないのであれですが、こんな感じで調整してはいかがでしょうか？ <html> <head> <style> #index{ background:#eee; } #index,#contents{ height:1500px; } #title{ padding-top:2em; display:block; } #contents{ position:relative; top:-2em; } </style> </head> <body> <div id="index"> <a href="#title">go contents title</a> </div> <div id="contents"> <a id="title">title</a><br/> contents<br/> contents<br/> contents<br/> contents<br/> contents<br/> contents<br/> contents<br/> contents<br/> contents<br/> contents<br/> contents<br/> contents<br/> </div> </body> </html> aタグにpaddingした分、上方に余白ができるのでaの包括要素の位置をその余白分上方にずらしてます。注意点としては、包括要素の上のコンテンツ（この例では#index）に余白分、包括要素がかぶるので必要に応じて包括要素の上のコンテンツにpadding-bottomする必要があります。（この例では2em） CSSレイアウトの応用です。