header固定時のページ内リンクの位置を丁度いい位置に調整する方法【CSSのみ】

この記事は約2分で読めます。

headerや何かしらを上部に固定したときのあるある「headerの下に隠れてコンテンツ見えねえじゃん!!」
これよくありますよね。
これを解決する方法を今回は紹介します。

JSでもできますが、今回はは簡単にCSSだけでheaderでコンテンツが隠れてしまう問題を解決したいと思います。
では早速やっていきましょう!!

CSSだけでheader固定時のページ内リンクの位置を調整する

さてさて、header固定して、コンテンツが裏に隠れてめんどくせー!ってなってる方必見です!
今回はCSSだけで問題を解決していきます。

まずはHTMLはこんな感じ。
headerをfixedで固定してある状態とします。
今回リンクを飛ばしたいのは「#content01」。
このままでは、headerの高さ分「#content01」が隠れてしまいます。

<header>固定してるよ</header>

<main>
<section id="content01">コンテンツだよ</section>
</main>

これをどうするのか。
解決するためのCSSを書いていきます。

header{
height: 20px;
}

#content01{
margin-top: -20px;
padding-top: 20px;
}

headerの高さが20pxだった場合になります。
headerで隠れてしまう20px分をコンテンツでとってあげて、ネガティブマージンでその分を隠してあげるとデザインを崩すことなく、ページ内リンクをさせたい位置に行くはずです!
これでギチギチで見にくい場合はpaddingを増やしてネガティブマージンでスペースを調整するとうまくいくと思います。

ただ今回の解決法の問題としては、headerの高さが変動してしまう場合です。
変動してしまうとうまく調整ができないので、JSを使って今回指定しているmarginとpaddingを自動で取得すると良いかと思います。
そこは次回サンプルコードを紹介しますね。

コメント

タイトルとURLをコピーしました