リンク先に移動した時、ヘッダー部分だけずらす

これから書くことは、「しょーご中級」ではそこまで求められていません。
しかし、実際には必要なことだと思うので紹介します。

ヘッダーで隠れてしまう

クリックしてリング先に移動すると、
そのままではヘッダー部分が重なってしまい、
タイトルが隠れてしまいます。
（下の動画参照）

少し分かりにくいかもしれませんが、
本当は「高速コーディング」の上に、
「ユアコーディングの特徴」というセクションのタイトルがあります。

そこで、移動した時にヘッダーの高さだけずらし、セクションのタイトルがきちんと表示される方法を紹介します。
（下の動画参照）

• １つ目は、htmlとcssの変更
• ２つ目は、jQueryの追記

に、なります。

１の「htmlとcssだけを変更」してもうまくいかない場合があるので、
２の「jQueryを書き加える」場合も紹介しています。

html,cssの変更

書き換える前のhtmlです。

sectionに、classのfeatureが当たっています。
（リンク先に飛ぶようにidも当てています。本来ならidだけでいいと思います。）

そこに下記のように、classに書き加えます。

classにanchorを加えました。

次に、cssにもanchorを半角スペースを空けずに書き加えます。

私の場合は、ヘッダーの高さが94pxです。

すると、先に載せた動画のように、ヘッダーの高さ94px分ずれて移動します。
（下の動画）

jQueryの追記

htmlとcssでは、うまくいかない場合があります。
もう先につけていたpaddingやmarginが邪魔をしてしまい、余計な高さができてしまいます。
（下図）

これでも、セクションのタイトルは隠れないのですが、
タイトルの上が妙に広くなっているのが分かると思います。

そこで、jQueryを書き加えます。

正直、細かな意味は分かっていません。。。汗
でも、そのままjQueryに書き加えるだけで、きちんと表示されました。
（下の動画参照）

まとめ

リンク先に移動した時に、ヘッダーで隠れない方法を紹介しました。

htmlとcssだけでうまくいくならいいですが、上に高さがついた場合は、jQueryで対応したらいいかと思います。

＜参考サイト＞
https://www.tam-tam.co.jp/tipsnote/html_css/post4776.html
https://y-com.info/contents/?p=5641