こんにちは。
プロクラスの中本です。
みなさまいかがお過ごしでしょうか。
京都は緊急事態宣言下なので、私はもっぱらNetflixにお世話になっています。
最近は「ケーブル・ガールズ」にハマりました。
1930年代ごろの電話の交換手の話です。当時のファッションや車は素敵ですね～。
内容もすごく面白いので、Netflixを契約されている方はぜひ観てみてください！
余談はこれくらいにして、本日の本題に入ります。
目次
ページ内リンクとは
本日はWeb制作の現場でよく使われる「ページ内リンク」について、お話していきます。
ページ内リンクとは、バナーやボタンをクリックすると同じページの指定の場所へ移動するリンクのことで、長文のページでは目次の役割として使われることが多いものです。
ページ内リンクはHTMLファイルで「aタグ」を使用し、動作することができます。
一例としてベンザブロックのサイトを見てみましょう。
それぞれのポイントにリンクが設置されていて、クリックすると該当の場所へ移動する仕組みとなっています。
このように、意外とさまざまなサイトで利用されています。
とても簡単にできるので、ぜひ参考にしてみてください！
HTMLの記述方法
①スクロールしたい場所へid属性を指定する。
<section id=”point01“>ここへスクロールする</section>
②ボタンやバナーにaタグを使用して、①で決めたidの場所へリンクするように指定する。
<a href=”#point01“>ポイント①</a>
上記の記述をそれぞれ好きなところへ記述するだけで、ページ内リンクが完成します！
id属性を変えれば、何個でも作成することができます。
動作をなめらかにする「スムーズスクロール」
これだけの指定だとページが変わったようにリンクが飛びますが、CSSの指定だけで指定する場所へスクロールさせることができます。
その指定方法は以下のスタイルを適用するだけで実現することができます。
html {
scroll-behavior: smooth;
}
ページ内リンクのデザインを調整する
ただリンクを貼るだけではなかなか目につきづらいため、ページ内リンクでもボタンのようにデザインをします。
背景色を付けたり、マウスオーバー時のCSSを調整するなどするとより分かりやすくなります！
実践！ページの「トップへ戻る」ボタンを設置する
ページ内リンクでよく使用されるのが「トップへ戻る」ボタンです。
「トップへ戻る」ボタンを設置することで、下層ページへアクセスしてもらいやすくなります。
やり方は、以下のように指定するだけです。
<a href=”#top“>トップへ戻る</a>
試しに実践してみましょう。
テキスト版「トップへ戻る」
画像版「トップへ戻る」
さいごに
いかがでしたでしょうか。
ページ内リンクを上手に使用すると、ユーザビリティを高めることができます。
よりユーザーに優しいデザインにすることでページの滞在時間を高めることができ、集客につなげることができます。
ご自身のサイトにぜひ取り入れてみてください！