【入門編】aタグによるページ内リンク（フラグメント識別子） – HTML実践ガイド

「ここを押すと、あそこに飛ぶ！」ページ内リンクの魔法をマスターしよう

Webサイトを見ていると、長いページで「目次」をクリックした瞬間に、スッと画面が移動する体験をしたことはありませんか？あれ、すごく便利ですよね。

実はあの動き、HTMLの「フラグメント識別子」という少し難しそうな名前の機能を使っているんです。でも、仕組みはとってもシンプル。今日は、初心者の方が必ず通るこの「ページ内リンク」の仕組みを、身近な例えを交えながら一緒に紐解いていきましょう。

—

想像してみてください。あなたは今、とても分厚い辞典を読んでいます。「あ」から始まる言葉を探したいとき、どうしますか？ページの端っこに書かれたインデックス（見出し）を目掛けて指を動かしますよね。

Webの世界でのページ内リンクも全く同じです。

1. 飛び先（目的地）に「名前（id）」を付けておく
2. リンク（入り口）で「さっき付けた名前」を呼ぶ

このたった2ステップで、ブラウザは「ああ、あそこに行きたいのね！」と理解して、目的地まで運んでくれるんです。

—

まず、ページ内の「着地点」に名前を付けます。ここで使うのが `id` 属性です。`id` は、ページの中で「世界にたった一つだけの名前」というルールがあります。出席番号のようなものですね。

1. はじめに

ここに、はじめにの文章が入ります。

次に、飛び先を指定する `a` タグを書きます。ポイントは `href` の中身。「#（ハッシュ）」を先頭に付けて、先ほど決めた名前を書くだけです。

これで、このリンクをクリックすると、ブラウザが自動的に `id=”section1″` と書かれた場所までスクロールしてくれます。簡単でしょう？

—

今のままだと、クリックした瞬間に「パッ」と画面が切り替わります。もちろんこれでも機能としては十分なのですが、もう少し上品に、スーッと滑らかに移動させたいですよね。

そんなときは、CSSの魔法を少しだけ使いましょう。たった一行、スタイルシートに書くだけで大丈夫です。

/ ページ全体（html）に対して設定します /
html {
/ これを書くだけで、移動が滑らかになります /
scroll-behavior: smooth;
}

「本当にこれだけ？」と思うかもしれませんが、現代のブラウザはとても賢いので、これだけで十分なんです。もしうまくいかない時は、CSSファイルに書き忘れていないか、あるいは別のスタイルが邪魔していないかを確認してみてくださいね。大丈夫、焦らず一つずつ確認すれば必ず動きます！

—

最後に、初心者がよくやってしまう「あれ、動かないぞ？」というポイントを2つだけお伝えします。

`href=”section1″` と書いてしまうと、ブラウザは「section1という名前のファイルを探しに行こう」と勘違いしてしまいます。必ず `#` を忘れずに！

`id` は「世界にたった一つ」です。同じページに `id=”section1″` が二つあると、ブラウザはどちらに行けばいいか迷ってしまいます。名前はいつもユニーク（唯一無二）に保ちましょう。

—

ページ内リンクの仕組み、いかがでしたか？

「idを付けて、#で呼ぶ」。たったこれだけのことですが、これができるだけで、縦に長いWebページがぐっと読みやすく、使いやすいものに変わります。

最初はうまくいかなくても全然大丈夫です。私も最初は「idって何？なんで動かないの？」と何度も悩みながら覚えました。まずは自分のPCのテキストエディタで、簡単な見出しを作ってリンクを貼る練習から始めてみてください。

あなたのWeb制作ライフが、今日から少しだけ楽しく、そして快適になりますように！応援しています！