７

 リンクについて

hyoujun.gif (3488 バイト)

１．

 ページ内の違う場所に移動したい！
NE3 NE4 NE6 IE3 IE4 IE5 IE6 i

いままではページごとの移動だったね。
次にやるのは同じページ内の違う場所に移動したい時に使うタグなんだ。

<A HREF="#■">〜</A>
<A NAME="■">〜</A>		 　　　・・・・違うところへリンク
       ・・・・リンクしたい場所

■：移動先の名前

今度はさっきと違って２つのタグが必要になるんだ。
上のタグはページの移動とよく似てるね、違うのは#という記号がついているところだね。
下のタグはリンクしたい場所の名前を決めるんだ。
ページの移動の時は移動したいページの名前を指定して移動させたね。
でもページ内の移動の場合は、移動したくても名前なんてついてないよ。
だから下のタグで好きな場所に好きな名前を付けてやるんだ。
そうして、目印（名前）をつけておいてボタンを押すとその場所に移動するような仕組みを作ってやるんだね。
リンクの前に#がついているのは丸暗記してね。
ページ内の移動は名前の前に#が付くと覚えておこう。

　SOURCE
<HTML>
<HEAD>
<TITLE>指定場所に移動</TITLE>
</HEAD>
<BODY>

<A HREF="#HTML">ＨＴＭＬ</A>　　←ＨＴＭＬをクリックすると、”HTML”という名前がついてる所へ移動
<A HREF="#soccer">サッカー</A>　　←サッカーをクリックすると”soccer”という名前がついてる所へ移動

  • 　
  • 　
  • 　

<A NAME="HTML">ＨＴＭＬとは、ホームページを作るための・・・・・</A>　　←この場所の名前を”HTML”という名前にした

  • 　
  • 　
  • 　

<A NAME="soccer">サッカーは僕の好きなスポーツです・・・・・</A>　　←この場所の名前を”soccer”という名前にした

  • 　
  • 　

</BODY>
</HTML>

jamp.gif (1016 バイト)ここを押すとページの一番上に移動します。

このページの一番上の部分には<A name="top">というタグを入れておいたんだ。
そして、ここのリンクではリンク先を<A href="#top">として、topという場所に移動するようにしているんだ。

詳.gif (135 バイト)
実際は、ある文章を<A NAME="■">〜</A>でくくらなくても、
<A NAME="■">　</A>を置くだけで名前のついた場所ができることになるんだ。（空白に名前を付けた）
つまり、これを置くだけでその部分に名前をつけることができると覚えておこう。
※空白無しの<A NAME="■"></A>でもよいがこれはブラウザによって認識されない場合もあるのでやはり空白をくくった上のタグを使おう。

　

詳.gif (135 バイト)
nameに変わる属性としてidというものが出てきたんだ。
これらの違いは、nameは<A>タグにしかつけられなかったけど、idはどのようなタグにもつけることができるんだ。
（例えば、<HR id="■">や<IMG id="■">）
つまり、idはnameの拡張版だと考えておこうね。

　

back2.gif (978 バイト)　メールをもらおう！
next.gif (705 バイト)　違うページの指定した場所に移動したい！