HTML/CSS

【HTML/CSS】 ページ内をジャンプする方法!サイト内リンクの貼り方【コピペOK】

こんにちは、リバティエンジニアの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」はとてもメジャーな言語であり、多くの入門書や参考書があります。その中でもおすすめな本を現役エンジニアの私が解説も入れてご紹介しています。

 

 

Kindle Unlimitedで無料で本が読める

 

Kindle Unlimitedを無料で試す

 

なら最初の30日間は無料でコーディング・デザイン・ブログ・英語・Youtubeの参考書・キャリア・副業・マーケティング・漫画・美容知識・雑誌などが読み放題です。

人気の本もあるので是非お試ししてみてください!30日以内に解約すればお金は全くかかりません。

 


最近の投稿

【今すぐ行動しよう】フリーランスエンジニアとブログの相性は抜群!

フリーランスエンジニアがスキルや経験から得たビジネスノウハウを共有する手段として「ブログ」は非常におすすめです。自身のスキルや知識のアウトプットや、実際に自分が経験したことを共有して同じような境遇の人の手助けになるような情報を公開することで自分に帰ってくるメリットは非常に多いです。今回はそのあたりについて紹介していきます。

【経験談】フリーランスのエンジニアは本当に大変なの?安定のコツやポイント

フリーランスのエンジニアは「大変だからやめとけ」という話をよく聞くので、そのことについて現役でフリーランスエンジニアとして生活している私が、その話の実態を解説しようと思います。フリーランスエンジニアの大変なところはもちろんありますが、それ以上にメリットが多いので私個人的には非常におすすめしています。

【幸福度UP】フリーランスエンジニアの「田舎暮らし」実現できます

フリーランスエンジニアとして田舎で暮らす人が増えてるって聞くけど、本当なのかな?どうやったら実現できるのか?今回はフリーランスエンジニアとして田舎で生活をしたいという方向けに、実現可能なのか、実現するにはどうすれば良いのかをご紹介します。

【単価交渉で収入アップ】フリーランスが単価交渉を成功させる4つのポイント

フリーランスが収入をアップさせるための重要な手段のひとつに「単価交渉」があります。今回は、現役でフリーランスとしてエンジニアをしている私が実践して効果のあった単価交渉の方法やコツをご紹介します。

【 今なら無料!】タスク管理ツール「Backlog」を無料で使う方法と手順

今回は、普段のタスク管理からプロジェクトの管理まで幅広く使えるツール「Backlog」を無料で使うための方法とその手段を画像つきで紹介しました。もし気に入らなければ、期間内に解約してしまえば費用はかかりません。また、以外と知られていない「フリープラン」も紹介しているので、是非参考にしてみてください。

Copyright© FUNA BLOG , 2021 All Rights Reserved.