| |||||||||||||||||||||||||||||
<a href=""> <a href=""><img src=""> <a href="" target=""> | |||||||||||||||||||||||||||||
<a>タグでリンクを設定します。このタグで囲んだ部分が、リンクボタンになります。 | |||||||||||||||||||||||||||||
<a href="index.htm">リンクボタン</a> | |||||||||||||||||||||||||||||
| |||||||||||||||||||||||||||||
※ この例文で指定している文書名は、相対パス指定です。文書名は、絶対パスで指定する方法もあります。詳細は、「パス（URL）の指定方法」のページを参考にして下さい。  | |||||||||||||||||||||||||||||
| |||||||||||||||||||||||||||||
<img>タグを<a>タグで囲むと、画像をリンクボタンにできます。 | |||||||||||||||||||||||||||||
<a href="index.htm"><img src="sample.gif" alt="サンプル"></a> | |||||||||||||||||||||||||||||
＊ このように、画像（<img>タグ）を<a>タグで囲み、画像をリンクボタンにします。 | |||||||||||||||||||||||||||||
※ 画像をリンクボタンに指定すると、一般的なブラウザでは画像の周囲に境界線が入ります。この境界線を消す場合は、次のように指定します。 | |||||||||||||||||||||||||||||
<a href="index.htm"><img src="sample.gif" alt="サンプル" border=0></a> | |||||||||||||||||||||||||||||
＊ <img>タグ内に border=0 を追加し、境界線の太さを 0 にします。 | |||||||||||||||||||||||||||||
※ 画像設定の詳細は、<img>タグのページをご覧下さい。 | |||||||||||||||||||||||||||||
 画像のborder属性（境界線の指定）は非推奨属性です。画像の境界線はスタイルシートでも指定できます。 | |||||||||||||||||||||||||||||
| |||||||||||||||||||||||||||||
<a>タグに target="" を追加すると、リンクするページの表示ウィンドウ（フレーム）を指定できます。 | |||||||||||||||||||||||||||||
<a href="index.htm" target="_top" >リンクボタン</a> | |||||||||||||||||||||||||||||
＊ この target属性は、リンク先のページを「新たなブラウザ」に表示する場合や、フレームタグで画面を分割しているときなどに使用します。 | |||||||||||||||||||||||||||||
| |||||||||||||||||||||||||||||
※ target に "_blank" を指定した場合、ユーザーの環境によってはポップアップブロックが機能し、リンク先を表示しないことがあります。 | |||||||||||||||||||||||||||||
 参考： 「新たなブラウザ（target="_blank"）」について＊ 最近のブラウザは「タブシート」型が主流です。タブシート型のブラウザでは、"_blank"の扱いに違いが見られます。
※ Internet Exp.では、リンクボタンをクリックする度に「新たなブラウザ」を立ち上げます。
※ Firefox や Opera 等では、「同じブラウザ」に「タブシートを追加して」表示します。 | |||||||||||||||||||||||||||||
| ★ 使用例とブラウザでの表示 | |||||||||||||||||||||||||||||
| |||||||||||||||||||||||||||||
| 関連するページ | |||||||||||||||||||||||||||||
HTML タグページ  ：画像を表示する
HTML タグページ ：DOCTYPE宣言 | |||||||||||||||||||||||||||||
CSS スタイルシート ：リンクの文字色を指定する
CSS スタイルシート ：画像の境界線を指定する | |||||||||||||||||||||||||||||
Utilety Page (参考) ：「パス（URL）の指定方法」へ | |||||||||||||||||||||||||||||
| 相対リンクの基準となるページを指定する | |||||||||
<base href=""> | |||||||||
<base>タグで、相対リンクの基準となる URL を指定できます。このタグは<head>タグに囲まれた部分へ記述します。 | |||||||||
<base href="http://www.taglist.com/"> | |||||||||
| |||||||||
＊ リンク先のページを相対URLで指定した場合、リンク元のページが相対URLの基準位置になります。<base>タグは、この基準位置を変更する場合に使用します。 | |||||||||
※ 相対URLと絶対URLについては、「パス（URL）の指定方法」のページを参考にして下さい。 | |||||||||
<base>タグには target属性を指定することもできます。 | |||||||||
<base href="http://www.taglist.com/" target="_blank"> | |||||||||
| ★ <base>タグの記述例 | |||||||||
| |||||||||
| 関連するページ | |||||||||
| HTML タグページ ：DOCTYPE宣言 | |||||||||
| Utilety Page (参考)：「パス（URL）の指定方法」へ | |||||||||
| 同じページ内にリンクする | |||||||||||||||||||
<a href="#"><タグ id="">（<a name="">） | |||||||||||||||||||
任意のタグに id属性を追加し、同じページの特定部分へのリンクを指定します。 | |||||||||||||||||||
（リンク元）
<a href=#exp>使用例へ</a> ： （リンク先） <h3 id=exp>使用例</h3>←ここにジャンプします | |||||||||||||||||||
＊ リンク元の href="" には、ハッシュ（ # ）に続けて任意の名前を指定します。 | |||||||||||||||||||
＊ リンク先の id="" には、href="#...." で使用した名前を指定します（この例の場合は exp になります）。 | |||||||||||||||||||
＊ この exp という名前が、リンク元とリンク先を結びつけます。同じページに複数のリンクを設定する場合は、名前が重複しないように指定します。 | |||||||||||||||||||
※ 名前は、アルファベットで始まる半角英数字（一部の記号も使用可）で指定します。名前に使用できる記号は、ハイフォン（ - ）、アンダーバー（ _ ）、コロン（ : ）、ピリオド（ . ）の４つです。 | |||||||||||||||||||
【旧方式 … <a name="">による方法】 | |||||||||||||||||||
旧方式では、<a>タグにname属性を追加し、ページ内のリンク先を指定します。 | |||||||||||||||||||
| |||||||||||||||||||
| ★ 使用例とブラウザでの表示 | |||||||||||||||||||
| |||||||||||||||||||
|
| 別ページの指定した部分へリンクする | |||||||||
<a href="url#"><タグ id="">（<a name="">） | |||||||||
別ページの特定部分にリンクする場合、リンク先の文書名に続けて #sample などと指定すると、別ページの「指定した場所」へリンクできます。 | |||||||||
（リンク元） … index.htm
<a href=Sample.htm#samp>サンプルへ</a> （リンク先） … Sample.htm <h3 id=samp>サンプル</h3>←ここにジャンプします | |||||||||
＊ リンク元の href="" には、ハッシュ（ # ）に続けて任意の名前を指定します。 | |||||||||
＊ リンク先の id="" には、href="url#...." で使用した名前を指定します（この例の場合は samp になります）。 | |||||||||
＊ この samp という名前が、リンク元とリンク先を結びつけます。同じページに複数のリンクを設定する場合は、名前が重複しないように指定します。 | |||||||||
※ 名前は、アルファベットで始まる半角英数字（一部の記号も使用可）で自由に指定できます。
使用できる記号は､ハイフォン（ - ）､アンダーバー（ _ ）､コロン（ : ）､ピリオド（ . ）の４つです。 | |||||||||
【旧方式 … <a name="">による方法】 | |||||||||
旧方式では、<a>タグにname属性を追加し、別ページのリンク先を指定します。 | |||||||||
| |||||||||
| メールソフトを起動させる | |||||||||||||
<a href="mailto:address"> | |||||||||||||
<a>タグにこの指定をすると、リンクボタンをクリックしたときにメールソフトが立ち上がります。 | |||||||||||||
＊ メールの宛先欄には、指定したメールアドレスが既に入力済みの状態となります。 | |||||||||||||
<a href="mailto:t-kita@exam_mail.com">メールはこちらへ</a> | |||||||||||||
| |||||||||||||
| 迷惑メールのターゲットにされやすいため、お薦めできません。 | |||||||||||||
メールアドレスを表示する必要がある場合は、アドレスをイメージファイルにする方法をお薦めします。 | |||||||||||||
Webサイトにメールアドレスを公開していると、「メールアドレス収集ロボット」にアドレスを収集されてしまうようです。
その結果、迷惑メールが増加してしまう可能性が高まります。 イメージファイルにした場合、この「メールアドレス収集ロボット」に拾われにくくなります。 | |||||||||||||
| ★ 使用例とブラウザでの表示 | |||||||||||||
| |||||||||||||
|
| 起動させたメールに題名や本文を入れる | ||
<a href="mailto:address?subject=&body="> | ||
リンクで起動したメールに、予め題名や本文を挿入することができます。 | ||
<a href="mailto:t-kita@exam_mail.com?subject=題名&body=本文"> メールはこちらへ</a> | ||
| ||
■ 題名を挿入する場合
subject=ここに題名を記述 | ||
■ 本文を挿入する場合
body=ここに本文を記述 | ||
※ 両方挿入する場合は & で区切ります。 | ||
| ユーザーの環境によっては、日本語の部分（題名や本文）が文字化けする場合もあります。
この方法も、迷惑メールのターゲットにされやすいので、迷惑メール対策の整ったメールサーバーでお使い下さい。 | ||
| ★ 題名などの記述例 | ||
■ 題名を挿入する場合
<a href="mailto:t-kita@exam_mail.com?subject=アンケート">メールはこちらへ</a> ■ 本文を挿入する場合
<a href="mailto:t-kita@exam_mail.com?body=○×でお答え下さい ...">メールはこちらへ</a> ■ 両方挿入する場合
<a href="mailto:t-kita@exam_mail.com?subject=アンケート&body=○×でお答え下さい ..."> メールはこちらへ</a> | ||
＊ いづれの場合も、ブラウザには「メールはこちらへ」のみを表示します。 | ||