ブログやサイトで固定ヘッダーを設置すると、気になるモノとしてページ内リンクのズレがあります。 ページ内リンクで移動すると、リンク先が固定ヘッダーの下になってしまうというアレです。 この解決法としてはJavaScriptで調整するのが無難なのですが、スクリプト無効の環境向けにCSSだけでズレを解消したいという時もあります。 今回は、そんな時に役立つかもしれないCSSだけで行なうページ内リンクのズレ解消のテクニックです。 スポンサーリンク paddingを使った基本的な方法まず検索で調べると、次のものがよく出て来ます。これが基本的な方法です。 #ターゲット要素 { padding-top: 50px; margin-top: -50px; } リンク先の要素のpaddingを使ってヘッダーの高さ分ずらし、ずらした分をネガティブマージンで戻す方法です。要素がインラインならばmargin-topは
![ヘッダ固定時のページ内リンクのズレをCSSだけで解消する⇒“:targetとanimationを使う方法”](https://cdn-ak-scissors.b.st-hatena.com/image/square/1300f3fde7ce8a192bfd60f5b8972af9476aa572/height=288;version=1;width=512/https%3A%2F%2Fcdn-ak2.f.st-hatena.com%2Fimages%2Ffotolife%2Ft%2Ftomotan_uki%2F20170908%2F20170908101121.jpg)