５−１．リンク

（補足）
target="_blank"　を削ると、同じ窓（ウインドウ）で開くようになります。

（注1）このタグは、２つでワンセット？です。あるページの特定部分（ページの中段とか）や、同一ページ内でのリンクに使用します。（別のページの特定部分でも出来ます。）
まず、リンクさせたい文字や、画像などの部分にアンカー名のタグを書きます。（アンカー名は、お好きな半角英数字でＯ．Ｋ）そして、後は、通常と同じようにリンクすれば、完成です。（解りにくいと思うので、サンプルを出しときますね）
なお、同一ページ内で使用する場合は、「アンカー名を指定したページのURL」を省略しても、大丈夫です。２．の場合は、どこのページにこのタグを書いても、ちゃんと、リンクできます。
（注2）　window.open('URL')　で、新しい窓（ウインドウ）で開き、　parent.location='URL'　で、同じ窓（ウインドウ）で開きます。また、８−１．ボタンや、８−２．ボタンのコメント編を組み合わせることによって、アレンジも可能です。応用編も参考にしてみてね。
また、コメント文字を改行する場合は、（コメントの文字・最初のクリックした時の文字・OKの文字・キャンセルの文字）半角の　\n　が　<br>　の役目を果たして、改行タグになります。

（例）おっは〜\nおやすみぃ〜（コメント文字の場合）　＝　おっは〜<br>おやすみぃ〜（通常の場合）
青い文字の部分は、タグを識別する部分です。青い文字が入っているタグを同一ページに複数個つかう場合には、青い部分をそれぞれ、お好きな半角英数字に変更して下さい。通常は、変更しなくて大丈夫です。変更する場合は、小さな「．」まで消さない様に注意して下さいね。

赤い文字の部分を変更してコピー貼り付けで使ってね！
文字をクリックして同じ窓でリンク<a href="URL">文字</a>
文字をクリックして新しい窓でリンク<a href="URL" target="_blank">文字</a>
特定の場所へのリンク(アンカー指定)（注1）<a name="アンカー名（半角英数字）">文字（タグ）</a>
特定の場所へのリンク（アンカー指定へのリンク）（注1）<a href="アンカー名を指定したページのURL#アンカー名">文字</a>
文字をクリックして同じ窓でリンク（下線なし）<a href="URL" style="text-decoration:none">文字</a>
文字をクリックして新しい窓でリンク（下線なし）<a href="URL" target="_blank" style="text-decoration:none">文字</a>
リンクの文字色を変える<a href="URL" target="_blank" style="text-decoration:none;color:#文字色">文字</a>
リンクの文字色＆背景色を変える<a href="URL" target="_blank" style="text-decoration:none;color:#文字色;background-color:#背景色">文字</a>
画像をクリックして同じ窓でリンク<a href="URL"><img src="画像のURL"></a>
画像をクリックして新しい窓でリンク<a href="URL" target="_blank"><img src="画像のURL"></a>
画像をクリックして同じ窓でリンク（枠なし）<a href="URL"><img src="画像のURL" border="0"></a>
画像をクリックして新しい窓でリンク（枠なし）<a href="URL" target="_blank"><img src="画像のURL" border="0"></a>
ボタンでリンク（注2）<input type="button" value="ボタンの文字" style="border-color:#ボタンの枠の色;background:#ボタンの背景色;color:#文字の色" onClick="window.open('URL')">
アドレスを入力してボタンでリンク<input type="text" value="http://" size="60" id="ad"><input type="button" value="ボタンの文字" onclick="window.open(ad.value)">
フォーム説明でリンク<form name="pega"><input type="texe" name="ex" size="フォームの大きさ" value="最初の文字"></form><a href="URL１" onmouseover="document.pega.ex.value='１の説明'" target="_blank">１の文字</a>　<a href="URL２" onmouseover="document.pega.ex.value='２の説明'" target="_blank">２の文字</a>
ＯＮマウスで文字の背景色が変わるリンク<a href="URL" target="_blank" style="font-size:文字の大きさ;color:#文字色" onmouseover="this.style.background='#ＯＮマウス時の背景色'" onmouseout="this.style.background='#マウスを離すと変わる背景色'">文字</a>
ＯＮマウスで文字色が変わるリンク<a href="URL" target="_blank" style="font-size:文字の大きさ;color:#最初の文字色" onmouseover="this.style.color='#ＯＮマウス時の文字色'" onmouseout="this.style.color='#マウスを離すと変わる文字色'">文字</a>
ＯＮマウスで文字が変わるリンク<a href="URL" target="_blank" style="font-size:文字の大きさ;color:#最初の文字色" onmouseover="this.style.color='#ＯＮマウス時の文字色';this.innerText='ＯＮマウス時の文字'" onmouseout="this.style.color='#マウスを離すと変わる文字色';this.innerText='マウスを離すと変わる文字'">文字</a>
プルダウンメニュー同じ窓でリンク<form name="list"><select name="op" onchange="top.location.href(document.list.op.options[document.list.op.selectedIndex].value)"><option selected>セレクトリストの最初の文字<option value="URL１">１の文字<option value="URL２">２の文字<option value="URL３">３の文字</select></form>
プルダウンメニュー同じ窓でリンク(ボタン編)<form name="list1"><select name="op1"><option selected>セレクトリストの最初の文字<option value="URL１">１の文字<option value="URL２">２の文字<option value="URL３">３の文字</select>　<input type="button" value="ボタンの文字" onClick="top.location.href(document.list1.op1.options[document.list1.op1.selectedIndex].value)"></form>
プルダウンメニュー新しい窓でリンク<form name="list2"><select name="op2" onchange="window.open(document.list2.op2.options[document.list2.op2.selectedIndex].value)"><option selected>セレクトリストの最初の文字<option value="URL１">１の文字<option value="URL２">２の文字<option value="URL３">３の文字</select></form>
プルダウンメニュー新しい窓でリンク(ボタン編)<form name="list3"><select name="op3"><option selected>セレクトリストの最初の文字<option value="URL１">１の文字<option value="URL２">２の文字<option value="URL３">３の文字</select>　<input type="button" value="ボタンの文字" onClick="window.open(document.list3.op3.options[document.list3.op3.selectedIndex].value)"></form>
文字に触れて説明の出るリンク<a href="URL" target="_blank" title="説明の文字">文字</a>
文字に触れるだけでリンク<a href="kabonochihare" onmouseover="location.href='URL'">文字</a>
ボタンを押してコメントが出た後、新しい窓でリンク（注2）<input type="button" value="ボタンの文字" onClick="{alert('コメントの文字')};window.open('URL')">
ボタンを押してコメントが出た後、同じ窓でリンク（注2）<input type="button" value="ボタンの文字" onClick="{alert('コメントの文字')};parent.location='URL'">
二択コメントのボタンでＯ．Ｋ選択時、新しい窓でリンク（注2）<input type="button" value="ボタンの文字" onClick="if(confirm('最初のクリックした時の文字')){alert('OKの文字');window.open('URL')}else{alert('キャンセルの文字')}">
二択コメントのボタンでＯ．Ｋ選択時、同じ窓でリンク（注2）<input type="button" value="ボタンの文字" onClick="if(confirm('最初のクリックした時の文字')){alert('OKの文字');parent.location='URL'}else{alert('キャンセルの文字')}">
上記の応用編（キャンセル選択時は、新しい窓でリンク）（注2）<input type="button" value="ボタンの文字" onClick="if(confirm('最初のクリックした時の文字')){alert('OKの文字');parent.location='Ｏ．Ｋ時のURL'}else{alert('キャンセルの文字');window.open('キャンセル時のURL')}">
文字をクリックでメ−ルソフト起動<a href="mailto:メアド">文字</a>



HTMLタグに戻る