このページをクリックしてしまうほど困っているクリエイターのみなさん、こんばんは。
初めてこのようなネタを書く河野です。

今後は、自らの備忘録も兼ねて、できるだけ省エネでかつHTML上、悪影響にならないようなネタを提供していきたいと思います。

今回は、最近のWEBページの作りではよく見られる固定ヘッダーに関するネタです。

ページ内アンカーリンクもまだまだ使われる小ワザですが、この固定ヘッダーがあるばっかりに、本来の飛び先である到達ポイントがヘッダーに隠れてしまうことがありますね。
これ、ググれば結構出てくるのですが、どれもjavascriptを使って制御する小難しいものばかり（本来はそうするのが正しいんですよ、HTML上は(^_^;)）

私は元々、すぐググって解決する方ではないので、ググる前にやっていた小ワザを紹介します。実は小難しいjavascriptなど利用しなくても、HTMLだけで済んでしまいます。

どうするかというと…

固定ヘッダーの高さが60pxという前提で、id=”tobisaki”に飛ぶアンカーリンクを設定します。

<h3 id="tobisaki">アンカーリンクの飛び先</h3>
<div class="container-fluid" style="margin-top:20px;">
<div class="row">
・
・
・
</div></div>

このまんまだと、H3は固定ヘッダーの後ろに隠されてしまうわけです。
動きは間違っていないんだけど、タイトルが隠れてしまうのでかっこ悪い。

そこで私のようなノンプロが考える方法は単純なものです。

H3の上に60pxの高さを持ったid=”tobisaki”の要素を作ってしまえばいいのだ。
（美しいコーディングをしているみなさまごめんなさい）

つまり、これだけのこと。

<div style="padding-bottom:60px;" id="tobisaki"></div>
<h3>アンカーリンクの飛び先</h3>
<div class="container-fluid" style="margin-top:20px;">
<div class="row">
・
・
・
</div></div>

ここで注意していただきたいのは、id=”tobisaki”を前の要素につけることです。
こっちに付けないとアンカーはH3に向かってしまいますので。

CSSは別にheightでもなんでもいいと思います。

簡単でしょ？
初心者の方は特に、javascriptよりは手が出しやすいのではないでしょうか。

javascriptがわからない方、苦手意識がある方はぜひ試してみてください。

ただ、実際に高さが出てしまうので、デザイン的に問題がない範囲でしか適用できません。
デザイン上余白がどうしてもおかしくなってしまう場合は諦めて、ちゃんとjavascriptでコントロールしてあげてください。

どちらかというと、あまり良いやり方でないのは確かですので、そこはご承知くださいね。

ではまた。