• ベストアンサー
  • 困ってます

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

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

共感・応援の気持ちを伝えよう!

  • 回答数4
  • 閲覧数6890
  • ありがとう数4

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

  • ベストアンサー
  • 回答No.4
  • nobuoka
  • ベストアンサー率69% (23/33)

おおう、なんか思ってたのと全然違ってびっくりしました笑 デザインはいい感じですね。 コードに関しては色々言いたいことがありますが (空要素 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>

その他の回答 (3)

  • 回答No.3

回答の方の margin-top とか、padding-top を 180px 以上にしとけばイイんでないでしょうか。 或いは、アンカーと回答の間を180px以上空けておけば……。

共感・感謝の気持ちを伝えよう!

  • 回答No.2
  • nobuoka
  • ベストアンサー率69% (23/33)

質問がよくわからないんで、できれば作成中の FAQ ページのソースコードを全部示すべきかと思います。 せっかく CSS のコードを書いても、肝心の HTML がどうなってるのかわからなければあまり意味がありませんし。 あと 「リンク先のアンカー」 というのもよくわからないんですが、id 属性で指定した場所 (もしくは a 要素の name 属性で指定した場所) ってことですか? 全体的によくわからないんで見当違いの回答になっているかもしれませんが、「本来の表示位置より 180px 下げて表示する」 ということであれば、CSS の position プロパティを "relative" にして、top プロパティを 180px に指定すれば本来の位置より 180px 下げて表示されますよ。 期待通りかどうかはわかりませんが。 div.sample { position: relative; top: 180px }

共感・感謝の気持ちを伝えよう!

質問者からの補足

全くの素人なもので、質問の仕方もよく分からずご迷惑おかけします。 htmlは http://1001shadows.com/test.html にあります。 CSSは以下の通りです。CSSはもう一つありますがそちらは主に文字サイズとかなので今回の質問には関係有りません。 多分ツッコミどころ満載だと思いますが、宜しくお願いいたします。 ーーーーーーーーーーーーーーーー .overpic { position:fixed; top:00px; left:00px; z-index:12; } .logo-top { position:fixed; top:60px; } .right_group_list { position:fixed; top:200px; left:680px; width:180px; min-height:36px; padding:0px; z-index:13; } .header { height:180px; } .main_content { top:180px; } .fixed_content { position:fixed; width:510px; left:110px; top:100px; border-width:none; padding-right:30px; padding-left:30px; z-index:6 }

  • 回答No.1
noname#119957
noname#119957

プログラムが面倒なら、フレームを使用してターゲット指定でリンクすれば?CSSでは無理かと。。

共感・感謝の気持ちを伝えよう!

関連するQ&A

  • FireFoxで見ると表示がおかしくなってしまいます

    困っています。質問させてください。 このカテゴリでいいのか分からないのですが・・・。 HPを運用しているのですが、聞きかじりのcssを利用しています。 IEだと場合によっては普通に表示されるのですが、FireFoxだと文字がどでかく表示されてしまって、レンタルスペースはFC2を使っているのですがページの最後に表示されるはずの広告が文字列の中に割り込んでいたりして、表示がめちゃくちゃになってしまいます。 ちなみに使っているcssは * { margin:0; padding:0; } html { text-align:center; height:100%; } body { width:600px; height:100%; text-align:left; } #HEADER img { display:block; } #NAV { float:left; width:200px; height:100%; margin-top:-100px; padding-top:100px; } #CONTENT { width:650px; height:100%; margin-top:-100px; padding-top:100px; margin-left:200px; } です。index.htmlのbody部分にはfontの大きさは全く指定していません。 よろしければFireFoxでご覧になってみてください。 http://clovermiwa.web.fc2.com/ 私はHTMLをかじったくらいで、cssについては全く分かりません。 HTMLが間違っているのかもしれません。 色々いじってみましたが、問題が解決されず、困っています。 よろしければご教授、お願い致します。

    • ベストアンサー
    • HTML
  • ページ内ハイパーリンクの表示位置指定

    エクセルで、ページの上部にメニュー・下部にメニューの説明を書き、上部メニューを押すと下部メニューに飛ぶようにハイパーリンクを作成しています。 メニュー欄をウィンドウ枠で固定していますが、リンク先へ飛ぶ際、そのリンク先のセルが常のハイパーリンクのすぐ下に表示されるようにしたいんです。 ふつうにハイパーリンクを貼ると、そのセルがページの一番下に表示されてしまいますよね?そうはしたくないんです。 マクロで、リンク先が常にページのトップに来るようなものがあると思いますが、ウィンドウ枠の固定をしているので、それは使えません。 説明が下手ですみませんが、どうすればいいか教えてください。 よろしくお願いします。

  • リンクとアンカーポイントの同時リンク

     当方web制作初心者です。  ページの最上部に、インラインフレームで別ファイルを表示させているページを作っています。 そのページの最下部でインラインフレーム内で表示するリンクはっているのですが、インラインフレーム内では、ちゃんとリンクしたページにジャンプしているのですが、リンクを貼ったところがページの最下部なので、自分でページの上部に移動しなければなりません。  以前にも同じような質問があったので試してみましたがページの上部に移動しません。試した方法は 「<a href="00.html#top">」のようにリンクするページの後ろにアンカーポイントをくっつけました。IE6(xp)ではうまく動作したのですが、IE7(vista)だと全く反応しません。  私のやり方がおかしいのか、もしくは他にもっといい解決策があるのかご教授ください。お願いします。

  • 【CSSハック】アンカーポイントの位置をずらしたいのです

    WIN IEのみで失敗してしまうCSS問題についてご質問させてください! 『ページ内アンカーリンクのポイントをブラウザ画面トップから100pxほど下にずらしたポイントに表示したい』 というのも、ブラウザ画面トップにposition:fixed;のオブジェクトを配置しているため、 アンカーリンクでページ内ジャンプした際に先頭部分が上記オブジェクトの後ろに隠れてしまうのです。 <a name="XXXXX" id="anchor"><img src="XXXXXXX"/></a> このタグに対してのCSSは #anchor{ position:relative; top:-100px; left:0; } このコマンドで Mac環境(safari / Firefox) Win環境(Firefox) では成功したのですが、IE6 / IE7では認識せず、スクロールバーがなぜか2本重なるバグ?が表示されるのです。 このような現象の原因と対策がございましたらお教えいただきたいです。 どうぞよろしくお願いします! (横2つ割のインラインフレームは可能なら使いたくないのですが、他に方法がなかったら仕方ないのでしょうか。。)

    • 締切済み
    • CSS
  • 表示位置について

    初心者ですが、ソフトを使っていなければ 此処で質問をした方が良いと言われたものですからよろしくお願いします。 <style type="text/css"> <!-- body{background-color:#ffffdd} div.box{margin:5px; width:740px;height:1000px;padding:10px; background-color:#fff;border:4px solid #008080;} --> </style> <body> <div class="box"> </div></body> 800×600の画面一杯に、こういうボックスを作って、 最大画面で見る時は、よく有る企業のページのように、左右に余白が出るようにしたいのですが、 どうしても、中央ではなく左側に表示されます。 後、テキストで"white space"を活用したいのですが、何処にどう書き込めばいいか解りません。 質問が判りづらくてスミマセンが、教えて頂けますか。

  • ホームページビルダー16 ページセンター表示

    現在サイトを制作しています。 Yahooなどのようにページをセンター表示をしたいのですがやり方が分かりません。 調べて色々試してみましたがセンターに表示されません。 どのようにするのでしょうか? 以下は試しにやってみた結果です。 <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta name="GENERATOR" content="JustSystems Homepage Builder Version 16.0.1.0 for Windows"> <title></title> <style type="text/css"> <!-- body{ text-align : center; margin-left : auto; margin-right : auto; } --> </style> </head> <body> <div style="width : 180px;height : 100px;top : 33px;left : 252px; position : absolute; z-index : 2; visibility : visible; " id="Layer2"><img src="logo11.gif" width="86" height="37" border="0" alt="テスト"></div> <div style="width : 950px;height : 840px;top : 4px;left : 2px; position : absolute; z-index : 1; visibility : visible; " id="Layer1"></div> </body> </html>

  • 6で表示がずれて困っています。2つ目です。

    6で表示がずれて困っています。2つ目です。 firefoxとIE8ではちゃんと表示されているのに、IE6ではずれてしまいます。 IE6で画像が下にずれて切れ、スクロールバーが表示されてしまいます。 原因とfirefoxとIE8と同じように表示させる方法を教えて下さいm(__)m 画像添付とソースを貼ります。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無題ドキュメント</title> <link href="testcss.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="main"> <div id="header"> <div id="header_line"> </div> <div id="logo"> <img src="A_22.gif" width="142" height="69" /> </div> <div id="cn"> <img src="A_33.gif" width="459" height="158" /> </div> </div> </div> </body> </html> ●css● *{ margin: 0; padding: 0; } img{ border: 0; vertical-align: bottom; } #main{ background: url(images/back_shadow.jpg) repeat-y; margin: 0 auto; width: 820px; height: 300px; } #header{ width: 800px; height: 181px; margin: 0 auto; overflow: auto; } #header_line{ background:url(images/header_1.gif) repeat-x; margin: 0 auto; width: 800px; height: 13px; } #logo{ width: 152px; height: 69px; margin: 10px 0 0 10px; float: left; display: inline; } #cn{ width: 459px; height: 158px; margin:10px 0 0 0; float: left; } 以上です。 初心者でわからない事が多いため、できるだけ詳しく教えて下さい。 宜しくお願いしますm(__)m

    • ベストアンサー
    • HTML
  • fc2ブログのh1タグの表示位置の変更の仕方

    どなたかfc2ブログのh1タグの表示位置の変更の仕方を教えてください。 今、fc2ブログで共有テンプレートの「ナビゲーター4(レスポンシブル対応)」を使って、アフィリエイト用のブログを作っています。それで問題が発生して困っています。へッダー(縦400px横1000px)は自分で作ったものを使ったのですが、このテンプレートはそもそもヘッダーの真ん中の位置にh1タグ(タイトル)が表示される作りになっていて新しいヘッダー画像の文字と重なってしまうので、h1の位置を変更しようといろいろ試みました(HTMLやCSSをいじり、ヘッダーの左端の一番上に変更しようとした)。 しかし、思った場所には変更できませんでした。たぶん、CSSの該当箇所をいじればできるとおもうのですが、どうすればいいかがわかりません。どなたかご指導していただけないでしょうか? ※HTML、CSSの関係個所を書いておきます。情報が足りなければ、後で情報追加します。 〇HTMLの該当部分 <body> <!--ヘッダーここから--> <header id="l-header"> <div id="l-header-inner"> <img id="bgimg" src="http://blog-imgs-110.fc2.com/b/e/n/benpitaisakukyousitu/201708291447134cf.png" alt="橋" width="100%" height="100%" /> <div class="l-header-inner2"> <h1 class="blog_name"><a href="<%url>"><%blog_name></a></h1> <h2 class="blog_introduction"><%introduction></h2> </div> <nav class="menu"> <nav class="menu-inner"> <ul> <!--category--> <li><a href="<%category_link>" title="<%category_name>"><strong><%category_name></strong></a></li> <!--/category--> </ul> </nav> </nav> </div> 〇CSSの該当部分 responsive PC設定  2カラム @media screen and (min-width:960px) { #l-header { position: relative; width:100%; } #l-header-inner { width: 100%; margin: -10px 0px 0; min-height:50px; padding: 0; overflow: hidden; background-color:; } .l-header-inner2 { position: absolute; width: 100%; top: 20%; left:0; } .all-box { width:960px; margin: 0 auto; } .blog_name { width:95%; margin-top: 20px; padding: 0px 0 0px 15px; font-size: 30px; line-height: 1.7em; color: white; text-align: center; background-color: ; } .blog_name a { color: white; } .blog_introduction { width:95%; margin-top: 0px; padding: 0px 0 10px 20px; font-size: 16px; color: white; text-align: center; background-color: ; }

    • ベストアンサー
    • CSS
  • HTML5でのアンカータグ

    スマートフォン用の動的ページを現在作成しています。 同一ページ内のアンカーリンクタグの動作テストにおいて、 IE7&8では動作しますが、chrome、firefox、スマートフォンで確認すると、 真白で何も表示されなくなります。 スマートフォン用なのでスマートフォンで動作しないと意味がないので。 【サンプル】 <header> <div id="top"></div> -略- <p CLASS="btn_top tr"><a href="#top"><img src="${resource(dir:'images',file:'btn_top.png') }" alt="PAGE TOP" width="75" height="26" /></a></p> ページは、Grailsフレームワークを使用して実装しています。 コーディングが好ましくないのかと? お詳しい方、ご教授願えれば幸いです。 宜しくお願い致します。

    • ベストアンサー
    • HTML
  • HTML、CSSのチェックをお願いします。

    独学でGoogleトップページのデザインを真似てみました。 ブラウザの表示領域の上部に固定されたヘッダーとセンタリングされたコンテンツといった形にしています。 自分で真似たので、表示される結果としてはイメージ通りではあるのですが 実際、回りくどい方法をとっていないか?もっと適切な方法がるのでは?といった事が分からないので チェックして頂きたいと思います。 CSSに関しては外部ファイルへ記述します。 以下のソースになります。 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <style type="text/css"> <!-- body{ margin: 0; /* ヘッダーをぴったり上部付けたいので */ } #header{ color: #DDD; background-color: black; position: fixed; width: 100%; height: 50px; /* ヘッダー内に高さ50pxの画像を配置したい為 */ z-index: 100; /* wrapperより上にかぶってほしい為。数値自体は適当 */ top: 0; } #wrapper{ width: 800px; margin: 0 auto; background-color: #dbcfc3; margin-top: 50px; height: 1300px; /* 縦スクロールを表示したい為 */ } #header h1, #header ol, #header li,#header img{ margin: 0; font-size: 17px; float: left; } #header ol{ padding: 0; list-style-type: none; } #header li{ margin-left: 5px; } #header a:visited, #header a:link{ color: #DDD; } --> </style> </head> <body> <div id="header"> <img src="" alt="てすと"><!-- srcには高さ50pxの画像を使用予定 --> <h1>あいうえお</h1><!-- SEO的にH1を使った方がいいとの記述が多い為。サイトタイトルを記入予定 --> <div> <ol> <li><a href="http://www.google.co.jp">google</a></li> <li><a href="http://www.yahoo.co.jp">yahoo</a></li> </ol> </div> </div> <div id="wrapper"> content </div> </body> </html> どんな些細な事でも構わないので、よろしくお願いします。