【HTML】ページ内リンクを設定しよう【jQuery不要!】

HTML-CSS

みなさんこんにちは、現役エンジニアのサメハックです

アパレル企業でトップ販売員を経て
未経験からWebエンジニアに転職し、
現在正社員として5年働いています!

1分で理解できるHTML/CSS講座シリーズです。

今回はページ内リンクの設置方法について学んでいきましょう!

駆け出しエンジニアや未経験の方、
また新入社員を指導する先輩社員にとっても
わかりやすいように解説していきます!

この記事を読むと・・・
  • 1分でページ内リンクがHTMLのみで設置出来るようになる
1分で理解できるHTML/CSS講座シリーズはじめっ!

ページ内リンクとは

同じページ内に貼るリンクです。
よくあるものだと、ヘッダーの「お問い合わせボタン」をクリックすると
同じ画面の下の方にあるお問い合わせフォームまで、
びゅんっと飛ぶあれです

結論:aタグを使おう

用意するものは

  • idを設定した要素(リンク先)
  • aタグ

この2つです。

See the Pen Untitled by samehack (@samehack) on CodePen.

ここをクリックというボタンをクリックすると、
画面がスクロールされて「ここに飛ぶ」という要素が表示されましたね。

このように
<a href=”#リンク先のid”></a>
と設定することでページ内リンクが簡単に設定できます。

ポイントは、リンク先はidを設定することだよ!
classじゃダメだよ!

まとめ

  • リンク先要素にidを設定する
  • <a href=”#リンク先のid”></a> というリンク元を設定する

満足いただけたら、1クリックなのでSNSフォローしてもらえると嬉しいです🦈

タイトルとURLをコピーしました