;

HTML講座(17) 特定の場所へのリンク

2011/11/01 0 コメント

 

リンクしたページにジャンプすると、通常はページの先頭部分が表示されます。そのページ内にある特定の場所を表示させたいときには、その場所に名前をつけておくことで表示されるようになります。

たとえば手紙に宛先住所を書くときに、住所の番地だけを書いてマンションの部屋番号を書かないと、手紙を入れるポストがわかりません。これと同様にリンクしたページにジャンプする場合も、指定のHTMLファイルまではたどり着いても、特定の場所までは表示できないのです。

そこで特定の場所には、

<a name="kokoninamaewo"></a>

のように名前(アンカーネーム)をつけておきます。手紙を送る時に住所のほかに部屋番号を付け加えるようなものです

また、ハイパーリンクのほうでは

<a href="xxxx.html#kokoninamaewo"> ~ </a>

というように参照ファイル名の後ろに「#」記号とアンカーネームを記述します。

注意:ただし、現在はID属性を併用することが多く「name」属性は廃止の方向です。

 

それぞれの項目にアンカーネームを指定しています。

◆anc_a.html

<html>
 <head><title>アンカー練習 その1</title></head>
 <body>
  <p>アンカーの練習</p>
   <ol>
    <li><a href="anc_b.html#hajime">はじめに読んで</a></li>
    <li><a href="anc_b.html#jyuyo">重要なこと</a></li>
    <li><a href="anc_b.html#tsuika">追加すること</a></li>
   </ol>
 </body>
</html>

 

縦に長いページをつくるため、強制的に改行を加えています。

◆anc_b.html

<html>
 <head><title>アンカー練習 その1</title></head>
 <body>
  <p>アンカー B</p>
  <p><a name="hajime">■はじめに読んで</a>
    ●<br>●<br>●<br>●<br>●<br>●<br>●<br>
    ●<br>●<br>●<br>●<br>●<br>●<br>●<br></p>
  <p><a name="jyuyo">■重要なこと</a>
    ●<br>●<br>●<br>●<br>●<br>●<br>●<br>
    ●<br>●<br>●<br>●<br>●<br>●<br>●<br></p>
  <p><a name="tsuika">■追加すること</a>
    ●<br>●<br>●<br>●<br>●<br>●<br>●<br>
    ●<br>●<br>●<br>●<br>●<br>●<br>●<br></p>
 </body>
</html>

Tagged , ,

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です