HTMLのページ内リンクを作る方法を基本から詳しく解説します。
基本的にはIDを使う必要があるのですが、Javascriptを使うことでclassでもページ内リンクを作ることができるので、そのサンプルコードとページ内リンクが効かない原因についても合わせて紹介します。
HTMLのページ内リンクとは？
HTMLで作るリンクは以下のように通常href属性に記入したURL(ページ)に移動するように作ります。
<a href="https://example.com/other-page.html">hrefに書いたページにジャンプ</a>同じhrefに特別な書き方をすることで別のページではなく、同じページの指定したセクション(コンテンツ)まで移動させることができます。
<a href="#section1">idがsection1の場所に移動</a>
...
<div id="section1">セクション1のコンテンツ</div>ページ内リンクの事例
実際によく使われる例としては以下の画像のように、Webサイトのフッターにある「ページトップに戻る」ボタンがあります。
画像の右上にある上矢印の青いボタンがそうです。この場合ページトップに戻るので、ヘッダーナビゲーションの位置に戻るようになります。
このときクリックしてパッと切り替わるのではなく、ゆっくりスムーズに移動させる(スムーズスクロール効果)こともできます。
ページ内リンクの基本的な作成方法
ページ内リンク自体は、先ほどの例ですでに書いてしまいましたが、こちらのようになります。
<a href="#section1">idがsection1の場所に移動</a>
...
<div id="section1">セクション1のコンテンツ</div>作り方の流れはこのようになります。
- 移動先のコンテンツに
idを作成 - 移動させるリンクやボタンの
hrefに移動先のidをつける
作業の流れを具体的に以下で解説します。
1.移動先のコンテンツにidを作成
まず移動先のコンテンツにidを作っていきます。次のようなWebサイトがあったときに移動させたい各コンテンツごとにidを入れていきます。
id名は特に決まっていないのでわかりやすいものにしましょう。
id名がすでにある場合はそちらを使用します。
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 省略 -->
</head>
<body>
<header>ヘッダー</header>
<main>
<div>メインビジュアル</div>
<div>サービス一覧</div>
<div>お知らせ一覧</div>
</main>
<footer>フッター</footer>
</body>
</html>idをつけるとこのようになります。
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 省略 -->
</head>
<body>
<header>ヘッダー</header>
<main>
<div id="main_visual">メインビジュアル</div>
<div id="service">サービス一覧</div>
<div id="news">お知らせ一覧</div>
</main>
<footer>フッター</footer>
</body>
</html>2.移動させるリンクやボタンのhrefに移動先のidをつける
次に移動させるリンクやボタンを作成します。リンクやボタンの場所はどこでもOKです。ヘッダーだけとかフッターだけに設置してもOKです。
先ほどの例ではメインコンテンツの上にヘッダーがあったのでここにリンクを作ってみます。
hrefにidを入れる場合は、id名の前に#を入れる必要があります。これを入れないと動かないので注意してください。
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 省略 -->
</head>
<body>
<header>
<!-- 省略 -->
<ul>
<li><a href="#main_visual">メインビジュアル</a></li>
<li><a href="#service">サービス一覧</a></li>
<li><a href="#news">お知らせ一覧</a></li>
</ul>
</header>
<main>
<div id="main_visual">メインビジュアル</div>
<div id="service">サービス一覧</div>
<div id="news">お知らせ一覧</div>
</main>
<footer>フッター</footer>
</body>
</html>上記のような感じでリンクを作ったらさっそくクリックしてみましょう。
上記の例をそのままコピペした場合、画面の縦の長さがほぼないのでクリックしてもほとんど変化がありませんが、URLの最後に移動先のID名が追加されます。
https://example.com/#main_visualこのようになってればOKです。
ページ内リンクでスムーススクロール効果の適用する方法
ここまでで基本的なページ内リンクの作り方を紹介しました。
このままだとリンクをクリックした後一瞬で位置が変わるのでデザイン的に美しくないかもしれません。
そこで、こちらもよく利用される方法ですが、スムーススクロール効果を追加するとヌルッと画面が移動するようになります。
スムーススクロール効果の作り方
スムーススクロール効果はCSSで作ります。以下の3行を追加するだけでOKです。
html {
scroll-behavior: smooth;
}これをCSSで作って保存したら実際に動かしてみましょう。動きがヌルッと変わるはずです。
HTMLでページ内リンクを複数のIDやclassで作るには？
HTMLで作れるページ内リンクは必ずIDで、hrefを使ってID名を指定する必要があります。
またHTMLのルール上1つのコンテンツに複数のIDをつけることはできません。
classを使ったページ内リンクを作るにはJavascriptコードが必要です。
classを使ってページ内リンクを作るJavascriptコード
classを使う場合、通常のようにhrefを使うことができないのでJavascriptを使用することになります。
先ほどの例を修正してJavascript版に変更してみます。my-linkというclassをつけたリンクをクリックするとdata-targetで指定したID名のところまで移動します。data-targetに入れるID名は#なしでいけます。
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 省略 -->
<style>
main > div {
margin-top: 1000px;
height: 500px;
background-color: #f0f0f0;
}
</style>
</head>
<body>
<header>
<!-- 省略 -->
<ul>
<li><a href="#" class="my-link" data-target="main_visual">メインビジュアル</a></li>
<li><a href="#" class="my-link" data-target="service">サービス一覧</a></li>
<li><a href="#" class="my-link" data-target="news">お知らせ一覧</a></li>
</ul>
</header>
<main>
<div class="main_visual">メインビジュアル</div>
<div class="service">サービス一覧</div>
<div class="news">お知らせ一覧</div>
</main>
<footer>フッター</footer>
<script>
const links = document.querySelectorAll('.my-link');
links.forEach((link) => {
link.addEventListener('click', function(event) {
event.preventDefault();
const targetClass = event.target.getAttribute('data-target');
const targetSection = document.querySelector(`.${targetClass}`);
targetSection.scrollIntoView({behavior: 'smooth'});
});
});
</script>
</body>
</html>ページ内リンクが効かない原因と対策方法
最後にHTMLで作ったページ内リンクが効かない原因と対策方法について解説します。
ページ内リンクが効かない原因としては以下のようなものが考えられます。
- ID名の指定が間違っている
- リンクの書き方が間違っている
- 移動先のIDを設置していない
それぞれ対策方法を詳しく解説します。
ID名の指定が間違っている
リンクタグのhrefに記入するID名が移動先のものと違っていないか確認してください。
<a href="#id_name">ID名が間違ってるリンク</a>
<a href="id-name">#の書き忘れ</a>
<div id="id-name">移動先コンテンツ</div>文字の打ち間違いでうまく動かないというのは結構多いミスです。
リンクの書き方が間違っている
HTMLのaタグの書き方が間違っているとページ内リンクも効きません。
<a hre="#id-name">fが抜けてる</a>こちらも書き間違いがないかチェックしましょう。
移動先のIDを設置していない
リンクは間違ってないので動かない場合は移動先のIDが正しく設置されているかもチェックしましょう。
まとめ
このページでは、HTMLでページ内リンクを作る方法やJavascriptで作る方法を紹介しました。内容を以下にまとめます。
- ページ内リンクとはページ内を移動できるリンク
- HTMLの
aタグのhrefに#をつけて移動先のID名を入れる - CSSを使ってスムーズに移動させることができる
- IDではなくclassを使うこともでき、その場合はJavascirptを使う
- うまく動かないときは書き間違いがないかチェックする
やってることはそれほど難しくないのですぐに実装できると思います。Javascriptを使う場合はコードでエラーが発生しないか注意してください。