ヘッダ固定時のページ内リンクのズレをCSSだけで解消する⇒“:targetとanimationを使う方法”ブログやサイトで固定ヘッダーを設置すると、気になるモノとしてページ内リンクのズレがあります。 ページ内リンクで移動すると、リンク先が固定ヘッダーの下になってしまうというアレです。 この解決法としてはJavaScriptで調整するのが無難なのですが、スクリプト無効の環境向けにCSSだけでズレを解消したいという時もあります。 今回は、そんな時に役立つかもしれないCSSだけで行なうページ内リンクのズレ解消のテクニックです。 スポンサーリンク paddingを使った基本的な方法まず検索で調べると、次のものがよく出て来ます。これが基本的な方法です。 #ターゲット要素 { padding-top: 50px; margin-top: -50px; } リンク先の要素のpaddingを使ってヘッダーの高さ分ずらし、ずらした分をネガティブマージンで戻す方法です。要素がインラインならばmargin-topは
