リンクタグ
HOME
>
よくわかるHTML講座
>リンクタグ
リンクさせる<a>タグ
記述方法
使用例
使用例(ページ内リンク編)
使用例(メール編)
リンクさせる<a>タグ
記述方法
<a href="
リンク先URL
" target="
ターゲットウインドウ
">
リンク先URL
いわゆる「アドレス」というやつを入れます。絶対アドレスで http://〜 から書いても、相対アドレスで sub1/index.html などと書いても大丈夫です。メールアドレスの場合は mailto:
xxx@xxx.xx
と入れましょう。
ターゲットウインドウ
ターゲットウインドウを指定します。とりあえず下の3つを覚えておけば大丈夫。
_blank
新しいウインドウを開き、そこにリンク先のページを表示させる。
_self
今現在のウインドウに、リンク先のページを表示させる。
_top
フレーム分割されたページ内からリンクするときに、フレーム構造を破壊してリンク先を表示する。
使用例
普通にリンク
説明
<a>○○</a>の○○の部分に入れた文字列or画像(orそれ以外の何か)の部分をクリックすると別のページにリンクできます。
ソース
<a href="sample.html">サンプルページ</a>
実行結果
サンプルページ
別窓でリンク
説明
別サイトにリンクする時などは別窓でリンクしたほうが、「こっから先はウチのサイトではないよ」とハッキリ伝わって好ましいかも知れません。でも、タブブラウザで閲覧中に別窓が開くとウザイと感じるのは俺だけ…?
ソース
<a href="sample2.html" target="_blank">サンプルページ</a>
実行結果
サンプルページ
文章中にさりげなく別窓でリンク
説明
文章中にリンクタグがあっても何ら問題ありません。どんどんリンクを設定しちゃいましょう。
ソース
試しに<a href="sample2.html" target="_blank">サンプルページ</a>を見てね。
実行結果
試しに
サンプルページ
を見てね。
画像でリンク
説明
<a>〜</a>に画像を入れてもOKです。
ソース
<a href="sample.html"><img src="button.gif"></a>
実行結果
画像は
牛飼いとアイコンの部屋
様のものを使用させてもらってます。
枠線を消して画像でリンク
説明
画像をリンクに使用すると、画像に枠線が表示されます。これを消したい時は、imgタグに border="0" と入れます。
ソース
<a href="sample.html"><img src="button.gif" border="0"></a>
実行結果
使用例(ページ内リンク編)
<a name="
アンカーネーム
"></a>
<a href="#
アンカーネーム
">
ページ内部にリンク
説明
ページ内に<a name="
アンカーネーム
"></a>などと記述すると、「しおり」のようなものを設定することが出来ます。閉じタグ</a>を忘れないように注意しましょう。
リンクするには<a href="#
アンカーネーム
">などと#を付けて<a>タグを記述します。
ソース
<a name="sample1"></a> しおり1
しおり1へ
しおり2へ
<a name="sample2"></a> しおり2
実行結果
しおり1
しおり1へ
しおり2へ
しおり2
使用例(メール編)
<a href="mailto:
メールアドレス
?subject=
メールの題名
&body=
本文
">
メールアドレス
送信先のメールアドレスを入力します。世の中にはWEBを自動で巡回してスパムメールを送りつけるソフトがあったり、WEBを見たユーザーのPCがウイルスに感染していると勝手にウイルスメールを送りつけられたりすることがあります。メールアドレスの公開は慎重に行いましょう。あえてリンクタグにせず、アドレスだけテキストとして公開しておくのもウイルスメールを防ぐ方法の一つです。
メールの題名
これを設定しておくとメーラーが立ち上がると自動的にメールの題名が入ります。「HPからの問い合わせ」「注文メール」などと入れておくと便利になるケースがあるやも知れません。
本文
これを設定しておくとメールの本文が自動的に入ります。なお、題名や本文は省略可能です。
リンクをクリックするとメーラーが立ち上がる
説明
<a>○○</a>の○○の部分にmailto:
xxx@xxx.xx
と入れるとクリックした人が書かれているアドレスにメールを書くことが出来ます。
ソース
<a href="mailto:xxx@xxx.xx">メール</a>
実行結果
メール
※メールは絶対に「送信」せず破棄して下さい(あて先不明で戻ってきてしまいますよ)。
メールに題名や本文を設定しておく
ソース
<a href="mailto:xxx@xxx.xx?subject=HPから問い合わせ&body=質問内容:">メール</a>
実行結果
メール
※メールは絶対に「送信」せず破棄して下さい(あて先不明で戻ってきてしまいますよ)。