CSSのbefore疑似要素を使ってページ内アンカーリンクでスクロールした位置と固定ヘッダー要素が被らないようにする方法｜BLACKFLAG

情報量が多く縦に長いWebページではページ内をスクロール移動させるアンカーリンクを設置することはよくあります。 その際、Webページ内のヘッダー要素を固定していると、アンカーリンクをクリックしてスクロール移動した位置と固定ヘッダー要素が被ってしまう、という事象に陥ることがあります。 アンカーリンクで移動した位置に固定ヘッダーが被ってしまう動作サンプル この固定ヘッダーを被らないようにするには、スクロールさせる位置の要素の上部に固定ヘッダーの高さ分の余白を付けておくなど、画面構成において余白の対策が必要になったりするのですが、そのような煩わしい調整をせずにCSSのbefore疑似要素を使って簡単に解消する方法があったのでご紹介してみます。 「CSSのbefore疑似要素を使ってページ内アンカーリンクでスクロールした位置と固定ヘッダー要素が被らないようにする方法」サンプルを別枠で表示 冒頭で紹

[htn_50koma]

CSSのbefore疑似要素を使ってページ内アンカーリンクでスクロールした位置と固定ヘッダー要素が被らないようにする方法｜BlackFlag

[suquiya0]

CSSトリック、てきなもの。