これから書くことは、「しょーご中級」ではそこまで求められていません。
しかし、実際には必要なことだと思うので紹介します。
ヘッダーで隠れてしまう
クリックしてリング先に移動すると、
そのままではヘッダー部分が重なってしまい、
タイトルが隠れてしまいます。
(下の動画参照)
少し分かりにくいかもしれませんが、
本当は「高速コーディング」の上に、
「ユアコーディングの特徴」というセクションのタイトルがあります。
そこで、移動した時にヘッダーの高さだけずらし、セクションのタイトルがきちんと表示される方法を紹介します。
(下の動画参照)
- 1つ目は、htmlとcssの変更
- 2つ目は、jQueryの追記
に、なります。
1の「htmlとcssだけを変更」してもうまくいかない場合があるので、
2の「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
コメント