HTML編 41/51
| 目的別 index | タグ別 index | カラーチャート | images | SAMPLE |
リンクする
ページ内でリンクする
リンク先ページの表示部分を指定する




ページ内でリンクする

●<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です。
contents.html View

<HTML>
<HEAD>
<TITLE>Kimura's Room:Macintosh</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;CHARSET=Shift_JIS">
<META NAME="robots" CONTENT="none">

</HEAD>
<BODY BGCOLOR="#ececec" LINK="#009933" ALINK="#ff0000" VLINK="#999999">

<CENTER>

<TABLE BORDER="0" CELLPADDING="3" CELLSPACING="0" WIDTH="97%" BGCOLOR="#009933"> <TR><TD ALIGN="right"><FONT COLOR="#ffffff"><B>Macintosh</B></FONT>
</TD></TR>
</TABLE>

<!--★★スペース調整★★-->
<IMG SRC="../img/spacer.gif" ALT="" BORDER="0" WIDTH="1" HEIGHT="10"><BR>

私が今まで使ってきた歴代の愛機Macintoshをご紹介します。<BR><BR>

<!--★★同一ページ内へのリンク リンク元★★-->
<FONT SIZE="2">
<A HREF="#575">LC-575</A><A HREF="#630">LC-630</A><A HREF="#8500">PPC8500/180</A><A HREF="contents2.html#9500">PPC9500/200</A><A HREF="contents2.html#G4">G4/400</A>
</FONT>

<BR>

<!--★★スペース調整★★-->
<IMG SRC="../img/spacer.gif" ALT="" BORDER="0" WIDTH="1" HEIGHT="30"><BR>

<!--★★同一ページ内へのリンク リンク先★★-->
<A NAME="575"><H2>LC-575</H2></A>

<!--★★LC-575★★-->
<TABLE BORDER="3" CELLPADDING="3" CELLSPACING="0" BGCOLOR="#ffffff">
<TR><TD WIDTH="250" HEIGHT="250" ALIGN="center">
<IMG SRC="../img/Mac575.jpg" ALT="LC-575" BORDER="0" WIDTH="240" HEIGHT="215">
</TD></TR>
</TABLE>

<!--★★スペース調整★★-->
<IMG SRC="../img/spacer.gif" ALT="" BORDER="0" WIDTH="1" HEIGHT="10"><BR>

<!--★★コメント★★-->
<TABLE BORDER="0" CELLPADDING="3" CELLSPACING="0" WIDTH="80%" BGCOLOR="#99CC66">
<TR><TD>●<B>CPU:68LC040</B><BR>
初めて買ったMacintoshです。メモリとHDは増設して20M/230M。クロック周波数33MHz.。あの頃メモリはメチャクチャ高価な物だったんです。今はもう人手に渡り手元にはありませんが、ある意味、私の人生を変えたマシンでした。
</TD></TR>
</TABLE>

<BR>

<!--★★スペース調整★★-->
<IMG SRC="../img/spacer.gif" ALT="" BORDER="0" WIDTH="1" HEIGHT="20"><BR>

<!--★★同一ページ内へのリンク リンク先★★-->
<A NAME="630"><H2>LC-630</H2></A>

<!--★★LC-630★★-->
<TABLE BORDER="3" CELLPADDING="3" CELLSPACING="0" BGCOLOR="#ffffff">
<TR><TD WIDTH="250" HEIGHT="250" ALIGN="center">
<IMG SRC="../img/Mac630.jpg" ALT="LC-630" BORDER="0" WIDTH="240" HEIGHT="120">
</TD></TR>
</TABLE>

<!--★★スペース調整★★-->
<IMG SRC="../img/spacer.gif" ALT="" BORDER="0" WIDTH="1" HEIGHT="10"><BR>

<!--★★コメント★★-->
<TABLE BORDER="0" CELLPADDING="3" CELLSPACING="0" WIDTH="80%" BGCOLOR="#99CC66">

<TR><TD><B>●CPU:68LC040</B><BR>
さすがにLC-575の13インチモニタで仕事をするのが辛くなり、とりあえずモニタとセパレートタイプのマシンが欲しくなり購入しました。クロック周波数は同じく33MHz。メモリとHDをフルに積んで(それでも・笑)36/730MB。なんと、つい最近まで現役で活躍してました。
</TD></TR>
</TABLE><BR>

<!--★★スペース調整★★-->
<IMG SRC="../img/spacer.gif" ALT="" BORDER="0" WIDTH="1" HEIGHT="20"><BR>

<!--★★同一ページ内へのリンク リンク先★★-->
<A NAME="8500"><H2>PowerMacintosh8500/180</H2></A>

<!--★★PPC8500/180★★-->
<TABLE BORDER="3" CELLPADDING="3" CELLSPACING="0" BGCOLOR="#ffffff">
<TR><TD WIDTH="250" HEIGHT="250" ALIGN="center">
<IMG SRC="../img/Mac8500.jpg" ALT="PowerMacintosh8500/180" BORDER="0" WIDTH="170" HEIGHT="240">
</TD></TR>
</TABLE>

<!--★★スペース調整★★-->
<IMG SRC="../img/spacer.gif" ALT="" BORDER="0" WIDTH="1" HEIGHT="10"><BR>

<!--★★コメント★★-->
<TABLE BORDER="0" CELLPADDING="3" CELLSPACING="0" WIDTH="80%" BGCOLOR="#99CC66">

<TR><TD><B>●CPU:PPC604e/180</B><BR>
ついにあこがれのタワー型です。このマシンは自宅用に買いました。こいつのおかげで徹夜仕事になりそうな時、自宅に仕事を持ち帰ることが出来るようになりました。このミニタワー型は数あるMacintoshのデザインの中で、好きな物のひとつです。
</TD></TR>
</TABLE>

<!--★★スペース調整★★-->
<IMG SRC="../img/spacer.gif" ALT="" BORDER="0" WIDTH="1" HEIGHT="10"><BR>

<A HREF="contents2.html" TARGET="migi"><I>次へ</I></A>

</CENTER>

</BODY>
</HTML>

contents2.html View

<HTML>
<HEAD>
<TITLE>Kimura's Room:Macintosh</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;CHARSET=Shift_JIS">
<META NAME="robots" CONTENT="none">

</HEAD>
<BODY BGCOLOR="#ececec" LINK="#009933" ALINK="#ff0000" VLINK="#999999">

<CENTER>

<TABLE BORDER="0" CELLPADDING="3" CELLSPACING="0" WIDTH="97%" BGCOLOR="#009933">
<TR><TD ALIGN="right"><FONT COLOR="#ffffff"><B>Macintosh</B></FONT>
</TD></TR>
</TABLE>

<!--★★スペース調整★★-->
<IMG SRC="../img/spacer.gif" ALT="" BORDER="0" WIDTH="1" HEIGHT="10"><BR>

私が今まで使ってきた歴代の愛機Macintoshをご紹介します。<BR><BR>
<!--★★同一ページ内へのリンク リンク元★★-->
<FONT SIZE="2">
<A HREF="contents.html#575">LC-575</A><A HREF="contents.html#630">LC-630</A><A HREF="contents.html#8500">PPC8500/180</A><A HREF="#9500">PPC9500/200</A><A HREF="#G4">G4/400</A>
</FONT>

<BR>

<!--★★スペース調整★★-->
<IMG SRC="../img/spacer.gif" ALT="" BORDER="0" WIDTH="1" HEIGHT="30"><BR>

<!--★★同一ページ内へのリンク リンク先★★-->
<A NAME="9500"><H2>PowerMacintosh9500/200</H2></A>

<!--★★PPC9500/200★★-->
<TABLE BORDER="3" CELLPADDING="3" CELLSPACING="0" BGCOLOR="#FFFFFF">
<TR><TD WIDTH="250" HEIGHT="250" ALIGN="center">
<IMG SRC="../img/Mac9500.jpg" ALT="PowerMacintosh9500/200" BORDER="0" WIDTH="130" HEIGHT="240">
</TD></TR>
</TABLE>

<!--★★スペース調整★★-->
<IMG SRC="../img/spacer.gif" ALT="" BORDER="0" WIDTH="1" HEIGHT="10"><BR>

<!--★★コメント★★-->
<TABLE BORDER="0" CELLPADDING="3" CELLSPACING="0" WIDTH="80%" BGCOLOR="#99CC66">

<TR><TD>●<B>CPU:PPC604e/200</B><BR>
8500に比べ、少々ノッポなマシンです。8500と同時に購入したので、結構な出費になりましたが、よく働いてくれています。現在サブ機として、まだまだ活躍してもらう予定です。
</TD></TR>
</TABLE>

<BR>

<!--★★スペース調整★★-->
<IMG SRC="../img/spacer.gif" ALT="" BORDER="0" WIDTH="1" HEIGHT="20"><BR>

<!--★★同一ページ内へのリンク リンク先★★-->
<A NAME="G4"><H2>G4/400</H2></A>

<!--★★G4/400★★-->
<TABLE BORDER="3" CELLPADDING="3" CELLSPACING="0" BGCOLOR="#FFFFFF">
<TR><TD WIDTH="250" HEIGHT="250" ALIGN="center">
<IMG SRC="../img/MacG4.jpg" ALT="G4/400" BORDER="0" WIDTH="185" HEIGHT="240">
</TD></TR>
</TABLE>

<!--★★スペース調整★★-->
<IMG SRC="../img/spacer.gif" ALT="" BORDER="0" WIDTH="1" HEIGHT="10"><BR>

<!--★★コメント★★-->
<TABLE BORDER="0" CELLPADDING="3" CELLSPACING="0" WIDTH="80%" BGCOLOR="#99CC66">

<TR><TD><B>●CPU:G4/400</B><BR>
そしてつい最近購入した、現在のメインマシンがこのG4/400です。クロック周波数400MHz、最初に買ったLC-575の12倍以上。なのに値段はこちらの方が安いってのは、どういう訳なんでしょう(笑)。
</TD></TR>
</TABLE>

<!--★★スペース調整★★-->
<IMG SRC="../img/spacer.gif" ALT="" BORDER="0" WIDTH="1" HEIGHT="10"><BR>

<A HREF="contents.html" TARGET="migi"><I>戻る</I></A>

</CENTER>

</BODY>
</HTML>

backindexnext