「文章をクリックしたら、指定の場所へジャンプさせたい」
この記事では文章から見出しや文章へジャンプさせる、HTMLの書き方ご紹介します。
誰でも簡単にできるよう、例や詳しい解説を載せています。
HTMLをあまり触ったことがない方でも簡単に行えるので、ぜひ試してみてくださいね。
指定の文章からページ内の別の場所に移動させる│HTMLの書き方
同じページ内の指定の場所に、リンクを張るハイパーリンクの設置方法をご紹介します。
以下の2つに分けて解説していきます。
【ハイパーリンクの設置方法】
- リンクを飛ばす文章│HTMLの書き方
- リンクを飛ばす先の見出しや文章│HTMLの書き方
WordPressの場合、編集画面の右上にある「テキスト」モードを選択して、HTMLの編集を行ってください。
ビジュアルモードで編集した場合、HTMLが正しく反映されませんので、ご注意ください。
１．リンクを飛ばす文章│HTMLの書き方
HTMLの書き方をご紹介します。
<p><a href="#a1">ここからリンクを飛ばす</a></p>詳しい書き方も見ていきましょう。
まずは、リンクを飛ばす文章を<a></a>で囲みます。
次に、<a>タグ内に、href=""と記載してください。記号は全て半角にする点に注意です。
ダブルコーテーション「” ”」のなかにパウンド記号「＃」を加え、その後に好きな識別子を付けます。
この時に、数字のみの識別子を付けることはおすすめしません。見出しと混合され、正しく機能しないケースがあるためです。
識別子はローマ字、または数字＋ローマ字がおすすめ
数字を用いる時は、ローマ字と併せて使用するようにしてください。
【識別子の例】
#a1
#a2
#about
#menbers２．リンクを飛ばす先の見出しや文章│HTMLの書き方
リンクを飛ばす先の見出しや文章にも、HTMLを書きます。
※見出しだけでなく、文章にもリンクを飛ばすことが可能です。
それでは、HTMLの書き方を見ていきましょう。
見出しにハイパーリンクを飛ばす場合
まずは、見出しにリンク先を設置する方法をご紹介します。
リンクのHTMLを見ると、このような書き方になっているはずです。
<h2>ここは見出しです</h2>ここから、下記のHTMLに書き加えます。
<h2 id="ここに#以降の識別子を記入">ここは見出しです。</h2>＃以降の識別子をダブルコーテーション「””」の中に入力すればOKです。
リンクを飛ばす先のHTMLに「＃」は記載しない点に注意してください。
文章にハイパーリンクを飛ばす場合
リンク先を特定の文章に飛ばす方法をご紹介します。
一般的に文章は<p></p>というHTMLで囲まれています。
こちらの先頭の<p>タグに続けて、リンクを飛ばすHTMLを追加すればOKです。
HTMLの書き方はこちらです。
<p id="ここに設定した#以降の識別子を記入">ここは文章です。</p>見出しと同じく、＃以降の識別子をダブルコーテーション「””」の中に入力すればOKです。
リンクを飛ばす見出しや文章には、「＃」が記載されていない点に注意してください。
ハイパーリンクの分かりやすい具体例
実際に、ハイパーリンクが正しく機能している例も見ていきましょう。
<p><a href="#a1">ここをクリックすると・・・</a></p>ここにジャンプする！YEAH！
<p id="a1">ここにジャンプする！YEAH！</p>リンクが飛んだことを確認できたでしょうか。
実際のHTMLの書き方も載せていますので、併せてご確認ください。
トップページへ戻るハイパーリンク│HTMLの書き方
トップページに戻るハイパーリンクのHTMLの書き方も確認しておきましょう。
HTMLの書き方は、href属性にパウンド記号「#」をつけるか、もしくは「#top」と書けばOKです。
- # をつける
- #top をつける
実際のHTMLの書き方はこちらです。
<p><a herf="#">トップへ戻る</a></p>または
<p><a href="#top">トップへ戻る</a></p>実際にHTMLの編集画面で設置した先頭へ戻るボタンをクリックしてみてください。
ページがトップページへジャンプしたのが分かりますね。
この際に、移動した先のURLの語尾に#topまたは＃が追加されている点にも注意してください。
文章にURLのリンクを張り付ける│HTMLの書き方
文章にリンクを張り付けて、リンク先へジャンプするHTMLの書き方もご紹介します。
移動するためのリンクを付ける場合は、アンカー要素と呼ばれる<a></a>で文章を囲みます。
今回は、こちらのAcademiiyのトップページへ移動するケースを見ていきましょう。
<p><a href="https://academiiy.com">リンクを飛ばす文章</a></p>上記の書き方の場合、開いているのと同じタブでページが開かれます。
新しいタブでページを開く場合は、次の方法をご覧ください。
新規タブ(別のページ)でリンクを開くHTMLの書き方
新規タブでリンクを新たに開く場合は、先ほどのHTMLの書き方に加えて、こちらを追加します。
target=”_blank”
実際のHTMLの書き方は、以下の通りです。
<p><a href="https://academiiy.com" target="_blank">リンクを飛ばす文章</a></p>それでは、実際にハイパーリンクで新規タブを開いた場合の例も見ていきましょう。
サイトが正しく開かれていることが分かりますね。
移動する先のサイトのURLは、https://またはhttp://から記載することを忘れないでください。
これらが抜けていると、正しく反映されませんので注意です。
【補足】テキストエディタでページを移動させる方法│HTMLの書き方
同じ階層にあるファイルへの移動は<a>タグを使用し、下記の通りでOKです。
<a href="リンク先のファイル名"></a>ただし、ファイルが下がる場合は、スラッシュ/で区切ります。
<a herf="ファイル名/ページ名"＞</a>また、階層が上がる場合は、../を使う点に注意です。
<a herf="../index.html">ホームへ戻る</a></p>まとめ
今回は、HTMLで指定の場所からページやリンクへ移動させる方法をご紹介しています。
【本記事で解説した内容】
- 指定の文章からページ内の別の場所に移動させる
- トップページへ戻るハイパーリンク
- 文章にURLのリンクを張り付ける
初めてHTMLを学ぶ方でもわかりやすくするために、実際のHTMLの例も載せています。
ぜひ参考にしてみてくださいね。
▽こちらもおすすめ
マークダウン｜Markdown記法で引用やリンクを作成する方法 
マークダウン｜Markdownでテーブル・表を作成する方法と注意点 
非公開: HTMLの文字をビジュアル画面でそのまま反映させる方法│文字実体参照 
