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を自動で取得すると良いかと思います。
そこは次回サンプルコードを紹介しますね。
ABOUT ME
