• 締切済み

id タグによるアンカー設定の際、ジャンプ場所を高度にコントロールする方法

id タグを使って設定されたアンカーへジャンプする際、 通常は「ブラウザの画面の一番上」に設定ポイント持ってくる形でジャンプしますよね。 ところが、たとえば、ページ上部にナビゲーションバーなどを「position : fixed」といった形で固定して配置している場合、 「ブラウザ画面の上部」にジャンプされると、ナビゲーションバーの下に隠れてしまいます。 この場合、ジャンプ先の基準地を「ブラウザの画面の一番上」ではなく、 ナビゲーションバーのぶんだけ下にずらす必要が出てきます。 そこで質問ですが、このような場合について、なにかよいアイデアや 解決策を教えていただけませんでしょうか。よろしくお願いします。

みんなの回答

noname#39970
noname#39970
回答No.2

padding とか 最初の要素の margin の方が良いかもしれない・・・

andansite
質問者

お礼

「属性」でしたね、ご指摘ありがとうございます。ただご教示いただいた方法はページ余白に関する設定で、ジャンプ先の基準地になんら影響を及ぼすものではありません。残念ながら。

noname#39970
noname#39970
回答No.1

idタグ? id属性ではなく? body { margin-top : 2em } 数値はナビゲーションバーの分以上、好きなだけ

関連するQ&A

  • 【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
  • URLページの任意のアンカーへジャンプしたいのですが・・

    FLASHでHTMLに設定したアンカーにジャンプする方法があれば知りたいのですが。 現在は on(release){ this.getURL("xxx.htm#T01","_self"); } のようにしているのですが、任意のアンカー<この場合T01>に移動できません、ヒントでも良いので是非ご教授下さいませ。

    • ベストアンサー
    • Flash
  • fixedでメニューを表示した後のアンカーリンク

    Java Scriptで開閉式のメニューを position:fixed で画面全体で前面で表示した後、 アンカーリンクでページ内を移動すると、 実際には画面内でスクロールされて頭出しはされているのですが、 position:fixedのメニューは前面に表示されたままになってしまいます。 もちろんメニューを消すボタンなどをクリックすれば消すことは可能なのですが、 操作的にはわずらわしいので、 アンカーリンクで頭出しをすると同時に、 リフレッシュなどをしてposition:fixedのメニューを非表示に戻す方法はないでしょうか? 分かりづらい説明ですみませんが、よろしくお願いいたします。

  • <A NAME=

     とっても、基本的なことなのかもですがタグ辞典に詳細がなかったので、 どなたか教えてください!! <A NAME="○○○">のタグで、特定の場所にジャンプするリンクを設定した 場合、必ず指定したジャンプ先の位置は表示される画面の上部にくるものな のでしょうか?  とういうのは、指定した先が画面の下部にきてしまいみずらいため困って います。 1ページがとても長いので、かならずジャンプ先の位置は画面 の上部にこさせたいのですが、それは可能ですか??  こんな説明で、状況をわかっていただけますでしょうか? どなたか教えてください。

    • ベストアンサー
    • HTML
  • marginとナビゲーションの位置がずれる

    質問初投稿で、現在webデザインを勉強中の者です。 あまり慣れていないので文章の拙さはご容赦ください。 現在自主制作中のWebサイトがあるのですが、 ナビゲーションをposition:fixedで固定に画面の下に配置するように設定しています。 そのまま上部に画像を配置しようと、margin-left;などで調節していたのですが、 ナビゲーションの位置がズレてしまい不自然な空白や、ナビゲーションそのものが消えるという状態になってしまいました。 margin-leftを1pxでも入れると右端から消えてしまいます。 paddingやposition:absoluteなどの別の方法も試してみましたがmarginと同じ状態になってしまいます。 もしかしたら別の画像を上に配置しているので、それが原因かもしれません。 どうしても自分では解決できないので、解決方法を教えていただきたいです。 画像はmargin-leftに数値を入力した時のものです。 #footer { margin: 0px; padding: 0px; position: fixed; left: 0%; bottom: 20px; width: 100%; height:44px; } #item{ margin-left:34px; margin-right:34px; margin-top:34px; } #fruits{ margin-left:34px; }

    • 締切済み
    • CSS
  • HTMLの画像の位置の指定

    HTMLで、画像の位置などを決めるときに、<div align="center"></div>などを使いますが、CSSやジャバスクリプトで使用している、 position:absolute; 絶対配置 position:relative; 相対配置 position:static; 通常配置(指定しない場合はこれ) position:fixed; 上のようなポジションタグを使う事は可能ですか? できれば、そのサンプルのようなものを書いてもらえると 助かります。

    • ベストアンサー
    • HTML
  • evernoteでノートブックやタグを削除する方法

    調べてみたところ、PCで目的のノートブックやタグを右クリックし、出てきたメニューから「削除」を選択する、というのが方法のようですが、同様のことをすると普通に選択されてしまい、左パネルに「ノートが見つかりませんでした」と空のノートブックやタグが表示されてしまいます。 どうしたらよいのでしょうか? なお、evernoteのバージョンですが、おそらく最新だとは思うのですが、どこで確認したらよいのか分からず分かりません。 情報が少なく申し訳ありません。 ちなみに画面上部の1段目に 「ファイル 編集 表示 ノート フォーマット ツール ヘルプ」 等の表示がありその下の2段目に 「すべてのノート Webクリップ モバイル ファイル ○○(選択されているノートブックの名前) タグ」 と表示されています。 2段目のいずれかをクリックすると左パネルに一覧が表示されます。 ノートブックとタグのみ左パネルではなくそれぞれの下に一覧が表示され、いずれかをクリックすると左パネルに表示されるようになっています。 今回私が試してみてダメだったのは、画面上部2段目のノートブックまたはタグをクリックし、下に出てきた一覧から目的のノートブックまたはタグを右クリックする、という方法です。 そうすると左クリックした時と同様に左パネルに目的のノートブックまたはタグが表示されてしまいます。 不要なノートブックやタグを削除する方法をご存知の方、ぜひ教えてください! 困っています(>_<) 

  • ブログをPCの画面上で、見たときに、タグをそのまま記述する方法を教えてください

    ブログのサイトで、編集画面でタグを設定した場合に、それをパソコンの画面上で見たときに、タグのルールに従って、タグで挟まれた文字、もしくは文字列が見れると思います。 今回うかがいたいのは、PCの画面上で、タグをタグとしてそのまま表示するのにはどのようなタグ設定をすればいいのでしょうか。 たとえば、 <FONT SIZE="5">これはFONT5タグです</FONT>は、PCの画面上では、「これはFONT5タグです」というように見えると思いますが、 <FONT SIZE="5">これはFONT5タグです</FONT>の部分をそのままブログの画面上から見る場合に、タグ設定としてそのまま読み取れるような記述の仕方を教えてください。 どなたか、よろしくお願いいたします!

  • gaiax系ページでの背景の固定

    こんにちわ。 先日、背景を固定して文字だけスクロールしたいという件で質問しましたところ、スタイルシートをつかったり、bodyタグでの方法を教えて頂きました。ところが、私のページはgaiaxであり、デザインの変更の背景URLのところに教えて頂いたスタイルシートなどのタグを張り付けてみたところ、背景はうまく固定できたのですが、今度は画面の左上に文字の色などを示すタグが勝手に表示され、こちらで設定した文字の色なども無効になってしまいました。スタイルシートではこちらを張り、 <STYLE TYPE="text/css"><!-- BODY{ background-image:url("画像の名前"); background-repeat : no-repeat ; background-attachment : fixed; background-position: bottom right;} --> </STYLE> bodyタグではこちらを試してみました。 <BODY background="○○○" bgcolor="○○○" bgproperties="fixed"> ・・・・・ </BODY> いずれにしても変なタグが画面上部に勝手に表示されてしまうんです。 それに文字なども私は白で設定したのですが、勝手に黒になってしまいます。 どうしたらよいのでしょうか? メインのお知らせ欄に張るということも考えてみたのですが、 そうすると、日記画面での背景は別になってしまいますよね? 御回答よろしくお願い致します。

    • ベストアンサー
    • HTML
  • 表の設定方法が知りたい

    ホームページビルダー11を使っています 標準モードで作成しております タグなどがわからないもので表を使ってレイアウトをしております そこで質問なのですが、まず行3×列3の表を作り全体の表の幅を700に設定しています そこで同じ大きさの写真を3つ並べたいなどの場合どうすれば均等に配置できるのでしょうか? どうしてもバランスが崩れて配置されてしまいます 個別のセルの設定をしても変化が見られません 回答及び参考にできそうなサイトがあれば教えてほしいです よろしくお願いします

専門家に質問してみよう