aタグ(リンク):ホームページ作成・基礎講座・HTML・CSS・javascript・SEO対策

超初心者でも簡単にできるホームページ作成HTML基礎講座 EasyStudyHTML-TOP

aタグ (リンク)についてサンプルで解説

ホームページ作成・HTML基礎・スタイルシート(CSS)・javascript・SEO対策



aタグ:リンク文字(画像)の設定 携帯リストマーク clear.gif
【解説】
文字や画像に対してリンクを設定
リンク文字(画像)の設定
<a href="(1)">(2)</a>
(1)URL(パス)
(2)リンク文字(画像)

リンク文字に背景色を指定
<a style="background-color: (1)">・・・</a>
(1)色指定・・・色コード参照

リンク先のウィンドウの指定
<a target="(1)">・・・</a>
(1)ターゲットキーワード
キーワード 意 味
_top 全画面
_blank 新しい(新規)ウィンドウ
_self 同じウィンドウ
_parent 親ウィンドウ
※リンク文字をクリックしてリンク先へ移動する際のウィンドウ設定です。

メール送信
<a href="mailto:(1)">・・・</a>
(1)送信先のメールアドレス
サンプルソ−ス
<a href="
../index.html">当サイトTOPへ</a>
 当サイトTOPへ という文字に"../index.html"へのリンクを張っています。
※任意のファイル名に置き換えて下さい。

サンプルソ−ス(背景色指定)
<a href="../index.html" style="background-color: #ff0000">当サイトTOPへ</a>

サンプルソース(メール送信)
お問合せは<a href="mailto:test_1@aofp.net?Subject=件名をお願いします">こちら</a>まで
pcリストマークサンプル表示
サンプルソ−ス(URL指定)
<a href="
http://www.yahoo.co.jp">yahoo表示</a>
 URL指定でyahooへのリンクです。
pcリストマークサンプル表示
ラベル(アンカー)を設定
<a name="(1)"></a>

同一ページ内へリンクします
<a href="#(2)">・・・</a>

他のページ内の指定位置へリンクします
<a href="(3)#(2)">・・・</a>
(1)ラベル(アンカー)名
(2)移動先のラベル名
(3)移動先のURL
※ラベルは頭に"#"が付きます。

リンクの説明(コメント表示)
<a title="(1)">・・・</a>
リンク文字にマウスを合わせるとコメント表示されます。
サンプルソ−ス
<a name="top">TOP</a>                 #TOPという文字に「top」というラベルを設定
<a href="#b">クリックするとbへ移動します</a>
<a name="b">飛び先「b」</a>               #bという文字に「b」というラベルを設定
<a href="#top">クリックするとTOPへ移動します</a>
<hr>
<a name="top">TOP</a>                 #TOPという文字に「top」というラベルを設定
<a href="#b" title="b へ移動します。">クリックするとbへ移動します</a>
<a name="b">移動先「b」</a>               #bという文字に「b」というラベルを設定
<a href="#top" title="top へ移動します。">クリックするとTOPへ移動します</a>
pcリストマークサンプル表示
リンク文字の色指定
<body link="(1)" alink="(2)" vlink="(3)">
(1)未リンクの文字色
(2)リンク中の文字色
(3)リンク済みの文字色
リンク文字に対して任意の色を付ける事ができます。

スタイルシート(CSS)で記述する事をお勧めします。

ページトップへ
TOP | 利用規約(免責) | お問合せ

Agora