HTMLページ内
リンクもくじからジャンプの作り方（コピペ可能）

ブログ記事で、ページ内にリンクを作りたいとき
目次から該当の情報までジャンプさせたいときありますよね？

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

1. HTMLでページ内リンクを作る方法：コーディング

HTMLでページ内リンクを作る方法は下記の2ステップです。

1. リンク元を指定:ここをクリックしたら
2. リンク先を指定:ここに飛ぶ

イメージしやすいように、名前を下のように呼びます。

1. リンク元: ジャンプポイント
2. リンク先: 着地ポイント

それでは一つ一つ設定しましょう。

リンク元:ジャンプポイントの作成

ジャンプポイントの作成は下記です。

例として以下でジャンプポイントを作成します。

• ジャンプポイントの名前: JumpPointA
• クリックするテキストを入力: ここをジャンプポイントとします。

入力すると以下になります。

着地ポイントの作成

ジャンプポイントの指定は下記です。

以下で着地ポイントを作成します。

• 着地ポイントの名前（ジャンプポイントと同じ）: JumpPointA
• 着地ポイント名: JumpPointAの着地ポイントです。

"例"のパラメーターを入力すると以下になります。

これでジャンプポイントと、着地ポイントが出来ました。

次に実際の動きをみてみましょう。

2. HTMLでページ内リンクを作る方法：実演

実際にコードしてみましょう。

下の"ここをジャンプポイントをします"クリックしてください。

ここをジャンプポイントとします。

JumpPointAの着地ポイントです。

↑↑着地ポイントに着きましたね！↑↑

3. 目次からリンクをつけてジャンプさせる方法

目次からジャンプさせるには着地ポイントに名前がついていないほうが便利です。

目次からジャンプさせる場合は、コメント欄を空白にして、任意の場所にコードを設置しましょう。

使用したコードは下記です。

コードをリストタグの間にいれれば、もくじ内でもジャンプさせられます。

<li> </li>

実際に、もくじから最後の"まとめ"に飛ぶように作成しました。

下に作成した目次内のまとめ（太字）をクリックしてください。

4. まとめ：ページ内リンクを使って便利なサイトにしましょう！

ページ内リンクを作るにはジャンプポイントと到着ポイントを指定。

それぞれコードいれましょう。

コードをリストタグの間にいれれば、もくじ内でもジャンプさせられます。

Have a happy Low stress life !!