ホームページなどを制作している時に、ページ移動するためのリンクを設定することがあります。

様々な内容を、大きなセクションごとにページに分けられるので、ユーザーに見やすいホームページ作りに欠かせない技術です。

しかし、初心者の場合、「ページ移動するためのリンクってどうやって設定するの？」と疑問に思う方も多いでしょう。

そこで今回は、別ページに移動するためのリンクの指定方法について解説します。

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

ページ移動にアニメーションをつける方法も紹介します。

ユーザーの離脱率を防ぐことにも繋がる技術ですので、初心者の方もぜひチャレンジしてみてくださいね。

HTMLでページ移動する方法

今いるHTMLページから、別のHTMLページに移動するには、主に以下のような指定方法があります。

では、それぞれの方法について詳しく見ていきましょう。

1.aタグを使用する方法

aタグは、リンクを指定する上で最も一般的な指定方法です。

以下のように、aタグのhref属性に相対パスや絶対パスを指定することで、他ページへのリンクを設定することができます。

<!-- 絶対パスでの指定 -->
<a href="https://ドメイン名/">ここをクリックすると別のサイトにジャンプします</a>
   
<!-- 相対パスでの指定 -->
<a href="階層/ドメイン名/フォルダ名/ファイル名">ここをクリックすると別のHTMLページにジャンプします</a>

ただし、次ページに進むためのボタンや、お問い合わせ情報を入力して送信するボタンなどのフォームボタンには利用できないので、注意しましょう。

2.buttonタグを使用する方法

buttonは、その名の通り「ボタン」として使用することができるタグです。

他のページに移動する場合には、以下のようにJavaScriptを利用します。

<!-- HTMLコード -->
<button onclick="location.href='sample.html'">ここをクリックするとsample.htmlページに移動します</button>

フォームを送信することができるので、お問い合わせフォームの送信ボタンとしても使用することができます。

また、カスタマイズしやすいというメリットがあるため、ボタンクリック時にJavaScriptを動かしたいという場合には、buttonタグがおすすめです。

3.inputタグを使用する方法

inputは、主にお問合せフォームなどの入力欄として使用されているタグです。

以下のように、「input type=”button”」を指定することで、他のページに移動できるボタンとしても機能します。

<!-- HTMLコード -->
<input type="button" onclick="location.href='sample.html'" value="ここをクリックするとsample.htmlページに移動します">

上記のように「type」属性に指定する値によって、様々な役割を担います。

button以外にも、単一行テキストの入力欄を設定する「text」や、チェックボックスを設定する「checkbox」などがあります。

実際にページ移動できるコードを書いてみよう！

では実際に、今いるHTMLページから別のHTMLページに移動するコードを書いていきましょう！

今回は、aタグを使用した3つのパターン別の方法を解説します。

別のHTMLページに移動する方法

今いるHTMLページから、別のページに移動したい場合には、aタグに以下のどちらかの指定を行います。

<!-- 絶対パスでの指定 -->
<a href="https://web-camp.io/magazine/">絶対パスを指定してWEBCAMP MEDIAに移動する</a>

<!-- 相対パスでの指定 -->
<a href="sample.html">相対パスを指定してsmaple.htmlページに移動する</a>

簡単に説明すると、前者の「絶対パス」はWebサイトのURLで、後者の「相対パス」はHTMLファイルが保管されている場所までの地図です。

パスについてもっと詳しく知りたい方は、以下の記事が参考になりますよ。

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

同一ページ内の特定場所に移動する方法

同ページ内の特定場所に移動したい場合には「アンカータグ」を使用して、以下のような指定を行います。

<!-- index.html（トップページ）内 -->
<!-- ページのID名aboutに移動する -->
<a href="sample.html#about">私たちについてもっと詳しく知りたい</a>

<div id="about">
  <h1>私たちについて</h1>
  <!-- コンテンツの中身 -->
</div>

アンカータグについては、こちらの記事で詳しく解説しています。

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

別ページ内の特定場所に移動する方法

別ページ内の特定場所に移動するには、移動したいサイトやページのパスを指定し、特定場所のアンカータグを指定します。

<!-- sample.htmlページ内 -->
<div id="about">
  <h1>私たちについて</h1>
  <!-- コンテンツの中身 -->
</div>

<!-- index.html（トップページ）内 -->
<!-- sample.htmlページのID名aboutに移動する -->
<a href="sample.html#about">私たちについてもっと詳しく知りたい</a>

ページ移動なし！タブで画面を切り替える方法も

「ページ移動の必要はないけど、一部の画面表示は変えたい」

といった場合には、タブで画面を切り替え表示する方法が利用できます。

同ページ内にタブを設定することで、別のサイトやページに移動せずに、画面を切り替えることが可能です。

タブの設定は、「CSSのみ」「iframeを使用する」「JavaScriptを使用する」3つの方法があります。

最もシンプルで簡単なのは「CSSのみで実装する」方法です。

<!-- HTMLコード -->
<div class="tabs">
    <input id="tab_1" type="radio" name="tab_item" checked>
    <label class="tab_item" for="tab_1">タブ1</label>
    <input id="tab_2" type="radio" name="tab_item">
    <label class="tab_item" for="tab_2">タブ2</label>
    <input id="tab_3" type="radio" name="tab_item">
    <label class="tab_item" for="tab_3">タブ3</label>
    <div class="tab_content" id="tab_1_content">
        タブ1の内容がここに入ります
    </div>
    <div class="tab_content" id="tab_2_content">
        タブ2の内容がここに入ります
</div>
    <div class="tab_content" id="tab_3_content">
        タブ3の内容がここに入ります
</div>

/* CSSコード */
/*タブ切り替え全体のスタイル*/
.tabs {
  margin-top: 50px;
  padding-bottom: 40px;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  width: 700px;
  margin: 0 auto;
}

/*タブのスタイル*/
.tab_item {
  width: calc(100%/3);
  height: 50px;
  background-color: #d9d9d9;
  line-height: 50px;
  font-size: 16px;
  text-align: center;
  color: #565656;
  display: block;
  float: left;
  text-align: center;
  font-weight: bold;
  transition: all 0.2s ease;
}
.tab_item:hover {
  opacity: 0.75;
}

/*ラジオボタンを全て消す*/
input[name="tab_item"] {
  display: none;
}

/*タブ切り替えの中身のスタイル*/
.tab_content {
  display: none;
  padding: 40px 40px 0;
  clear: both;
  overflow: hidden;
}


/*選択されているタブのコンテンツのみを表示*/
#tab_1:checked ~ #tab_1_content,
#tab_2:checked ~ #tab_2_content,
#tab_3:checked ~ #tab_3_content {
  display: block;
}

/*選択されているタブのスタイルを変える*/
.tabs input:checked + .tab_item {
  background-color: #eed603;
  color: #fff;
}

HTMLのiframeタグを使用する方法について知りたい方は、以下の記事が参考になりますよ。

CSSでiframe要素をカスタマイズするには？親ページから上書きする方法も解説

ページ移動に使えるおすすめアニメーション2選

別ページに移動する際、ユーザーが飽きないようにアニメーションをつけておくのもおすすめです。

今回は、初心者でもコピペで使いやすい、簡単なアニメーションを2つ紹介します。

フェード

ページ移動の際に何かアニメーションをつけたいけど、派手な演出はいらない！という方におすすめ。

シンプルなアニメーションなので、様々なWebサイトに使用することができます。

<!-- HTMLコード -->
<!-- index.htmlページ内 -->

<div class="top_wrap">
  <a href="sample.html">SAMPLEページに移動する</a>
</div>

<!-- HTMLコード -->
<!-- sample.htmlページ内 -->

<div class="wrap">
    <div class="bg">SAMPLEページをフェードアニメーションで表示しています</div>
</div>

/* CSSコード */
.wrap {
  animation: fadein 3s forwards;
}

@keyframes fadein {
  0% {opacity: 0}
  100% {opacity: 1}
}

5.円のローディング

https://baigie.me/officialblog/2021/02/25/css-tips-1/

目にする機会が多いアニメーションです。

小さな円の色を変えることも可能なので、自分好みの色合いにアレンジすることもできますよ。

今回は、ローディングアイコンのみコード例を記述します。

 <!-- HTMLコード -->
<body>
  <i class="loading-icon"></i>
</body>

/* CSSコード */
body {
  display: flex;
  height: 100vh;
  justify-content: center;
  align-items: center;
  margin: 0;
}

.loading-icon {
  box-sizing: border-box;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  box-shadow:
    0 -30px 0 #e0eef0,     /*  上  */
    21px -21px 0 #d0eff3,  /* 右上 */
    30px 0 0 #bfecf1,      /*  右  */
    21px 21px 0 #AEEBF2,   /* 右下 */
    0 30px 0 #79C7D9,      /*  下  */
    -21px 21px 0 #5EA4BF,  /* 左下 */
    -30px 0 0 #5697BF,     /*  左  */
    -21px -21px 0 #265C8C; /* 左上 */
  animation: rotate 1s steps(8) 0s infinite;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

別ページ・ページ内移動は初心者でも簡単！アニメーションで他サイトに差を付けよう！

今回は、別ページやページ内移動を設定する方法を解説しました。

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

参考ページのリンクや、メニューバーの項目への移動など、ページの移動設定は必ずと言って良いほど必要な技術です。

適切なHTMLコードを記述し、アニメーションをつけて、ユーザーがストレスなくページ移動できるように工夫しましょう！

---

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

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

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

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

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

＼プログラミングスクールを比較／