タイトルロゴ


■ 他のページにリンクする

特定の文字や画像に「リンク」を設定することで、他のページにジャンプすることができるようになります。

リンクを設定するには、文字や画像を<A href="xxxxxx">〜</A>で囲みます。「xxxxxx」の部分には、他のサイトの場合には「http://...」ではじまる絶対パス、自分のサイト内の他のページの場合には「../link.html」といった相対パスを指定します。

HTMLソース結果
<a href="index.html">
TOPへもどる
</a>
TOPへもどる





■ テキストリンクの色を指定する

ページ全体のリンク文字列の指定は、BODY要素に以下の属性をつけます。

未訪問のリンク: link="#カラーコードもしくはカラーネーム"
既訪問のリンク: vlink="#カラーコードもしくはカラーネーム"
クリック中のリンク: alink="#カラーコードもしくはカラーネーム"

カラーコード

アクセス者にわかるようにするために、色の指定は、”リンクスイッチ”と分かる様、基本文字色とわけて設定しましょう。





■ リンク形式を指定する

A要素にtarget属性をつけることで、リンク先のページの表示形式を指定することができます。target属性はフレームを使用したページの場合、非常に重要です。

関連項目---
フレームについて---

利用可能な属性値は、以下の通りです。

_top
    フレームを解除して、リンク先のページをウィンドウ全体に表示します。他のサイトへのリンクに使用するのが一般的です。
_blank
    新しいウィンドウを開いて、リンク先のページをそのウィンドウに表示します。これも他のサイトへのリンクに使用するのが一般的です。
HTMLソース結果
<a href="index.html" target="_blank">
TOPへもどる
</a>
TOPへもどる





■ 特定の場所を指定してリンクする

マーカーを使うことで、同じページ内や、他のページの特定の場所を指定してジャンプさせることができます。(他人のホームページの特定の場所は指定できません)

マーカーは、ジャンプしたい所に <a name="pagetop"> と記述します。NAME属性には、任意の属性値(半角英数)を書きます。 他のページの特定の場所を指定する場合はリンク部分に a href="htmlファイル名#マーカーネーム"と書き、リンクするHTMLファイルにマーカーを付けます。

HTMLソース結果
<a href="#pagetop">
このページトップへ
</a><br>
<a href="table.html#cell">
テーブル.HTMLの「セルを複数作る」に飛ぶ
</a>
このページトップへ
テーブル.HTMLの「セルを複数作る」に飛ぶ





■ E-mailアドレスをリンク先として設定する

E-mailアドレスをリンク先として設定することもできます。文字や画像を <A href="mailto:E-mailアドレス">〜</A>で囲みます。アクセス者がE-mailアドレスとして設定した文字や画像をクリックすれば、メールソフトの「メール作成ウィンドウ」が自動的に起動します。

さらに、<A href="mailto:E-mailアドレス?subject=件名">〜</A>とすれば、メールの件名を指定することができます。

HTMLソース結果
<a href="mailto:tomoarai@vesta.ocn.ne.jp">
メールはこちら
</a><br>
<a href="mailto:tomoarai@vesta.ocn.ne.jp?subject=リンクのお願い">
リンク依頼のメールはこちら
</a>
メールはこちら
リンク依頼のメールはこちら





■ 画像をリンクボタンとして設定する

<IMG>タグを<A>タグで囲めば画像をリンクボタンとして設定できます。画像の枠線を消すには<IMG>タグに属性border="0"を加えて下さい。

HTMLソース 結果
<a href="index.html" target="_blank">
<img src="gazo/banner.gif">
</a>





■ サムネイルにリンクを貼って大きい写真にジャンプする

サムネイルとは元の写真の見本のようなもので、アルバムなどを表示するのに適しています。

HTMLソース 結果
<a href="gazo/fusha2big.jpeg" target="_blank">
<img src="gazo/fusha2.jpeg" border="0" width="116" height="80">
</a>





■ リンク先の説明を表示する

TITLE属性でコメントを記述すれば、リンクボタンにマウスを乗せた時、リンク先の説明のミニコメントが表示できます。

HTMLソース 結果(マウスを乗せてみて下さい)
<a href="gazo/fusha2big.jpeg" target="_blank" title="写真「夜明けの風車」へのリンク">
写真
</a>
写真

TOPへもどる