2.1 アンカーリンク
HTMLページ内のナビゲーションは、ユーザーがドキュメントのさまざまなセクションに素早く移動するのを助けるよ。これは特に、コンテンツが多い長いページには便利だね。HTMLでは、アンカーリンクやid属性、さらにはJavaScriptを使ったナビゲーションなど、いくつかの実装方法があるよ。
アンカーリンクは、ページ内ナビゲーションの最も一般的な方法だよ。アンカータグを使って、ユーザーがドキュメントの特定の部分に移動できるんだ。
使用例:
id属性を使ってアンカーを作成する:
<h2 id="section1">Section 1</h2>
<p>Content of section 1...</p>
<h2 id="section2">Section 2</h2>
<p>Content of section 2...</p>
<h2 id="section3">Section 3</h2>
<p>Content of section 3...</p>
アンカーへのリンクを作成する:
<nav>
<ul>
<li><a href="#section1">Go to Section 1</a></li>
<li><a href="#section2">Go to Section 2</a></li>
<li><a href="#section3">Go to Section 3</a></li>
</ul>
</nav>
ユーザーがリンクをクリックすると、ブラウザは指定されたidを持つ要素に自動的にページをスクロールするよ。ページは再読み込みされないんだ。
name属性を使用したナビゲーション
name属性もアンカーの作成に使えるけど、これはあまり一般的でなく、旧式とみなされているよ。
例
<a name="top"></a>
<p>Top of the page...</p>
<a name="bottom"></a>
<p>Bottom of the page...</p>
<nav>
<ul>
<li><a href="#top">Go to Top</a></li>
<li><a href="#bottom">Go to Bottom</a></li>
</ul>
</nav>
2.2 JavaScriptを使ったスクロール
JavaScriptは、ページ内ナビゲーションにもっと柔軟な機能を提供してくれるよ。scrollIntoViewやscrollToメソッドを使って、ページの各要素にスムーズにスクロールできるんだ。
使用例:
このコードは、ボタンをクリックすると指定した要素にスムーズにスクロールするよ。
<button onclick="scrollToSection('section1')">Go to Section 1</button>
<button onclick="scrollToSection('section2')">Go to Section 2</button>
<button onclick="scrollToSection('section3')">Go to Section 3</button>
<h2 id="section1">Section 1</h2>
<p>Content of section 1...</p>
<h2 id="section2">Section 2</h2>
<p>Content of section 2...</p>
<h2 id="section3">Section 3</h2>
<p>Content of section 3...</p>
// 指定したセクションにスムーズにスクロールするための関数
function scrollToSection(sectionId) {
// IDで要素を見つける
document.getElementById(sectionId).scrollIntoView({ behavior: 'smooth' });
}
2.3 タグ <nav>
HTML5の<nav>タグは、ナビゲーションリンクを含むページセクションを定義するために使われるよ。このタグは、ナビゲーションブロックをセマンティックに示して、ウェブページの構造を改善し、ユーザーや検索エンジンにとってよりアクセスしやすくしてくれるんだ。
<nav>タグは、サイト内または現在のドキュメント内のナビゲーション用リンクをグループ化するために使うんだよ。主要なメニューや補助メニュー、パンくずリスト、ページ一覧など、他のナビゲーション要素が含まれることがあるよ。
構文
<nav>
<!-- ナビゲーション要素 -->
</nav>
使用例
<header>
<h1>私のウェブサイト</h1>
<nav>
<ul>
<li><a href="#home">ホーム</a></li>
<li><a href="#about">私たちに関しては</a></li>
<li><a href="#services">サービス</a></li>
<li><a href="#contact">お問い合わせ</a></li>
</ul>
</nav>
</header>
説明
<header>タグ: ナビゲーションメニューを含むページの見出しを作成するために使われる<nav>タグ: ページの異なるセクションにリンクするリストを含む<ul>と<li>タグ: ナビゲーションリンクのリストを作成するために使われる<a>タグ: ユーザーがページやサイトの他の部分に移動できるリンクを定義する
2.4 <nav> タグの活用
<nav> タグは、次のようなナビゲーションリンクをグループ化するために使うんだ:
- サイトのメインメニュー
- 補助メニュー
- パンくずリスト
- ページネーションリンク
- その他のナビゲーションリンク
サイトのメインメニュー
<nav>
<ul>
<li><a href="#home">ホーム</a></li>
<li><a href="#about">私たちに関しては</a></li>
<li><a href="#services">サービス</a></li>
<li><a href="#contact">お問い合わせ</a></li>
</ul>
</nav>
補助メニュー
<nav>
<ul>
<li><a href="#faq">よくある質問</a></li>
<li><a href="#support">サポート</a></li>
<li><a href="#privacy">プライバシーポリシー</a></li>
</ul>
</nav>
パンくずリスト
<nav aria-label="breadcrumb">
<ol>
<li><a href="/home">ホーム</a></li>
<li><a href="/category">カテゴリ</a></li>
<li>現在のページ</li>
</ol>
</nav>
<nav> タグの利点
セマンティックなマークアップ
<nav> タグを使うことで、検索エンジンやアクセシビリティ技術がページの構造をより理解しやすくするよ。これにより、サイトのアクセシビリティが向上し、SEOにも良い影響を与えるんだ。
ページ構造の改善
<nav> タグはナビゲーション要素を主なコンテンツから明確に分けて、ページのマークアップをより論理的で構造化するんだ。
スタイリングの簡略化
<nav> タグを使って囲まれたナビゲーション要素は、CSSで簡単にスタイルを設定できるので、外観と使いやすさを向上させるよ。
GO TO FULL VERSION