HTML/CSS

[HTML/CSS] ページ内をジャンプ!-サイト内リンクの貼り方-

ページ内リンクとは

こんにちは、リバティエンジニア[?]のFUNAです。 現役エンジニアとしてアプリケーション開発やWeb制作、SEOやブログ運営をしています。

以前、今見ているページではない「外部ページ」にジャンプする方法は学習しましたが、今日はHTML/CSSで同じページの別の場所にジャンプする方法を見ていきます。

http://itthestudy.com/html%E3%81%AE%E3%83%AA%E3%83%B3%E3%82%AFa%E3%82%BF%E3%82%B0%E3%82%92%E8%B6%85%E7%B0%A1%E5%8D%98%E3%81%AB%E8%A7%A3%E8%AA%AC%EF%BC%81/

HTMLでのページ内リンクの設定方法

ページ内リンクしたい先のタグに"id"を設定する

ページ内リンクにするものは、該当する HTML 要素の"id" 属性を使って設定していきます。

<!-- ページ内のリンク先の指定はIDを使って指定します -->
<h1 id="link-to-me">ここにジャンプします。</h1>

"id" 属性の名前については、下記の3つのことに注意してください。

  • ページ内でユニーク(唯一無二)な名前をアルファベットで付ける
  • 数字で書き始めるのはNG!(例えば、「id="1"」 などは不可です)
  • 大文字と小文字を区別する

リンク元のアンカー要素(aタグ)のhrefを指定

次に、クリックされる側の指定方法です。

<!-- ジャンプ先のIDを#から始めて指定します -->
<a href="#link-to-me">これをクリックすると、ページ内リンクにジャンプします</a>
IT博士
IT博士

"id"の名前の冒頭に「#」を付けるのを忘れないようにして下さい。

もし、忘れてしまうとどうなりますか?

IT博士
IT博士

"#"がない場合、「 <現在のページの親ディレクトリ>/<指定したリンク> 」という相対パスとして認識されてしまうのです。

ページ内リンクにジャンプしたはずなのに、ずれてしまう!?

ページのレイアウトなどによっては、ページ内のリンクに移動した際に、表示する位置が若干ずれてしまうかもしれません。

原因は多くの場合、CSSを使ったレイアウトに起因します。一概には言えませんが、代表的な例が、marginとpadding に依るものです。

ページ内リンクには、ブラウザのウィンドウの上枠に一致するようにジャンプします。
この問題を解決するのは、そもそも要素のレイアウトに影響してしまうためすこし厄介ですが、いくつか迂回策があります。

おすすめの解決策としては、「ページ内リンク専用の要素を追加する」です。

対象となる要素をspan 要素で囲む

<!-- spanでテキストを囲む。span のピッタリ上にページ内リンクになる。 -->
<h1>
  <span id="link-1">ここが本当のページ内リンク先です!</span>
</h1>

このようにすることでページ内リンクがずれずにしっかり正しい位置にジャンプするようになります。

まとめ

今回は、HTML/CSSのページ内でのジャンプの仕方を一緒に見ていきました。
基本的な定義の仕方から、よくあるエラー時の改善方法なども載せており、サンプルコードも記載したので、わかりやすくなっていると思います。
もし「わかりにくい!」などあったら教えてください♪

~HTMLクイックリファレンス~ タグ一覧


最近の投稿

「ワーケーション」とは?環境省が推している理由やメリットを解説

「ワーケーション」とは?2020年7月に、菅官房長官が「ワーケーション」の普及について表明してSNSやニュースで「ワーケーション」が話題になりました。環境省が推進している理由や導入メリット・デメリットを解説します。

レバテックキャリアは未経験でも転職できるのか?リアルな口コミで検証します

IT特化型転職エージェントの「レバテックキャリア 」は未経験でも転職することができるのか?について実際に利用した方のクチコミを元に調査しました。

レバテックキャリアの悪い評判は本当なのか?利用者から聞く実態と噂の真偽

【2020年10月更新】IT系の転職エージェントで有名な「レバテックキャリア」ですが、なぜ悪い評判や悪い口コミが多いのか?その理由について説明します。また、是非登録すべき他の転職エージェントもご紹介していますので、参考にしてみてください。

その会社は大丈夫?知っておきたいブラック企業の特徴

就職先がブラック企業ではないか不安… 転職を考えているけど、ブラックな会社だったらどうしよう… こういった悩みや不安を抱えている方も多くいると思います。 就職や転職をした際に「この会社、ブラックだった ...

【2020年最新保存版】副業と複業の違いやそれぞれの意味について徹底解説!

こんにちは、リバティエンジニア[?]のFUNAです。 現役エンジニアとしてアプリケーション開発やWeb制作、SEOやブログ運営をしています。 今、話題になっている「テレワーク」という働き方を利用して「 ...

Copyright© FUNA BLOG , 2020 All Rights Reserved.