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

こんにちは、リバティエンジニアのFUNA（フナ）です。

現役でフリーランスのエンジニアとしてアプリケーション開発やWeb制作、SEOやブログ運営をしています。

この記事はこんな方におすすめ

今回は、HTML/CSSでのページ内リンクの使い方をご紹介します。

ページ内リンクとは

ページ内リンクは、同じページ内の「特定部分」にジャンプ（遷移・移動）するリンクのことをいいます。

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

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

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

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

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

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

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

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

原因は多くの場合、CSSを使ったレイアウトに起因します。

一概には言えませんが、代表的な例が「marginとpadding」に依るものです。

ページ内リンクには、ブラウザのウィンドウの上枠に一致するようにジャンプします。

この問題を解決するのは、そもそも要素のレイアウトに影響してしまうためすこし厄介ですが、いくつか迂回策があります。

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

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

こうすることでページ内リンクがズレずに「正しい位置」にジャンプするようになります。

今回は、HTML/CSSのページ内でのジャンプのやり方をご紹介しました。

基本的な定義の仕方から、よくあるエラー時の改善方法なども載せています。

サンプルコードも記載したので、わかりやすくなっていると思います。

もし「わかりにくい！」などあったら教えてください♪

: 【CSS】たった1行のコピペで簡単！object fitで画像をトリミングする方法
CSSで画像をトリミングしたい時にたったの1行で実装できる方法を解説します。「object-fit」についてどのような時に使うのか、その使い方や応用の仕方を覚えてみてください。

: 【コピペOK】CSSでcounterを利用して自動ナンバリングする方法
今回はCSSの「counter」をコピペでも簡単に実装できる方法・ソースコードをご紹介します。このcounterを利用することで、CSSだけで自動でナンバリングを実装することができます。意外と知られていないのですが、「1 2 3 4」の基本のものや「第1章第2章第3章第4章」と書き出しをつけたりすることができて、幅広く応用できます。

: 【コピペOK】CSSだけで背景を斜めに区切る方法【レスポンシブ対応】
今回は、HTML/CSSで背景を斜めに区切ってデザインする方法を、コピペでも簡単に実装する方法を解説します。ランディングページやコーポレートサイトなどの作成時に背景を斜めに区切ってレイアウトされているサイトを良く見かけますが、実装の仕方は簡単なので、ぜひ覚えておきましょう。

: 【コピペでOK】HTMLで直接ファイルをダウンロードできるように設定する方法
今回は、HTMLでファイルのダウンロードを設定する方法について解説します。方法としては、aタグにdownload属性を入れるだけで、ファイルをダウンロードするリンクを作成することができます。ここでは、具体的な書き方と動作を確認していこうと思います。

: CSSアニメーションを簡単に実装！コピペOKのサンプルコード付き【HTML/CSS】
CSSのみで実装することのできるアニメーションの方法を解説します。サンプルコード付きでわかりやすく、コピペでも簡単に実装できるようになっていますので、実際に動かして試してみてください。