HTML編　30／51
| 目的別 index | タグ別 index | カラーチャート | images | SAMPLE |
リンクする
新しいウィンドウにリンク先を表示する
リンク色を指定する




新しいウィンドウにリンク先を表示する

●<A HREF="n" TARGET="_blank">
今回のサンプルには出てきませんが、例えばリンクページを作る場合などに有効なのが、今見ているページはそのまま表示しておいて、新しいウィンドウにリンク先を表示する方法です。リンクページにこのタグを使えば、見ている人を自分のサイトにつなぎ止めておくことができます。また先ほどから出てくるViewマークのような使い方も出来ます。リンクタグに続けて「TARGET」オプションを加え、パラメータは「_blank」とします。試しにProfileをクリックすると新しいウィンドウにリンク先を表示するようにしてみましょう。

<A HREF="profile/index.html" TARGET="_blank">Profile</A>

パラメータに「_self」と入れると現在表示されているウィンドウにリンク先が表示されます。これはTARGETオプションを使わないときと同じなので使うことはあまりないと思いますが…。
今回の練習ではトップページにはTARGETを入れませんので、確認したら元に戻しておいてくださいね（笑）。
またTARGETオプションはこの後やる「フレーム」では必須のタグです。フレームのページで解説します。
View
<HTML>
<HEAD>
<TITLE>ようこそ！Kimura's Roomへ</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;CHARSET=Shift_JIS">
</HEAD>
<BODY BGCOLOR="#ececec" BACKGROUND="img/BGtop.gif">

<CENTER>
<!--★★全体をセンターにするためのテーブル★★-->
<TABLE ALIGN="center" BORDER="0" CELLPADDING="0" CELLSPACING="0" WIDTH="97%" HEIGHT="97%">
<TR>
<TD ALIGN="center" VALIGN="middle">

<!--★★ここから内容★★-->
<H2>ようこそ！</H2>
<HR SIZE="5" WIDTH="321">

<!--★★ロゴ★★-->
<IMG SRC="img/logo.jpg" WIDTH="321" HEIGHT="42" ALT="Kimura's Room" BORDER="0"><BR>

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

<!--★★四角のグラデーション部分ここから★★-->
<FONT SIZE="2" COLOR="#0000ff">◆</FONT>
------略-------
<FONT SIZE="2" COLOR="#ff0000">◆</FONT>
<!--★★四角のグラデーション部分ここまで★★-->
<BR>

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

<!--★★GIFアニメーション画像★★-->
<IMG SRC="img/glasses.gif" WIDTH="55" HEIGHT="25" ALT="ぐるぐるメガネ" BORDER="0"><BR>

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

<!--★★おしながきのテーブル★★-->
<TABLE BGCOLOR="#FFFFFF" BORDER="3" CELLPADDING="2" CELLSPACING="3">
<TR>

<TR>
<TH BGCOLOR="#009933" COLSPAN="2">
<FONT COLOR="#FFFFFF">おしながき</FONT>
</TH>
</TR>

<TR>
<TD NOWRAP>●<A HREF="profile/index.html" TARGET="_blank">Profile</A></TD>
<TD><FONT SIZE="2">いわゆる自己紹介ってやつです。</FONT></TD>
</TR>

------略-------
</TR>
</TABLE>

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

<A HREF="mailto:abc@defghijk.ne.jp?subject=木村宛のメールです">メール待ってます</A>
<!--★★ここまで内容★★-->

<!--★★全体をセンターにするためのテーブル閉じタグ★★-->
</TD>
</TR>
</TABLE>

</CENTER>
</BODY>
</HTML>




リンク色を指定する

●<BODY LINK="n" ALINK="n" VLINK="n">
長々とやってきたトップページもこれで最後です。他にも「ページ内でのリンク」や「クライアントサイドクリッカブルマップ」などのリンク技がありますが、それはまた後ほどやります。
リンクを張ったテキストは文字の色が変わり、下線が付いていますね。また、気づいていると思いますが、一度クリックしたリンクテキストは別の色に変わり、すでに行ったことがあるページか、まだ見ていないページか区別が付くようになっています。さらにクリックしている瞬間も別の色に変わっています。
テキストにはFONT COLORを指定することで自由に色を付けられますが、リンクのボタンになっている文字はリンク色が優先されるため、他の色は付けられません。しかし「未クリック」「済クリック」「クリック中」の3種類の色は自分の好みに変えることができます。これはリンクボタン毎に指定するのではなく「このページのリンク色は、この色」と指定するので<BODY>タグ内に指定します。未クリックの色はLINK、クリック中の色はALINK、済クリックの色はVLINKのオプションタグに続けてパラメータで色指定します。これらの色は各ページ毎に違う色を指定できますが、出来れば一つのサイト内のリンク色は、統一した方が見る人にとって親切だと思います。
未クリック色を緑、クリック中を赤、済クリック色はグレーに指定しました。

<BODY LINK="#009933" ALINK="#FF0000" VLINK="#999999">

先ほどやった画像に枠を付けた場合の枠の色も、その画像をリンクボタンにすればここで指定した色になります。

リンク先へ一度ジャンプしてしまうとLINKの色が確かめられず、制作中は不便だと思いますが、ブラウザの設定項目の中に履歴を戻す設定があると思いますので、それを実行すれば全てのリンクボタンの色は元に戻ります。
View
<HTML>
<HEAD>
<TITLE>ようこそ！Kimura's Roomへ</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;CHARSET=Shift_JIS">
</HEAD>
<BODY BGCOLOR="#ececec" BACKGROUND="img/BGtop.gif" LINK="#009933" ALINK="#FF0000" VLINK="#999999">

<CENTER>
<!--★★全体をセンターにするためのテーブル★★-->
<TABLE ALIGN="center" BORDER="0" CELLPADDING="0" CELLSPACING="0" WIDTH="97%" HEIGHT="97%">
<TR>
<TD ALIGN="center" VALIGN="middle">

<!--★★ここから内容★★-->
<H2>ようこそ！</H2>
<HR SIZE="5" WIDTH="321">

<!--★★ロゴ★★-->
<IMG SRC="img/logo.jpg" WIDTH="321" HEIGHT="42" ALT="Kimura's Room" BORDER="0"><BR>

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

<!--★★四角のグラデーション部分ここから★★-->
<FONT SIZE="2" COLOR="#0000ff">◆</FONT>
------略-------
<FONT SIZE="2" COLOR="#ff0000">◆</FONT>
<!--★★四角のグラデーション部分ここまで★★-->
<BR>

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

<!--★★GIFアニメーション画像★★-->
<IMG SRC="img/glasses.gif" WIDTH="55" HEIGHT="25" ALT="ぐるぐるメガネ" BORDER="0"><BR>

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

<!--★★おしながきのテーブル★★-->
<TABLE BGCOLOR="#FFFFFF" BORDER="3" CELLPADDING="2" CELLSPACING="3">
<TR>
------略-------
</TR>
</TABLE>

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

<A HREF="mailto:abc@defghijk.ne.jp?subject=木村宛のメールです">メール待ってます</A>
<!--★★ここまで内容★★-->

<!--★★全体をセンターにするためのテーブル閉じタグ★★-->
</TD>
</TR>
</TABLE>

</CENTER>
</BODY>
</HTML>

backindexnext