こんにちは、リバティエンジニアのFUNA(フナ)です。
現役でフリーランスのエンジニアとしてアプリケーション開発やWeb制作、SEOやブログ運営をしています。
この記事はこんな方におすすめ
- HTML/CSSでページ内リンクを実装したい
- ページ内リンクをコピペで実装したい
今回は、HTML/CSSでのページ内リンクの使い方をご紹介します。
目次
ページ内リンクとは
ページ内リンクは、同じページ内の「特定部分」にジャンプ(遷移・移動)するリンクのことをいいます。
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>
"id"の名前の冒頭に「#」を付けるのを忘れないようにして下さい。
"#"がない場合「 <現在のページの親ディレクトリ>/<指定したリンク> 」という相対パスとして認識されてしまうのです。
ページ内リンクのジャンプがズレてしまう場合
ページのレイアウトなどによっては、ページ内のリンクに移動した際に、表示する位置が若干ずれてしまうかもしれません。
原因は多くの場合、CSSを使ったレイアウトに起因します。
一概には言えませんが、代表的な例が「marginとpadding」に依るものです。
ページ内リンクには、ブラウザのウィンドウの上枠に一致するようにジャンプします。
この問題を解決するのは、そもそも要素のレイアウトに影響してしまうためすこし厄介ですが、いくつか迂回策があります。
おすすめの解決策としては、「ページ内リンク専用の要素を追加する」です。
対象となる要素をspan 要素で囲む
<!-- spanでテキストを囲む。span のピッタリ上にページ内リンクになる。 --> <h1> <span id="link-1">ここが本当のページ内リンク先です!</span> </h1>
こうすることでページ内リンクがズレずに「正しい位置」にジャンプするようになります。
【HTML/CSS】ページ内リンクまとめ
今回は、HTML/CSSのページ内でのジャンプのやり方をご紹介しました。
基本的な定義の仕方から、よくあるエラー時の改善方法なども載せています。
サンプルコードも記載したので、わかりやすくなっていると思います。
もし「わかりにくい!」などあったら教えてください♪
HTML/CSSカテゴリの関連記事
-
CSSアニメーションを簡単に実装!コピペOKのサンプルコード付き【HTML/CSS】
CSSのみで実装することのできるアニメーションの方法を解説します。サンプルコード付きでわかりやすく、コピペでも簡単に実装できるようになっていますので、実際に動かして試してみてください。
-
【HTML/CSS】z-indexで重なり順を指定。効かない時の対処法はコレ!
今回はHTML/CSSで要素の重なり順を指定する方法として、CSSプロパティz-indexについて初心者の方でも分かりやすく解説します。設定しても上手く効かない時の対処法も紹介しています。
-
【コピペOK】HTMLにCSSを埋め込み適用させるサンプルをご紹介
HTMLにCSSを埋め込み、適用させる方法についてサンプルコードを元にご紹介します。初心者の方でもわかりやすいようにコピペでも簡単に実装できるようにまとめていますので、どんどん使ってください。
-
【HTML/CSS】コピペでOK!チェックマークを作る簡単な方法
こんにちは、リバティエンジニア[?]のFUNA(フナ)です。 現役エンジニアとしてアプリケーション開発やWeb制作、SEOやブログ運営をしています。 この記事はこんな方におすすめ HTM ...
-
【2021年最新】HTML/CSSの学習で初心者におすすめしたい本【ベスト5!】
2021年最新版のHTML/CSSの勉強でおすすめの本を紹介します。「HTML/CSS」はとてもメジャーな言語であり、多くの入門書や参考書があります。その中でもおすすめな本を現役エンジニアの私が解説も入れてご紹介しています。