特定の場所に移動したい!HTMLでジャンプする方法【初心者向け】

初心者向けにHTMLで特定の場所にジャンプする方法について解説しています。別のページに移動したり、特定の場所に移動するなどサイトを作っていく中で役に立つ知識になるでしょう。実際にソースコードを書きながら説明しているので、ぜひご覧ください。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が1,000以上あります。

今回はHTMLでジャンプする方法を説明していきます。

別ページに飛んだり、ページ内にジャンプするなどサイト作成にいざという時に役立つでしょう。

HTMLについてそもそもよく分からないという方は、HTMLとは何なのか解説した記事をまずご覧ください。

 

なお本記事は、TechAcademyのWebデザインオンラインブートキャンプのカリキュラムをもとに執筆しています。

 

目次

 

他のページにジャンプする方法

他のページに飛ぶにはLinkを貼る必要があります。

Linkの貼り方は以下の通りです。

<a href="#">ここをクリックすると飛びます。</a>

上記のような記述で他ページへのジャンプが可能です。

「#」の部分に飛ぶ先のページを記述します。そのようにすることでジャンプを実現できます。

 

大石ゆかり

aタグ(アンカータグ)によって、別のページに移動できるんですね~。

田島悠介

そうだよ。自分のサイトの違うページや外部のサイトへ移動できるんだよ。また、そのページの特定の位置にも移動できるんだ。

大石ゆかり

同じページの中でも移動できるんですか?

田島悠介

出来るよ。では、実際に見てみよう!

 

[PR] HTML/CSSで挫折しない学習方法を動画で公開中

同一ページの特定の箇所にジャンプする方法

同一ページにジャンプする先を「アンカー」と言います。
アンカーの貼り方ですが、以下のようにします。

<a href="#link">ここをクリックすると飛びます</a>
<a name="link">ジャンプ先です。</a>

上記の書き方でページ内ジャンプが可能です。

アンカー元を「#アンカー名」で設定し、アンカー先を「アンカー名」を設定しましょう。

 

大石ゆかり

hrefは飛び先のURLですよね?#(シャープ)がついていてlinkって名前が書いてあるだけですね。

田島悠介

ほとんど全てのタグにname属性をつけることが出来るんだ。そのnameにつけた値を指しているんだよ。

大石ゆかり

同じページ内で移動しなきゃいけないなんてどんな時ですか?

田島悠介

内容が長いと、ページの長さも長くなるので、そういう時にページ内ジャンプがあると便利かな。

 

実際に書いてみよう

実際に書いてみてWebブラウザーでみてください。

今回は異なるページへのリンクがあるので、HTMLは2つ作成します。

HTML -sample.html-

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>sample</title>
  </head>
  <body>
    <h1>別pageジャンプ</h1>
    <p>
      <a href="sample2.html">sample2へ</a>
    </p>
 
    <h1>page内ジャンプ</h1>
    <p>
      <a href="#link">ここをクリックすると飛びます</a>
    </p>
    <p style="padding-top: 1000px">
      <a name="link">ジャンプ先です。</a>
    </p>
  </body>
</html>

HTML -sample2.html-

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>sample2</title>
  </head>
  <body>
    <h1>sample2のページです。</h1>
    <p>
      <a href="sample.html">戻る</a>
    </p>
  </body>
</html>

別ページへのジャンプ、また同一ページ内でのジャンプが分かったでしょうか。

同一ないページでは別ページに比べてわかりにくい記述方法ですので、しっかりと理解して書いていきましょう。

ラベルをつけている感覚でコーディングできると同一ページの記述は完璧です。アンカーはHTMLのみにとどまらず、レスポンシブデザインを作成する際にも多く出てきます。関連しているコンテンツであることを頭においておきましょう。

 

大石ゆかり

自分のサイトの違うページや外部のサイトに移動することが出来るようになりました♪ ただ、移動前に見ていたページが無くなっちゃいました。

田島悠介

外部サイトの場合は、新しいウィンドウかタブを開いて移動するようにしたほうがいいかもね。

大石ゆかり

そういうふうに出来るんですか?

田島悠介

target属性を設定してあげるんだよ。target属性に_blankという値を設定すると、新しいウィンドウやタブでを開いて移動させることが出来るよ。

 

[お知らせ]TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。