バナー画像

Webサイト作成時やブログ作成時、サイトの途中からページ一番下に設置した応募フォームにジャンプさせるなどの「ページ内リンク」と呼ばれる処理は頻繁に利用されます。

本記事では、HTMLにおける「ページ内リンク」の役割や作成方法についてご紹介していきたいと思います。

HTMLのページ内リンクとは


HTMLのページ内リンクとは、テキストや画像をクリックした際に、ページ内の指定した場所にジャンプ(遷移)させる処理のことを指します。

ページ内リンクの役割

ページ内リンクは、主に2つの役割を果たすために設定されます。

ユーザーの操作性向上

ページ内リンクを設定することで、ユーザビリティをサポートし、操作性を向上させることが可能です。

うまく自社製品などに誘導することで、商品のコンバージョン率が高くなることも期待出来ます。

一方で、ページ内リンクを乱用することで、ユーザーの操作性を損なう恐れもありますので、注意が必要です。

SEO対策

ページ内リンクはSEO対策としても利用される機能です。

同一サイトの関連性の高いサイトにページ内リンクを貼っておくことで、Googleのクローラーがサイト内巡回をしやすくなります。

ユーザーが巡回しやすいように関連性の高いページ内リンクを貼ることで、クローラーに対しても効果的なリンクとなり、SEO的にも評価が高まると言われています。

HTMLのページ内リンク作成方法


HTMLのページ内リンクは「a(アンカー)タグ」を利用して実現可能です。

ジャンプ元のa(アンカー)タグを作成

まずクリックした際に、特定の場所へジャンプする元となるテキストや画像を「a(アンカー)タグ」で作成します。

<a href="#sample">id="sample"が指定された場所へジャンプ</a>

href属性に指定されたidの場所へジャンプすることが可能です。

ジャンプ先の指定方法

ジャンプ先の指定方法はid属性に、アンカータグで設定したid名を設定するだけです。

<div id="sample">アンカータグからここまでジャンプします。</div>

サンプルではdivタグをジャンプ先に指定していますが、様々なタグに置き換えることが可能です。

HTMLのページ内リンクをサンプルコードで確認しよう


HTMLのページ内リンクをいくつかサンプルコードでご紹介していきたいと思います。

テキストを起点としたページ内リンク

まずはテキストを起点としたシンプルなページ内リンクを確認してみましょう。

index.html

<!doctype html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Page Link Sample</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>内部リンクのサンプル</h1>
  <a href="#sample">ここからジャンプします。</a>

  <h2>ここにはジャンプしません</h2>

  <p>コンテンツ内容</p>

  <h2>ここにもジャンプしません</h2>

  <p>コンテンツ内容</p>

  <h2 id="sample">ここにジャンプします</h2>

  <p>コンテンツ内容</p>
</body>
</html>

style.css

p {
  height: 500px;
}

CSSに記載した内容は、ページ内リンクが機能していることを確認するために、段落のサイズを大きく確保するためだけで特に意味はありません。

Webブラウザ上で実行した結果が下記のGifです。

画像を起点としたページ内リンク

次に起点となるテキストを画像に置き換えて実行してみましょう。

やり方は全く同じで、テキストを入力していた箇所にimgタグで画像を挿入すればリンクとして機能します。

index.html

<!doctype html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Page Link Sample</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>内部リンクのサンプル</h1>
  <div>画像をクリックすると指定した見出しまでジャンプします。</div>
  <a href="#sample"><img src="img/sample1.jpg"></a>

  <h2>ここにはジャンプしません</h2>

  <p>コンテンツ内容</p>

  <h2>ここにもジャンプしません</h2>

  <p>コンテンツ内容</p>

  <h2 id="sample">ここにジャンプします</h2>

  <p>コンテンツ内容</p>
</body>
</html>
ポテパンダの一言メモ

CSSに関しては全てのサンプルで同じファイルを利用しますので、割愛します。

Webブラウザで表示した結果が下記のGifです。

同一サイト内の他ページ指定箇所へジャンプ

同一記事内容でジャンプるする以外にも、同一サイトの他ページに遷移させるのも内部リンクの1つです。

サンプルでは、内部リンクの更に指定した見出しへジャンプさせてみようと思います。

記述方法としては、hrefに遷移先ページのURLを指定した後ろに「#id」でジャンプさせたい要素を指定する形になります。

<a href="URL#id"></a>

index.html

<!doctype html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Page Link Sample</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>内部リンクのサンプル</h1>
  <a href="sample.html#sample">ここからジャンプします。</a>

  <h2>同じページの見出しです。</h2>

  <p>コンテンツ内容</p>

  <h2 id="sample">同じページのidにはジャンプしません。</h2>

  <p>コンテンツ内容</p>
</body>
</html>

sample.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>遷移先html</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>遷移先のhtmlです。</h1>

  <h2>ここにはジャンプしません</h2>

  <p>コンテンツ内容</p>

  <h2>ここにもジャンプしません</h2>

  <p>コンテンツ内容</p>

  <h2 id="sample">ここにジャンプします</h2>

  <p>コンテンツ内容</p>
</body>
</html>

index.htmlにも同名のid属性「sample」を記述していますが、アンカータグで指定した通り、sample.htmlのid属性sampleにジャンプしていることをご確認頂けます。

さいごに:HTMLのページ内リンクを活用してユーザーフレンドリーなサイト作成を心掛けよう


本記事では、HTMLでページ内リンクの作成方法をご紹介してきました。

ページ内リンクは簡単に実装出来る上に、非常に使い勝手の良い機能となります。

「ページ先頭へ戻る」などの良く見かける機能も、今回紹介した内容で実装可能ですので、ぜひWebサイト作成・ブログ作成時に活用してみてください。

エンジニアになりたい人に選ばれるプログラミングスクール「ポテパンキャンプ 」

ポテパンキャンプは卒業生の多くがWebエンジニアとして活躍している実践型プログラミングスクールです。 1000名以上が受講しており、その多くが上場企業、ベンチャー企業のWebエンジニアとして活躍しています。

基礎的な学習だけで満足せず、実際にプログラミングを覚えて実践で使えるレベルまで学習したいという方に人気です。 プログラミングを学習し実践で使うには様々な要素が必要です。

それがマルっと詰まっているポテパンキャンプでプログラミングを学習してみませんか?

卒業生の多くがWebエンジニアとして活躍

卒業生の多くがWeb企業で活躍しております。
実践的なカリキュラムをこなしているからこそ現場でも戦力となっております。
活躍する卒業生のインタビューもございますので是非御覧ください。

経験豊富なエンジニア陣が直接指導

実践的なカリキュラムと経験豊富なエンジニアが直接指導にあたります。
有名企業のエンジニアも多数在籍し品質高いWebアプリケーションを作れるようサポートします。

満足度高くコスパの高いプログラミングスクール「ポテパンキャンプ」

運営する株式会社ポテパンは10,000人以上のエンジニアのキャリアサポートを行ってきております。
そのノウハウを活かして実践的なカリキュラムを随時アップデートしております。

代表の宮崎もプログラミングを覚えサイトを作りポテパンを創業しました。
本気でプログラミングを身につけたいという方にコスパ良く受講していただきたいと思っておりますので、気になる方はぜひスクール詳細をのぞいてくださいませ。