今回はページ内リンクを使用した際、リンク先の位置を思い通りに設定する方法について解説します。
この方法を知ることで、追従するタイプのヘッダーを設定している場合にページ内リンクのリンク先がヘッダーの裏に隠れてしまうことを防ぎ、閲覧しやすいサイトを作成することができます。
一緒に理解を深めていきましょう。
目次
ページ内リンクとは
ページ内リンクとは、同じページ内でジャンプ先を指定し、クリックをするとジャンプ先に移動するリンクのことを言います。
例えば、ブログの目次。
多くの場合は最初に目次があり、見出しごとにページ内リンクが設置されています。ユーザーは目次の文章を読んで興味のある箇所をクリック（タッチ）すればスクロールすることなく内容が記述されている部分まで遷移することができます。
ページ内リンクを設置することで、サイト閲覧者が知りたい情報に辿り着くまでの動作や時間を短縮し、サイトのユーザビリティを上げることができます。
追従型ヘッダーとは
追従型ヘッダーとは、サイトを下にスクロールした際、本来ならば見えなくなってしまうヘッダー部分を画面上に固定していつでも見える状態にすることをいいます。
本サイトもある程度スクロールした後に追従ヘッダーが現れるようになっていますので、実際に動かして確認してみてください。
追従型ヘッダーのメリット
追従型ヘッダーのメリットは、わざわざトップまで戻ってメニューを押す手間が省けるということです。
縦に長いサイトではメニューを押すためにトップまで戻ることがストレスに感じてしまう時もありますが、追従型ヘッダーにすることで解消されます。
また、追従させるヘッダーの内容に申し込みボタンやお問い合わせボタンを入れると、行動したいと思った時にストレスなくボタンを押せるのでコンバージョン率の向上が見込めます。
追従型ヘッダーのデメリット
追従型ヘッダーのデメリットは、常に表示されていることで圧迫感を感じやすいということです。
本来、画面いっぱいにコンテンツが表示されるところ、ヘッダーが常に表示されることでコンテンツの範囲は画面いっぱいからヘッダーの範囲を引いたものになり、狭く感じることもあるかもしれません。
使用する場合は、追従型ヘッダーを使用した方が良いのか十分に検討し、使用する場合には背景色やサイズ等を工夫することで圧迫感を感じさせないようにすると良いでしょう。
追従型ヘッダーの場合、ページ内リンクのリンク先はこうなります
追従型ヘッダーの場合、ページ内リンクを指定した時のデフォルトの状態と調整後の状態を確認していきましょう。
調整前
調整前のデモはこちらです。
h2タグに書かれている見出しの文字が追従ヘッダーの下に隠れてしまい、読めなくなってい流ことが確認できます。
調整後
リンク先に遷移した際に見出しが隠れないように調整するとこのようになります。
リンク先でも見出しがヘッダーに隠れることなくみやすい位置に遷移したのが確認できます。
リンク先がヘッダーの下に隠れないようにするには
では実際に、リンク先がヘッダーの下に隠れないようにするにはどうすればいいでしょうか。
実はCSSで簡単にリンク先の位置を調整することができます。
下記のコードをご覧ください。
<div>
<section id="one">
<div class="section-inner">
<h2>one</h2>
</div>
</section>
<section id="two">
<div class="section-inner">
<h2>two</h2>
</div>
</section>
<section id="three">
<div class="section-inner">
<h2>three</h2>
</div>
</section>
<section id="four">
<div class="section-inner">
<h2>four</h2>
</div>
</section>
<section id="five">
<div class="section-inner">
<h2>five</h2>
</div>
</section>
</div>section::before {
content:'';
display: block;
padding-top: 120px;
margin-top: -120px;
}ここでのポイントは、リンク先の要素に疑似要素を指定し、padding-topで上からの距離を調節・margin-topで見た目の余白を帳消しするというところです。
このように記述するとブラウザ上では先ほどの「調整後」のように表示されます。
padding-topやmargin-topの値はレスポンシブ対応する必要はありますが、CSSだけで調整できるのはとても手軽ですね。
まとめ
今回はページ内リンクを使用した際、リンク先の位置を思い通りに設定する方法について解説しました。
CSSだけで調整できるは簡単で嬉しいですよね。
追従型ヘッダーを取り入れた際や、追従ヘッダー以外の場合でも上の余白が少し欲しい時にぜひ実装してみてください。
その他の記事
【CSS】marginとpaddingの違いや使い方の解説
今回は、CSSのmarginとpaddingについて解説しようと思います。CSS初心者には「marg…
【CSS】positionのrelative、absolute、fixed、stickyの使い…
今回は、CSSのpositionプロパティについて詳しく解説します。positionはレイアウトに必…
【CSS】clip-pathで背景を斜めに切り抜く方法
今回は、背景を斜めに切り抜く方法を紹介します。Webデザインでよくある表現として、背景を斜めにするデ…
