ページ内でリンクする
●<A HREF="#n"><A NAME="n">
アンチMac派の人には申し訳ありませんが(笑)「Macintosh」のページです。フレーム構造は「Profile」ページと全く一緒ですから、「index.html」と「menu.html」を作るのは簡単ですよね?(一応次ページにHTMLを掲載しておきますが…)
ここでは「contents.html」(右側のページ)に仕込んである、同じページ内でリンクを張る方法について解説します。 「私が今まで使ってきた歴代の〜」の下の|LC-575|LC-630|…をクリックすると、その目的地へジャンプします。これは1枚のファイルの中でリンクを張っているのです。このページのように縦に長いページなどは、上に項目ボタンを作っておいて、クリック一つで目的地へジャンプできると、たいへん便利です。またこのサンプルではやっていませんが、ページの下の方からこの項目ボタンへのリンクがあっても良いと思います。
通常のリンクを張る場合はA HREF=に続けてリンクパスを書き込みました。同一ページ内でリンクを張る場合は、パスではなく「#」に続けて任意の名前を書き込みます。例えば「LC-575」というボタンには「575」という名前を付けたので、リンクタグはこのようになります。
<A HREF="#575">LC-575</A>
もちろん、これだけではリンクは機能しません。今度はこのボタンをクリックしたとき表示させたい部分に「アンカー」と呼ばれる以下のタグを書き込みます。ここでは見出し(H2)の「LC-575」という文字にアンカーを設定しました。
<A NAME="575"><H2>LC-575</H2></A>
アンカー側には名前の前に「#」はいりません。同じ要領で「LC-630」「PowerMacintosh8500/180」へリンクタグ、アンカータグを仕込めば出来上がりです。
リンク先ページの表示部分を指定する
●<A HREF="リンクパス#n">
「PowerMacintosh9500/200」と私自慢の(笑)「G4/400」は次のページ(contents2.html)にあります。上でやった「同一ページ内でのリンク」はA HREF=に続けてリンクパスと「#名前」を書き込めば、別ページの中の表示したい箇所へ直接ジャンプするという応用が効きます。contents.htmlから「G4/400」へ直接ジャンプさせたい場合は
<A HREF="contents2.html#G4">G4/400</A>
として、contents2.htmlの「G4/400」の部分にアンカーを仕込めばOKです。
|