Webサイト制作の必須テクニック！HTMLとXHTMLでページ内リンクを使いこなそう
HTML、XHTML、アンカーを使ってページ内の一部にリンクする方法
アンカーの設定方法
まず、リンクしたい箇所（アンカー）に名前を設定する必要があります。HTMLでは、主に以下の2つの方法があります。
方法1：id 属性を使う
最も一般的な方法が、id 属性を使ってアンカーを設定する方法です。以下の例のように、リンクしたい要素に id 属性を追加します。
<h2 id="target">見出し</h2>
古い HTML のバージョンで使用されていた方法が、name 属性を使う方法です。以下の例のように、リンクしたい要素に name 属性を追加します。
<h2 name="target">見出し</h2>
リンクの作成方法
アンカーを設定したら、そのアンカーへリンクする部分を記述します。リンクの作成には、a タグを使用します。
リンクの書き方
<a href="#target">リンクテキスト</a>
上記の例では、#target 部分がアンカーの名前と一致するため、クリックすると "見出し" という見出しがある箇所へ移動します。
ポイント
- アンカー名の先頭に
#を必ず付けます。 - アンカー名は、英数字、ハイフン、アンダースコアのみを使用できます。
- 空白文字は使用できません。
- 大文字と小文字は区別されます。
その他
- アンカーは、ページ内だけでなく、別のHTMLファイル内のアンカーへもリンクできます。
- 複数のアンカーへリンクする場合は、それぞれのアンカーに異なる名前を付ける必要があります。
- アンカーへ直接移動する場合は、JavaScriptを使用する方法もあります。
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ページ内リンクの例</title>
</head>
<body>
<h1>目次</h1>
<ul>
<li><a href="#introduction">はじめに</a></li>
<li><a href="#about">このページについて</a></li>
<li><a href="#conclusion">まとめ</a></li>
</ul>
<h2 id="introduction">はじめに</h2>
<p>このページでは、HTML、XHTML、アンカーを使ってページ内の一部にリンクする方法について説明します。</p>
<h2 id="about">このページについて</h2>
<p>このページは、ページ内リンクのサンプルコードを紹介するページです。</p>
<h2 id="conclusion">まとめ</h2>
<p>HTML、XHTML、アンカーを使って、簡単にページ内リンクを作成することができます。</p>
</body>
</html>
- 目次
- このページについて
そして、それぞれのアンカーへリンクする箇所を作成しています。
XHTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ページ内リンクの例</title>
</head>
<body>
<h1>目次</h1>
<ul>
<li><a href="#introduction">はじめに</a></li>
<li><a href="#about">このページについて</a></li>
<li><a href="#conclusion">まとめ</a></li>
</ul>
<h2 id="introduction">はじめに</h2>
<p>このページでは、HTML、XHTML、アンカーを使ってページ内の一部にリンクする方法について説明します。</p>
<h2 id="about">このページについて</h2>
<p>このページは、ページ内リンクのサンプルコードを紹介するページです。</p>
<h2 id="conclusion">まとめ</h2>
<p>HTML、XHTML、アンカーを使って、簡単にページ内リンクを作成することができます。</p>
</body>
</html>
このXHTMLコードは、HTMLコードとほぼ同じように見えますが、すべての属性値が引用符で囲まれている点が異なります。
このサンプルコードを参考に、自分のWebサイトでページ内リンクを作成してみてください。
アンカーを利用しない方法
JavaScriptを使って、ページ内の特定の要素へ直接移動する方法があります。この方法の利点は、アニメーションなどの効果を簡単に追加できることです。
<script>
function scrollToElement(id) {
const element = document.getElementById(id);
if (element) {
window.scrollTo({
top: element.offsetTop,
behavior: 'smooth'
});
}
}
</script>
<a href="#" onclick="scrollToElement('target')">リンクテキスト</a>
上記の例では、scrollToElement() 関数を使って、target というIDを持つ要素へスクロールします。
ヘッダー要素を使う
<h1>、<h2> などの見出し要素に id 属性を設定することで、ページ内リンクを作成できます。この方法は、シンプルなリンクを作成したい場合に有効です。
<h2 id="target">見出し</h2>
<a href="#target">リンクテキスト</a>
断片識別子を使う
URLに # とアンカー名を追加することで、ページ内リンクを作成できます。この方法は、別のページからリンクする場合に有効です。
<a href="https://example.com/#target">リンクテキスト</a>
- アニメーションなどの効果を必要とする場合は、JavaScriptを使う方法が適しています。
- シンプルなリンクを作成したい場合は、ヘッダー要素を使う方法が適しています。
- 別のページからリンクする場合は、断片識別子を使う方法が適しています。
これらの方法を理解することで、状況に合わせて適切な方法でページ内リンクを作成することができます。
html xhtml anchor
