ヘッダーの高さが隠れて困る！ヘッダーが追尾するメニューのアンカーリンク用CSS

2023 4/11

2021/01/29 2023/04/11

スポンサードリンク

ヘッダーが追尾するメニューを作る場合、positionで設定するのでレイヤーが一番上に来ます。
そのためヘッダー分の高さが隠れてしまい、ページ内アンカーリンクを設定しているとアンカーリンクは動作しているのだけれど、ヘッダーメニューが上から重なってテキストが見えていない…
飛ばした先が意図せず隠れてしまっている！！　ということが起こります。

よくあるメニューの作り方ではありますが、地味にめちゃくちゃ調整がめんどくさいわけです。

サンプルコード

See the Pen
ヘッダーが追尾するメニューのアンカーリンク用CSS by miccyome (@miccyome)
on CodePen.

ヘッダーが追尾するメニューのアンカーリンク用CSS

アンカー用のクラスを作り、divを設置（ブロック要素にすること）
padding-topで作ったヘッダーの高さ分を指定し、
margin-topで打ち消しするのが一番単純な方法。z-indexはつけておいたほうが無難。

なお背景画像が敷いてある要素にこの手法は使えない。

Html

<div id="header">
  <div><a href="#menu1">メニュー1：コンテンツA</a></div>
  <div><a href="#menu2">メニュー2：コンテンツB</a></div>
  <div><a href="#menu3">メニュー3：コンテンツC</a></div>
</div>

<div id="menu1" class="anc"></div>
<div class="contentA">コンテンツA</div>

<div id="menu2" class="anc"></div>
<div class="contentB">コンテンツB</div>

<div id="menu3" class="anc"></div>
<div class="contentC">コンテンツC</div>

CSS


#header{
  display:flex;
  position:fixed;
  top:0;
  background:#ccc;
  height:70px;
  
}
#header > div{
  margin:15px;
}


.anc {
margin-top: -70px;
padding-top: 70px;
position: relative;
z-index:-1;
}

.contentA{
  margin-top: 70px;
  width:500px;
  height:500px;
  background:red;
}

.contentB{
  width:500px;
  height:500px;
  background:blue;
}

.contentC{
  width:500px;
  height:500px;
  background:green;
}