リンクタグ

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>〜</a>に画像を入れてもOKです。
ソース
実行結果
画像は牛飼いとアイコンの部屋様のものを使用させてもらってます。

枠線を消して画像でリンク

説明
画像をリンクに使用すると、画像に枠線が表示されます。これを消したい時は、imgタグに border="0" と入れます。
ソース
実行結果



使用例(ページ内リンク編)

<a name="アンカーネーム"></a>

<a href="#アンカーネーム">

ページ内部にリンク

説明
ページ内に<a name="アンカーネーム"></a>などと記述すると、「しおり」のようなものを設定することが出来ます。閉じタグ</a>を忘れないように注意しましょう。
リンクするには<a href="#アンカーネーム">などと#を付けて<a>タグを記述します。
ソース
実行結果
しおり1


しおり1へ
しおり2へ


しおり2



使用例(メール編)

<a href="mailto:メールアドレス?subject=メールの題名&body=本文">
メールアドレス
送信先のメールアドレスを入力します。世の中にはWEBを自動で巡回してスパムメールを送りつけるソフトがあったり、WEBを見たユーザーのPCがウイルスに感染していると勝手にウイルスメールを送りつけられたりすることがあります。メールアドレスの公開は慎重に行いましょう。あえてリンクタグにせず、アドレスだけテキストとして公開しておくのもウイルスメールを防ぐ方法の一つです。
メールの題名
これを設定しておくとメーラーが立ち上がると自動的にメールの題名が入ります。「HPからの問い合わせ」「注文メール」などと入れておくと便利になるケースがあるやも知れません。
本文
これを設定しておくとメールの本文が自動的に入ります。なお、題名や本文は省略可能です。

リンクをクリックするとメーラーが立ち上がる

説明
<a>○○</a>の○○の部分にmailto:xxx@xxx.xxと入れるとクリックした人が書かれているアドレスにメールを書くことが出来ます。
ソース
実行結果
※メールは絶対に「送信」せず破棄して下さい(あて先不明で戻ってきてしまいますよ)。

メールに題名や本文を設定しておく

ソース
実行結果
※メールは絶対に「送信」せず破棄して下さい(あて先不明で戻ってきてしまいますよ)。