HTML ページの特定の場所に飛ばす（頭出しリンク）

　

縦に長いページなどで目次などをクリックすると同じページの特定の場所にジャンプする機能がありますよね。

また、他のページのある部分を参照させたい場合などにも他のページのある部分の頭出し（その部分の先頭に飛ぶこと）をさせたりします。

今回はこのページの特定の場所に飛ばす（長いので以後”頭出しリンク”を称します）方法について説明します。

先ず、リンクについて復習です。

<a href=”リンク先URL”>ここをクリック</a>

上記の様に記述すると、

ここをクリック

の様にリンクが張られます。（上の例はリンク先URLを記載していないので同一ページの先頭に飛びます）

これは良いですよね。もっともHTMLらしい記述です。

”頭出しリンク”も基本は同じです。この<a>を使用します。（アンカーと呼びます）

ものすごく簡単です。次の様にちょっとだけオマジナイを付け加えます。

<a href=”リンク先URL#ユニークな名前”>ここをクリックする</a>

具体的に書きますと次のようになります。

<a href=”https://tec-aid.com#here”>ここをクリックする</a>

記号や言葉の説明します。

リンク先URLの後についている#（ハッシュと言います）はidを示します。idとはidentityのことでIDカードのidと同じ意味です。他と区別ができること、つまり唯一無二であることです。

そして”ユニークな名前”とはそのページで一回しか使われていない名前（つまり唯一無二）であることを意味します。

まとめると、リンク先URL先の唯一無二の名前”here”というidが付いているところに飛びなさいということです。

（CSSをご存知の方は#がidを示すことやCSSのidの意味も唯一無二であることをご存知だと思います）

　

リンク元の記述は分かったので、次は頭出しリンク先の書き方です。

これは非常に簡単です。

<全ての要素 id=”ユニークな名前”>ここが頭出しリンクの先頭</全ての要素>

全ての要素とは”p”でも”h2″でも”img”でもOKという意味です。

また具体的に書くと以下のようになります。

<h3 id=”here”>ここが頭出しリンクの先頭</h3>

これはCSSのidと全く同じです。もちろんCSSのidとしても使えます。

（CSSとは異なり頭出しリンク先に複数使用が可能なクラスは使用できません。目的地が複数あるとどこに飛んだら良いのかわからないからです）

基本はThat’s it! です。

　

同じページの場合は、リンク先URLに同じページのURLを書いても良いですし、省略していきなり#から始めても構いません。

<a href=”#last”>ここをクリックすると「お試しください」に飛びます</a>　←　同じページ内でid=lastの場所にジャンプさせる場合

ここをクリックすると「お試しください」に飛びます

　

また、昔のブラウザの解釈のために頭出しリンク先を次のように書く場合もあります。

<a name=”here”>ここが頭出しリンクの先頭</a>

昔のブラウザはidという概念が無かったので頭出しリンク先もアンカー<a>を使用してidの代わりにnameを使用していました。

しかし、よっぽどの安全設計でない限り、通常のidの手法で大丈夫です。

因みに、安全設計とは次の様に書くようです。

<a id=”here” name=”here”>ここが頭出しリンクの先頭</a>

id、name、どちらでも使える方で解釈してね！（賢い方法ですけどアンカーしか使えないことは変わりません）

　

また、たまにブラウザの解釈が異なり、頭出しリンクが効かないこともあります。（特にモバイル系）

#の前にスラッシュを入れたら良いとかいくつかのローカル療法があるようですが、その時は気にしないことをおすすめします。

ホームページ制作は全ての（バージョンの）ブラウザに対して100%の動作保証は不可能ですし、頭出しリンクは最悪でも対象ページの先頭に飛びますから被害はそれほど大きくないからです。

—– ここのp要素にid=”last”を記載しています —–

　

お試しください。