Top > Lecture > JouhouC2010 > 4th > anchor
AND OR

同じページへのリンクをつくる

ページが長いときなどに、 特定の位置に名前をつけておくことで、 そこにリンクすることができます。

このページにも、ページ内の別の場所にジャンプするリンクがあります。 見出しの右端のほうにある、「▼」「▲」をクリックすると、 ページの最上部や最下部にジャンプします。

リンク先に名前(アンカー)をつける

特定の位置にリンク先として名前(アンカー)をつけるには、 a要素name属性を使います。

<a name="位置名">...</a>

a要素のname属性に、位置な名前を指定します。 a要素にはさまれた部分に名前がつくことになります。

アンカーに使えるような文字には、次のような制限があります。 注意してください。

  • アルファベット(大文字小文字の区別あり)
    • ひと文字めはアルファベット
  • 数字(0〜9)
  • 記号(ハイフン「-」、アンダースコア「_」、コロン「:」、ピリオド「.」)

注意:見出しの部分にアンカーをつける場合

見出しの部分にアンカーをつける場合には、 タグのの位置に注意してください。 必ず、見出し要素の中にアンカーをつけるようにしてください。

正 解○:<h2><a name="midashi">みだし</a></h2>
間違い×:<a name="midashi"><h2>みだし</h2></a>

特定の位置へのリンクをつくる

名前をつけた位置へリンクするには、 リンクの位置の名前のまえに「#」をつけます。

<a href="#位置名">...</a>
<a href="リンク先のURL#位置名">...</a>

「#」を位置名の前につけることで、リンクすることができます。 リンク先へジャンプすると、 名前をつけた位置がブラウザの最上部に来るように表示されます。

ほかのページの中の特定の位置へリンクするには、 そのページのURLと「#」+位置名を指定します。

<ul>
  <li>
    <a href="#hoge">はじめてのHTML</a>
  </li>
  ...
</ul>
...
...
...
<h2>
  <a name="hoge">はじめてのHTML</a>
</h2>


次へ進んでください。



Reload   Diff   Front page List of pages Search Recent changes Backup Referer   Help   RSS of recent changes
Last-modified: Tue, 11 Mar 2014 02:20:22 HADT (3081d)