Perl Web開発者のHTML・CSS入門

ヘッダーを固定した場合に、アンカーがずれるのを簡単なHTMLとCSSで修正する方法

ヘッダーを固定した場合に、アンカーがずれるのを簡単なCSSで修正する方法を紹介します。

アンカーとというのは「#」で始まるページ内リンクのことです。

アンカーリンク

<a href="#design">アンカーリンク</a>

<h3 id="design">アンカーリンクのとび先</h3>

ヘッダ固定デザインは、スマートフォンサイトを作成する場合に、ユーザー体験が改善されますので、PCサイトでも一般的に使われるようになりましたね。

この場合に、アンカーを使って、リンクを張った場合に、固定ヘッダの裏に、移動先の見出しが隠れてしまうという事象が発生します。上要素の下マージンと下要素の上マージンがマージされてしまう場合に、下要素の上マージンが0と判定されてしまうためです。

HTMLとCSSによる簡単な解決方法

HTMLとCSSによる簡単な解決方法があります。それは、アンカーのとび先自体にidを設定するのではなくって、その手前に高さ1pxのブロック要素を作り、idを設定します。とび先自体には、十分な上マージンを設定しましょう。1pxであれば、デザイン的に、そんなに気にならないと思います。

<a href="#design">アンカーリンク</a>

<div id="design" style="height:1px"></div>

<h3 style="margin-top:50px">アンカーリンクのとび先</h3>

このように書くことで、簡単に解決できます。

一つの注意点として、高さ1pxのブロックが入ることで、上要素の下マージンと下要素の上マージンされず合計されるので、上にある要素の下マージンを、減らす必要があることでしょう。

アンカーリンクのとび先

ここがアンカーリンクのとび先です。