 |
aタグ （リンク）についてサンプルで解説
ホームページ作成・HTML基礎・スタイルシート（CSS)・javascript・SEO対策
|
|
■ａタグ：リンク文字（画像）の設定  |
 |
|
【解説】
文字や画像に対してリンクを設定 |
リンク文字（画像）の設定
<a href="（1）">（2）</a>
（1）ＵＲＬ（パス）
（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">当サイトＴＯＰへ</a>
当サイトＴＯＰへ という文字に"../index.html"へのリンクを張っています。
※任意のファイル名に置き換えて下さい。
サンプルソ−ス（背景色指定）
<a href="../index.html" style="background-color: #ff0000">当サイトＴＯＰへ</a>
サンプルソース（メール送信）
お問合せは<a href="mailto:test_1@aofp.net?Subject=件名をお願いします">こちら</a>まで |
 サンプル表示 |
サンプルソ−ス（ＵＲＬ指定）
<a href="http://www.yahoo.co.jp">yahoo表示</a>
URL指定でyahooへのリンクです。 |
| サンプル表示 |
ラベル（アンカー）を設定
<a name="（1）"></a>
同一ページ内へリンクします
<a href="#（2）">・・・</a>
他のページ内の指定位置へリンクします
<a href="（3）#（2）">・・・</a>
（1）ラベル（アンカー）名
（2）移動先のラベル名
（3）移動先のＵＲＬ
※ラベルは頭に"#"が付きます。
リンクの説明（コメント表示）
<a title="（1）">・・・</a>
リンク文字にマウスを合わせるとコメント表示されます。 |
サンプルソ−ス
<a name="top">ＴＯＰ</a> ＃ＴＯＰという文字に「top」というラベルを設定
<a href="#b">クリックするとbへ移動します</a>
<a name="b">飛び先「ｂ」</a> ＃ｂという文字に「b」というラベルを設定
<a href="#top">クリックするとTOPへ移動します</a>
<hr>
<a name="top">ＴＯＰ</a> ＃ＴＯＰという文字に「top」というラベルを設定
<a href="#b" title="b へ移動します。">クリックするとbへ移動します</a>
<a name="b">移動先「ｂ」</a> ＃ｂという文字に「b」というラベルを設定
<a href="#top" title="top へ移動します。">クリックするとTOPへ移動します</a> |
| サンプル表示 |
リンク文字の色指定
<body link="（1）" alink="（2）" vlink="（3）">
（1）未リンクの文字色
（2）リンク中の文字色
（3）リンク済みの文字色
リンク文字に対して任意の色を付ける事ができます。
※スタイルシート（CSS）で記述する事をお勧めします。 |
|
|
|
ページトップへ |