HTML CSS 講座 トップページへ

ホームページ作成 いまさらHTML,CSS講座

|  Home  |  ホームページ作成の知識  |  HTML 講座  |  HTML TABLE 講座  |  スタイルシート(CSS) 講座  |  携帯サイト 作成 講座  |
[HTMLテンプレートカテゴリ] [未分類カテゴリ]

いまさらHTML,CSS講座トップ > HTML4.01 講座インデックス > リンクを指定
様々なブックマークサービスがご利用頂けます。

リンク(Link)

ハイパーテキスト (Hyper Text)に、おいてリンクは、複数の文書を結びつける役割を担います。
リンクが指定されているテキストや画像をたどり展開(クリック)してことによって、別のWebページや別のファイルを表示させることが出来ます。
この機能を、『ハイパーリンク (Hyper Link)』、またハイパーリンクが指定されている文書を『ハイパーテキスト (Hyper Text)』と言います。
■ テキスト、画像にリンクを指定。 a要素
ハイパーリンクのリンク元やリンク先を定義するアンカー(Anchor)を指定する要素です。
リンク先を指定する href属性の値に、リンク先のファイルや、Webページの URI を、相対 URI、又は絶対 URI で指定します。
ポイント URIとURL
インターネット上に存在するファイルや画像などの情報資源の場所を指し示す記述方式。
インターネット上の情報の「住所」とも言えます。
また、URI は包括的な概念であり、現在インターネットで広く用いられている URL は、URI の機能の一部を具体的に仕様化したものです。
ソース  ソース
<a href="index.htm">トップページへ戻る</a>
表示  表 示
トップページへ戻る
■ ウィンドウの指定 target属性
target属性は、href属性の値に指定したリンク先のウィンドウの表示方法を指定します。
  • _blank (新規ウィンドウを開き表示します。)
  • _self (現在のウィンドウに表示します。)
  • _top (フレームを解除し、ウィンドウ全体で表示します。)
  • _parent (親フレームに表示します。)
ソース  ソース
<a href="index.htm" target="_blank">新規ウィンドウを開いて表示します。</a>
表示  表 示
新規ウィンドウを開いて表示します。
ポイントtarget属性の廃止
HTML4.01では、DOCTYPE宣言で、DTDを Strict で行った場合、target属性の指定が出来ません。
■ リンクの枠を消します。
画像にリンクを指定すると、指定が無い限り枠線が表示されます。
この枠線を消すには、画像ファイルの border属性値を 0 に指定します。
ソース  ソース
<a href="index.htm">
<img src="link/img.png" alt="サンプルイメージ" width="30" height="30" border="0">
</a>
表示  表 示
サンプルイメージ
ポイント代替指定
border属性は、非推奨属性なので、スタイルシートの border-widthプロパティで代替指定する事が推奨されています。
■ リンクタイトル
title 属性で、リンクの簡潔なタイトルを指定できます。
リンクが指定されている箇所にマウスカーソルを合わせると、ポップアップで、title属性で指定したタイトルが表示されます。
また、音声出力環境でのブラウジングでは、補足情報として読み上げられます。
ソース  ソース
<a href="../index.htm" title="トップページへ戻ります。">戻る</a>
表示  表 示
戻る
■ 同一ページ内の指定箇所にリンク
同じページ内のソースに、name属性で、アンカーを指定します。
ソース  アンカーの指定ソース
<a name="window">ウィンドウの指定 target属性</a>
a要素の href 属性の値に、#(シャープ)アンカー名を指定する事で、リンク先を指定します。
ソース  リンク先の指定ソース
<a href="#window">ウィンドウの指定方法</a>
表示  表 示
ウィンドウの指定方法
このページの上にあるテキスト『 ウィンドウの指定 target属性 』に、name属性で、任意のアンカー名(ここでは、window)を指定しています。
リンク先指定のテキスト『 ウィンドウの指定方法 』に、href属性の値に、#(シャープ)アンカー名(window)を指定する事で同一ページ内でのリンク(ジャンプ)が出来ます。

■ 他ページ内の指定箇所にリンク
他ページ内のソースに、name属性で、アンカーを指定します。
ソース  アンカーの指定ソース
<a name="tag">ウィンドウの指定 target属性</a>
a要素の href 属性の値に、他のページのURL#(シャープ)アンカー名を指定する事で、リンク先を指定します。
ソース  リンク先の指定ソース
<a href="../index.htm#tag">HTML4.01講座</a>
表示  表 示
HTML4.01講座
■ メール
訪問者がリンクをクリックすると、送信用のメールブラウザ(訪問者の環境に依存)が起動します。
href 属性の値に mailto:メールアドレス を指定します。
ソース  ソース
<a href="mailto:mail@address.ne.jp">ご意見、ご要望はこちらまで</a>
※記述されているメールアドレスは架空のものです。
表示  表 示
ご意見、ご要望はこちらまで
ポイント あて先の欄が入力済みのメール送信用ブラウザが起動します。
■ 件名を入力済みにする場合
メールアドレスに続けて「?」を記述し、subject=件名 を記述します。
ソース  ソース
<a href="mailto:mail@address.ne.jp?subject=お問合せ">ご意見、ご要望はこちらまで</a>
※記述されているメールアドレスは架空のものです。
表示  表 示
ご意見、ご要望はこちらまで
■ 本文を挿入する場合
メールアドレスに続けて「?」を記述し、subject=件名 と body=本文 を、&(アンド)で区切って記述します。
ソース  ソース
<a href="mailto:mail@address.ne.jp?body=ご記入下さい。">ご意見、ご要望はこちらまで</a>
※記述されているメールアドレスは架空のものです。
表示  表 示
ご意見、ご要望はこちらまで
■ 件名、本文を両方挿入する場合
メールアドレスに続けて「?」を記述し、body=本文 を記述します。
ソース  ソース
<a href="mailto:mail@address.ne.jp?subject=お問合せ&body=ご記入下さい。">ご意見、ご要望はこちらまで</a>
※記述されているメールアドレスは架空のものです。
表示  表 示
ご意見、ご要望はこちらまで
ポイント 件名、本文をソースに記述する場合の注意
訪問者の環境によっては、日本語の件名や本文が文字化けする場合があります。日本語が含まれる場合には、その部分をURLエンコードしておくことをお勧めします。
 URLエンコーダー  いかなる不具合等、一切責任を持ちませんがよければ使ってみて下さい。
URLエンコードをする文字列

※IE しか動きません。

(C) いまさらHTML CSS講座 2002-2008 All right reserved