CSS

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

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

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

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

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

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

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

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

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

ABOUT ME
シラツキ
当ブログは同人サークル「にんじんみるく」のシラツキが運営する個人ブログです。 同人誌即売会の情報やネタ、技術的な内容など様々なコンテンツを配信しています。 普段はwebサイト作ってる人インターネッツお絵かきマン。 Webサイトの制作、ECサイトの運営、ブログ、イラスト制作など色々やってます。 個人でWeb技術ブログ、趣味のブログ、YouTube活動中。

イラスト制作、webサイト制作、商品のご紹介など様々なお仕事を募集しております! 下記リンクよりお気軽にご連絡ください!

お仕事・ご依頼について

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)