【HTML初心者】他ページやページ内の特定の場所にジャンプする方法を徹底解説！

公開日: 2021.12.18
更新日: 2024.01.16
他ページやページ内の特定の場所にジャンプする方法を徹底解説

プログラミング学習やWeb制作をしている時に、

「HTMLページから他のページにジャンプ（リンク）させたい」

「ページ内のお問合せに一気にジャンプ（リンク）できるボタンを作りたい」

と思ったことはありませんか？

他のページにジャンプできる指定は、ホームページ制作などにおいて欠かせません。

そこで今回は、HTMLページから特定の場所にジャンプできる指定方法を解説します。

この記事を読んでわかる内容は、以下の通りです。

  • 今いるページから他のページにジャンプさせる方法
  • 今いるページ内の特定場所にジャンプさせる方法
  • アンカーリンクの使い方と指定例

他ページへのジャンプ方法だけでなく、同ページ内の特定場所へのジャンプ方法も解説しますので、ぜひ最後まで見てくださいね。

特定のページや場所にジャンプ（リンク）する方法

今いるHTMLページから、他のページや、同ページ内の特定の場所に飛ぶことを「ジャンプする」または「リンクする」と呼びます。

主に、ジャンプ先のURLを張り付けたテキストや、画像などを使用し、ユーザーがジャンプできるように誘導しています。

HTMLページのジャンプは、以下のようにaタグを使用するで可能になります。

<a href="#">ここをクリックすると「○○ページ」に飛びます。</a>

上記のaタグは、デフォルトでは、以下のようにブラウザ上に表示されます。

では、HTMLジャンプの種類ごとに、より詳しい指定方法を見ていきましょう。

HTMLのジャンプ（リンク）の種類

HTMLページのジャンプには、以下の2種類があります。

  1. 他ページへジャンプする方法
  2. ページ内へジャンプする方法

1.他ページへジャンプする方法

今いるHTMLページから他のページにジャンプするには、以下2つどちらかのパスをaタグに指定します。

  • 相対パス
  • 絶対パス

相対パスと絶対パスについては、以下の記事で詳しく解説しています。

【HTML初心者】画像が表示されないのはパスが原因だった！？絶対パスと相対パスを徹底解説

他のページには、「自分で制作した別のHTMLページ」と「第三者が制作したすでにブラウザ上にあるHTMLページ」の2種類があります。

ホームページなどのメニューバーテキストに設置するのは前者がほとんどで、ディレクトリの階層を示す「相対パス」で指定することができます。

<a href="about.html">私たちについて</a>

ブログなどで参考になる記事や文献などを紹介する場合には、後者がジャンプ先として設定されていること多く、URLの指定は「絶対パス」で行うことができます。

<a href="https://smaple.com">SAMPLEページへジャンプする</a>

1ページでは収まりきらない内容や、項目ごとにページを分けることでWebサイトのユーザビリティが向上します。

ユーザーが求めている情報にすぐに飛ぶことができる「他ページへのジャンプ」機能は、Webサイト制作に欠かせない機能です。

2.ページ内へジャンプする方法

今いるページから、同ページ内の特定の場所にジャンプすることも可能です。

ページ内のメニューバーなどからジャンプする設定をすることで、ユーザーが行きたいカ所にすぐに飛ぶことができます。

特に、長いランディングページなどに効果的です。

「全て見るのは面倒だけど、気になるカ所だけチェックしたい」

というユーザーのニーズにこたえられるので、直帰率や平均セッション時間などの改善などに繋がります。

ページ内のジャンプ先の指定方法については、後ほど詳しく解説します。

実際に様々なHTMLページへのジャンプ（リンク）を書いてみよう！

今いるHTMLページから「他ページへジャンプする方法」と「ページ内の特定カ所にジャンプする方法」について、それぞれ詳しく解説していきます。

ここで解説する内容は、以下の通りです。

  • 今いるHTMLページから他ページへジャンプ（リンク）する方法
  • 特定の場所にジャンプ（リンク）する方法
  • ページ内ジャンプ（リンク）にスクロールアニメーションをつける方法
  • 他ページにジャンプ（リンク）するボタンを作る方法

ジャンプ先の指定方法だけでなく、ページ内のジャンプ機能を使用したスクロールアニメーションや、クリックするだけでジャンプできるボタンの作り方なども紹介します。

今いるHTMLページから他ページへジャンプ（リンク）する方法

aタグに相対パスを指定して、今いるHTMLページ（index.html）から「sample.html」ページにジャンプする指定を行います。

<a href="sample.html">サンプルページはこちら</a>

aタグに絶対パスを指定して、WEBCAMP MEDIAのトップページにジャンプする指定を行います。

<a href="https://web-camp.io/magazine/">WEBCAMP MEDIA</a>

メニューバーを作成して、ディレクトリ内にある各ページにジャンプできるように指定する方法も紹介します。

<ul>
  <li><a href="home.html">ホーム</a></li>
  <li><a href="about.html">私たちについて</a></li>
  <li><a href="work.html">事業紹介</a></li>
  <li><a href="contact.html">お問い合わせはこちら</a></li>
</ul>

上記の場合は、aタグで指定している「○○.html」形式のHTMLファイルを作成している必要があります。

特定の場所にジャンプ（リンク）する方法

HTMLページ内の特定の場所にジャンプする場合には、「アンカータグ」を使用します。

アンカータグは、「#○○」という形式でaタグに指定し、「○○」にはジャンプしたいid名を記入します。

<ul>
  <li><a href="#top">トップ</a></li>
  <li><a href="#about">私たちについて</a></li>
  <li><a href="#work">事業紹介</a></li>
  <li><a href="#contact">お問い合わせはこちら</a></li>
</ul>

<div id="top">
  <h1>ページTOP</h1>
  <p>ファーストビューや、Webサイトのタイトルなどを表示するコンテンツ</p>
</div>

<div id="about">
  <h2>私たちについて</h2>
  <p>私たちは、こんなことをやっている会社です。</p>
</div>

<div id="work">
  <h2>事業紹介</h2>
  <ul>
    <li>事業内容1</li>
    <p>事業1では、こんなことを行っています。</p>
    <li>事業内容2</li>
    <p>事業2では、こんなことを行っています。</p>
    <li>事業内容3</li>
    <p>事業3では、こんなことを行っています。</p>
    <li>事業内容4</li>
    <p>事業4では、こんなことを行っています。</p>
  </ul>
</div>

 <div id="contact">
   <h2>お問い合わせフォーム</h2>
  <form>
    <div class="form">
      <label for="name">お名前: </label>
      <input type="text" name="name" id="name" required>
    </div>
    <div class="form">
      <label for="email">メールアドレス: </label>
      <input type="email" name="email" id="email" required>
    </div>
    <div class="form">
      <input type="submit" value="送信ボタン">
    </div>
  </form>
</div>

アンカータグと、ジャンプ先のid指定はセットで使用しなければ機能しないため、注意しましょう。

アンカータグとは？

アンカータグは、「アンカー（Anchor）=錨」という意味。

Webサイトにおいては、リンク可能な特定の目印や、ポイントという意味で使用されます。

アンカータグは、ジャンプしたいカ所のaタグに「#」を先頭につけ、名前をつけることで使用できるようになります。

同ページ内へのジャンプ以外にも、以下のように他ページのアンカータグにジャンプする指定もすることが可能です。

<ul>
      <li><a href="about.html#about">私たちについて</a></li>
      <li><a href="work.html#work">事業紹介</a></li>
      <li><a href="contact.html#contact">お問い合わせはこちら</a></li>
    </ul>

ページ内ジャンプ（リンク）にスクロールアニメーションつけてみよう！

アンカータグの使い方を理解できたところで、ページ内のスクロールアニメーションに挑戦してみましょう！

JavaScriptを使用する方法もありますが、今回は、最も簡単に実装できるjQueryを活用します。

<!DOCTYPE html>
<html lang="ja">
<!-- HTMLコード -->

<head>
  <!-- jQuery.jsの読み込み -->
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <style>
    .section {
      margin-bottom: 300px;
    }
  </style>
</head>

<script>
  $(function () {
    // #で始まるアンカーをクリックした場合に処理
    $('a[href^="#"]').click(function () {
      // スクロールの速度
      var speed = 400; // ミリ秒
      // アンカーの値取得
      var href = $(this).attr("href");
      // 移動先を取得
      var target = $(href == "#" || href == "" ? 'html' : href);
      // 移動先を数値で取得
      var position = target.offset().top;
      // スムーススクロール
      $('body,html').animate({ scrollTop: position }, speed, 'swing');
      return false;
    });
  });
</script>

<body>
  <ul class="nav">
    <li><a href="#top">トップ</a></li>
    <li><a href="#about">私たちについて</a></li>
    <li><a href="#work">事業紹介</a></li>
    <li><a href="#contact">お問い合わせはこちら</a></li>
  </ul>

  <div id="top" class="section">
    <h1>ページTOP</h1>
    <p>ファーストビューや、Webサイトのタイトルなどを表示するコンテンツ</p>
  </div>

  <div id="about" class="section">
    <h2>私たちについて</h2>
    <p>私たちは、こんなことをやっている会社です。</p>
  </div>

  <div id="work" class="section">
    <h2>事業紹介</h2>
    <ul>
      <li>事業内容1</li>
      <p>事業1では、こんなことを行っています。</p>
      <li>事業内容2</li>
      <p>事業2では、こんなことを行っています。</p>
      <li>事業内容3</li>
      <p>事業3では、こんなことを行っています。</p>
      <li>事業内容4</li>
      <p>事業4では、こんなことを行っています。</p>
    </ul>
  </div>

  <div id="contact" class="section">
    <h2>お問い合わせフォーム</h2>
    <form>
      <div class="form">
        <label for="name">お名前: </label>
        <input type="text" name="name" id="name" required>
      </div>
      <div class="form">
        <label for="email">メールアドレス: </label>
        <input type="email" name="email" id="email" required>
      </div>
      <div class="form">
        <input type="submit" value="送信ボタン">
      </div>
    </form>
  </div>
</body>
</html>

HTMLページに適切にジャンプさせてユーザビリティを高めよう！

今回は、今いるHTMLページから他ページ・特定の場所にジャンプする方法を解説しました。

以下は、この記事のまとめです。

  • ジャンプ機能の指定はaタグで行う
  • 他のページへのジャンプは「相対パス」か「絶対パス」で指定する
  • 同ページ内の特定場所へのジャンプは「アンカータグ」とid属性を使用する

HTMLページにジャンプ機能を指定する方法は、基本中の基本です。

ユーザーがすぐに見たいページや場所にジャンプできるように設定することで、ユーザビリティを高めることができますよ。

プログラミングやパソコンを使って働きたい！

そのように考え、成長しているIT業界への転職を考えている方も増えてきました。

『IT業界に興味はあるけど、よくわからない…』
『パソコンとかそもそも苦手なのに私なんかにできるのかな』
『エンジニアって聞くけど難しそう』

反対にこのような声も聞く事があります。

そう考えている方は、一度ぜひ転職に成功したエンジニアの方のインタビューをご覧ください！

＼プログラミングを学んで／
人生を変えた3名

インタビュー記事一覧 ＞

関連記事

  • マインドマップ

    プログラミング学習のやる気が沸いてくる映画を紹介！

    公開日: 2019.02.18
    更新日: 2024.01.03
  • CSSでテキストを折り返しさせるには?

    CSSでテキストを折り返しさせるには？word-breakとoverflow-wrapの違いについて解説

    公開日: 2021.11.10
    更新日: 2024.01.03
  • プログラミングを独学で勉強して稼げるようになる方法を6つのステップに分けて解説！

    プログラミングを独学で勉強して稼げるようになる方法を6つのステップに分けて解説！

    公開日: 2020.11.24
    更新日: 2024.01.29
  • input要素をカスタマイズするには

    【CSS】input要素をカスタマイズするには？type属性ごとのサンプルコードも紹介

    公開日: 2022.01.31
    更新日: 2024.01.04

    • 新着記事

    資料請求

    • 短期集中で最速エンジニア転職を実現-転職成功者インタビュー一覧

      DMM WEBCAMPでは転職成功率98％を実現しています。本資料では、元警察官や元ラーメン屋など様々なバックグラウンドを持つ卒業生の声をお届けします。

      資料をダウンロードする
    • IT技術がもたらす3つの変化と身につけるべきスキル

      IT技術の発展により、今後10~20年程度で47％の仕事がなくなると言われています。どのような変化が訪れ、私達はどのようなスキルを身につけるべきかを解説します。

      資料をダウンロードする
    • 未経験がフリーランスエンジニアになる方法-年収アップで自由な働き方を手に入れる

      働き方改革やリモートワークの影響でフリーランスという働き方の人気は高まりつつあります。フリーランスエンジニアとして活躍するために必要な情報をお届けします。

      資料をダウンロードする

    資料請求一覧はこちら

    サービス紹介

    © 2024 WEBCAMP MEDIA Powered by AFFINGER5