同じページ内でリンクさせる方法 [レッスン付]

ページが長い場合などは、ページの上部にリンクを設置し、すぐにページ内の目的の場所に飛ぶ設定をすることがあります。そのページ内リンクの方法を説明します。

必要なものは2つです。

  1. リンク元
  2. リンク先

2. リンク元の設定

まずリンク元を設定します。

リンクさせるにはaタグを使います。

そのaタグ内のhrefの中にリンク先で設定したidと同じ名前を入れます。

このとき、名前の先頭に#を付ける必要があるので注意してください。

<a href="#section">リンク元</a>

これを記述すると、リンク元をクリックした時にリンク先へ飛ぶことができます。

1つのIDは1ページに1つだけしか使ってはいけないルールになっています。
ページ内の他の箇所で同じ名前のIDが使われていないかチェックしてから、IDの設定をしましょう。

1. リンク先の設定

次にリンク先を設定します。

リンクしたい場所のタグにidを設置します。

<div id="section">リンク先</div>

説明だけだと分かりにくいので実際やってみましょう。

レッスン

ダウンロードのデータの中身

  • index.html
  • style.css

今回のレッスンはCSSよりHTMLを編集することの方が多いです。穴埋め問題のようになっています。

完成ページ
https://smartpocke.com/sample/anchor/index.html

レッスンをダウンロード
https://smartpocke.com/sample/anchor/lesson_anchor.zip