HTML初心者さん、いっしょに覚えよう♪ページ内リンクのやさしい仕組み

こんにちは！

HTMLやCSSを勉強しはじめたばかりの私が、最近「ページ内リンク」について学んだことを、同じ初心者さんにもわかりやすくシェアしたいと思います✨

ブログを書いていると、「ページの上に戻るリンク」や「この項目にジャンプするリンク」を作りたいと感じたこと、ありませんか？

実はそれ、「ページ内リンク」といって、HTMLの基本テクニックのひとつなんです♪

ページ内リンクってなに？

ページ内リンクとは、同じページ内の指定した場所にジャンプできるリンクのことです。

例えば、長いページの「目次」をクリックすると、すぐその項目までスクロールされることってありますよね？

それがまさにページ内リンクの仕組みです📌

読者にとっても「知りたい情報にすぐたどり着ける」ので、とっても便利！

ブログの読みやすさ・ユーザビリティがグッと上がります✨

ページ内リンクの作り方（超かんたん！）

1. ジャンプ先に「id」をつける
2. リンクを設定する

この2ステップだけです！

① ジャンプ先にidをつける

上のように、ジャンプしたい見出しに「id」をつけます。

この場合「about」がidになります。

② リンクを設定する

hrefのあとに #id名 を書くだけで、ページ内リンクが完成します！

ポイントは、「#」をつけて、先ほど設定したidと同じ名前を書くことです☺️

実際の使いどころ

• 記事の冒頭に「目次」をつけたいとき
• 長い記事の途中に「ページトップへ戻る」ボタンを置きたいとき
• 読者のストレスを減らして、記事を最後まで読んでもらいたいとき

たとえばこんなふうに活用できます👇

そして、先頭部分にはこう書きます👇

✨ページ内リンクはアドセンス対策にも◎

「読者にとって読みやすいサイト」は、Google AdSenseの審査でも大事なポイントとよく聞きます。

いろいろ調べていたら、「ページ内リンクがあると、読みたいところにパッと飛べるから、ブログが見やすくなる」って知って、すごく納得しました。

見やすいブログって、読者さんにも優しいし、Googleにもいい印象になるみたいです♪

読んでくれる人がストレスなく情報を探せると、ブログの印象がよくなるそうです。

私もアドセンスに申し込んでみたいと思っていて、「どうすれば読みやすいブログになるんだろう？」と考えていたときに、ページ内リンクの存在を知りました。

まだまだ勉強中ですが、リンクをつけるだけで見た目が少しプロっぽくなるのも嬉しくて、これからもっと活用していきたいと思っています😊

まとめ：初心者でもできる！まずは一歩ずつ

「HTMLって難しそう…」と思っていた私でも、実際にやってみたら「これだけ？」って拍子抜けするくらいシンプルでした😳

ブログの質を上げたいなと思っている方は、ぜひこの「ページ内リンク」からチャレンジしてみてくださいね♪

私もまだまだ勉強中ですが、こうして少しずつ理解していけると嬉しくなります。

この記事が、あなたの「最初の一歩」になれたらうれしいです🌸

補足

✔ もう少し詳しく言うと…

id="about" の「about」は、その見出しに名前をつけるようなイメージです。
この名前をつけることで、リンク先として指定できるようになります。

たとえば：

と書くことで、「idがaboutとついている場所（＝このブログについて）」にジャンプしてくれます。

✔ 名前の付け方にルールはあるの？

少しだけルールがあります👇

• アルファベット、数字、ハイフン（-）、アンダースコア（_）が使えます
• 最初の文字は数字NG
• スペースは使えません（単語をつなげたいときはハイフンかアンダースコア）

✔ じゃあ、aboutじゃなくてもいいの？

もちろんOK！
以下のようにしても、ちゃんと動きますよ😊

自分がわかりやすいように名前をつければ大丈夫です♪

✔ まとめ

つまり、about というのは「この場所にジャンプしたいよ〜」とリンクで呼び出すための目印で、自分で決めたニックネームみたいなものです✨

今日も最後まで読んでいただきありがとうございました♪