@Pkun

Are you sure you want to delete the question?

Leaving a resolved question undeleted may help others!

html&cssでジャンプ先のidに飛ぶと、画面が上すぎるんです。表示位置を

Q&A

Closed

解決したいこと

html&cssでジャンプ先のidに飛ぶと、画面が上すぎるんです。表示位置を少し下に持ってくるには
どうしたらいいですか?paddingとかmargin使えばいいんじゃない?との意見も頂きましたがそれだと
余白が開いてしまうんで余白を開けないように見出しを少し下に表示するようにジャンプするにはどうしたら
いいですか?

0 likes

1Answer

javascriptでスクロールするのが早い気がしますが、「html&cssで」ということなのでjavascriptを使わずに実装してみました。

目次から3つのタイトルに飛べますが、「タイトル1」のみタイトルから少し上に飛ぶようにしています。
少し強引なやり方な気もしますが、タイトルの前にダミー要素を追加してそちらに飛ぶようにしたら求めているような動きができるかなと思いました。

飛んだ際にURLにid名が表示されると思うので、idの付け方には少し注意が必要です。

See the Pen Untitled by yotty (@yotty) on CodePen.

あと余談でタグについてですが、「HTML,CSS」タグも悪くはないですが、「HTML」と「CSS」の方が圧倒的に記事数・質問数も多いので、こちらのタグも追加していただければと思います。

1Like

Comments

  1. @Pkun

    Questioner

    素晴らしいご回答ありがとうございます♪理解できるか分かりませんが、勉強の材料にさせて頂きます!♪
    またよろしくお願いします。m(_ _)mタグ了解です♪
  2. ソースを見てみてわからないところがございましたら補足いたしますので、またコメントください!

Your answer might help someone💌