さて、今回は超初歩的なものですが、
検索されているキーワードを調べていたら需要がありそうだった内部リンクの設定方法について紹介します。

ページ内リンクというのは、リンクをクリックしたらページ内の該当箇所にジャンプさせるためのリンクです。
このサイトの右下、ページトップへ戻る矢印のボタンもページ内リンクで、クリックすることで一番上にジャンプさせています。

ホームページのひとつの特徴として、ある場所からある場所へマウスのクリック１つでジャンプしていけるというリンクの概念があります。
リンクには２種類あって、ページ内リンクと外部ページへのリンク。
リンクをクリックすると別のページにジャンプするというのが一般的ですね。
ですが、同じページの別の位置にジャンプさせるリンクもあります。
ページ内リンクの設定方法はホームページを作る上での基本的な部分ですので、そんなに難しくありません。
ページ内リンクをうまく使えると、ホームページの導線がより良くなっていきますね。

ページ内リンクの設定方法

やり方はとっても簡単。

ジャンプ先に目印をつける

まずはジャンプ先に目印をつけておきましょう。
設定の仕方は簡単で、ジャンプしたい先のタグにID属性をつけるだけです。
具体的にはこんな感じです。

<div id='target_id（任意のID）'>ここにジャンプしてくる</div>

今つけた名前を覚えておきましょう。

ジャンプさせるアンカータグの設置

次に、先ほどつけたIDの場所にジャンプさせるリンクをつくります。
まず、リンクを表すタグは一般的なリンクのタグと一緒で<a>です。
リンク先で貼るhref属性のURL部分を、ページ内リンクとしてのフォーマットに従って書きます。
そのフォーマットは簡単で先頭に”#”をつけるだけ。
先ほど設定したジャンプ先のIDに前に#をつけましょう。

<a href='#target_id'>ページ内リンク</a>

このように、とっても簡単です。
合わせて書くとこんな感じです。

<a href='#target_id'>ページ内リンク</a>
<!--
何かいろいろと書いてある
-->
<div id='target_id'>ここにジャンプしてくる</div>
<!--
何かいろいろと書いてある
-->

長いコンテンツの先頭に、目次リンクとしてよく使われていますね。
各見出しに対して目次を作ってページ内リンクを設定しておけば、好きなところから読むことができます。
内部リンクをうまく使って読みやすいホームページにしていきましょう。