ページ内リンクとは
こんにちは、リバティエンジニア[?]のたくやです。 現役エンジニアとしてアプリケーション開発やWeb制作、SEOやブログ運営をしています。
以前、今見ているページではない「外部ページ」にジャンプする方法は学習しましたが、今日はHTML/CSSで同じページの別の場所にジャンプする方法を見ていきます。
HTMLでのページ内リンクの設定方法
ページ内リンクしたい先のタグに”id”を設定する
ページ内リンクにするものは、該当する HTML 要素の”id” 属性を使って設定していきます。
<!-- ページ内のリンク先の指定はIDを使って指定します -->
<h1 id="link-to-me">ここにジャンプします。</h1>“id” 属性の名前については、下記の３つのことに注意してください。
- ページ内でユニーク（唯一無二）な名前をアルファベットで付ける
- 数字で書き始めるのは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のページ内でのジャンプの仕方を一緒に見ていきました。
基本的な定義の仕方から、よくあるエラー時の改善方法なども載せており、サンプルコードも記載したので、わかりやすくなっていると思います。
もし「わかりにくい！」などあったら教えてください♪
なにか質問があればお問い合わせフォームでお気軽にお問合せください。
可能な限りすぐにお返事します。
一流プログラマを目指して頑張りましょう！
コメント