MAJIDEKA.COM－リンク

　リンクを貼るには、<a>タグにhref属性を指定します。
　同じホームページの他のページや他のホームページにジャンプさせたいときには<a>タグを使用します。
　href="～"の""内にはリンク先のURLを記述します
　例えば、テキストエディタに下記のような記述をしてから、ブラウザで確認してください。
　下記の例では、リンク先が上から順に他のホームページ、同じホームページの他のページ、同じフォルダ内のページ、１つ上のフォルダ内のページへとなっています。
　　<a href="http://majideka.web.fc2.com/majideka/index.html">他のホームページ</a><br> <a href="majideka/index.html">同じホームページ内の他のページ</a><br> <a href="index.html">同じフォルダ内のページ</a><br> <a href="../index.html">１つ上のフォルダ内のページ</a>
　ブラウザにはこのように表示されます。

ページの途中へリンクするには

・<a>タグにname属性を指定してページの途中へリンクする方法

　ページの途中へリンクするには、<a>タグにname属性を指定します。
　ページ内のリンク先には<a name="～">～</a>と記述します。
　その際name="～"の""内にはページ内のリンク先を記述してください。
　リンクテキストには<a href="xxx.html#～">～</a>と記述します。
　その際href="xxx.html#～"の～にはページ内のリンク先を記述してください。
　例えば、テキストエディタに下記のような記述をしてから、ブラウザで確認してください。
　　<a name="page_top">ページトップ</a> <a href="link_page.html#page_top">▲ページトップへ</a>
　ブラウザにはこのように表示されます。

画像をリンクボタンにするには

・<img>タグを<a>タグで囲んで画像をリンクボタンにする方法
　　　　　　　　　　　　　　　　　　　　　　　　 (<input type="button" onclick="location.href='～'">)

　画像をリンクボタンにするには、<img>タグを<a>タグで囲みます。
　href="～"の""内にはリンク先のURLを記述してください
　例えば、テキストエディタに下記のような記述をしてから、ブラウザで確認してください。
　　<a href="http://majideka.web.fc2.com/"> <img src="xxx.gif" alt="xxx" width="100" height="100" border="0"> </a>
　ブラウザにはこのように表示されます。

▲ページトップへ

ボタンをリンクボタンにするには

・<input>にonclick属性にlocation.hrefを指定する方法
　　　　　　　　　　　　　　　　　　　　　　　　 (<input type="button" onclick="location.href='～'">)

　ボタンをリンクボタンにするには、<input>にonclick属性にlocation.hrefを指定します。
　onclick="location.href='～'"の''内にはリンク先のURLを記述してください
　例えば、テキストエディタに下記のような記述をしてから、ブラウザで確認してください。
　　<form> <input type="button" value="MAJIDEKA.COM" onclick="location.href='http://majideka.web.fc2.com/'"> </form>
　ブラウザにはこのように表示されます。

リンクボタンの内容を変更するには

・<input>にstyle属性を指定する方法

　リンクボタンの内容を変更するには、<input>にstyle属性を指定します。
　onclick="location.href='～'"の''内にはリンク先のURLを記述してください
　例えば、テキストエディタに下記のような記述をしてから、ブラウザで確認してください。
　　<form> <input type="button" value="トップ" onclick="location.href='http://majideka.web.fc2.com/'" style="background: #00ff00; width: 220px; height: 35px; font-size: 18pt; font: bold; color: #ffffff; border: 5px outset;"> </form>
　ブラウザにはこのように表示されます。

セレクトボックスからリンクさせるには

・<input>にonchange属性を指定する方法

　セレクトボックスからリンクさせるには、<input>にonchange属性を指定します。
　value="～"の""内にはリンク先のURLを記述してください
　例えば、テキストエディタに下記のような記述をしてから、ブラウザで確認してください。
　　<form> <select onchange="location.href=this.options[this.selectedIndex].value"> <option value="#">MAJIDEKA.COMへジャンプ <option value="http://majideka.web.fc2.com/">トップページ <option value="http://majideka.web.fc2.com/course.html">HTML作成講座ページ <option value="http://majideka.web.fc2.com/link.html">リンクページ </select> </form>
　ブラウザにはこのように表示されます。

▲ページトップへ

・JavaScriptを使用してセレクトボックスからリンクさせる方法

セレクトボックスからリンクさせるには、JavaScriptを使用します。
　value="～"の""内にはリンク先のURLを記述してください
　例えば、テキストエディタに下記のような記述をしてから、ブラウザで確認してください。
　　<html> <head> <title>セレクトボックスでリンク２</title> <script type="text/javascript">  </script> </head> <body> <form> <select onchange="navi(this)"> <option value="">MAJIDEKA.COMへジャンプ <option value="http://majideka.web.fc2.com/">トップページ <option value="http://majideka.web.fc2.com/course.html">HTML作成講座ページ <option value="http://majideka.web.fc2.com/link.html">リンクページ </select> </form> </body> </html>
　ブラウザにはこのように表示されます。

ボタンクリックでセレクトボックスからリンクさせるには

・<input>にonclick属性を指定する方法

　ボタンクリックでセレクトボックスからリンクさせるには、<input>にonclick属性を指定します。
　value="～"の""内にはリンク先のURLを記述してください
　例えば、テキストエディタに下記のような記述をしてから、ブラウザで確認してください。
　　<form name="xxx"> <select name="yyy"> <option value="#">MAJIDEKA.COMへジャンプ <option value="http://majideka.web.fc2.com/">トップページ <option value="http://majideka.web.fc2.com/course.html">HTML作成講座ページ <option value="http://majideka.web.fc2.com/link.html">リンクページ </select> <input type="button" value="Click" onclick="location.href=document.xxx.yyy.options[document.xxx.yyy.selectedIndex].value"> </form>
　ブラウザにはこのように表示されます。

▲ページトップへ

・JavaScriptを使用してボタンクリックでセレクトボックスからリンクさせる方法

ボタンクリックでセレクトボックスからリンクさせるには、JavaScriptを使用します。
　value="～"の""内にはリンク先のURLを記述してください
　例えば、テキストエディタに下記のような記述をしてから、ブラウザで確認してください。
　　<html> <head> <title>セレクトボックス＆ボタンでリンク２</title> <script type="text/javascript">  </script> </head> <body> <form method="post"> <select name="navi"> <option value="">MAJIDEKA.COMへジャンプ <option value="http://majideka.web.fc2.com/">トップページ <option value="http://majideka.web.fc2.com/course.html">HTML作成講座ページ <option value="http://majideka.web.fc2.com/link.html">リンクページ </select> <input type="button" value="Click" onclick="location.href=this.form.navi.options[this.form.navi.selectedIndex].value"> </form> </body> </html>
　ブラウザにはこのように表示されます。

直前のページへ戻るリンクを貼るには

・<a>タグにhref属性にjavascript: history.back()を指定する方法
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　(<a href="javascript: history.back()">～</a>)

　直前のページへ戻るリンクを貼るには、<a>タグにhref属性にjavascript: history.back()を指定します。
　例えば、テキストエディタに下記のような記述をしてから、ブラウザで確認してください。
　　<a href="javascript: history.back()">[戻る]</a>
　ブラウザにはこのように表示されます。

・<a>タグにhref属性にjavascript: history.go(-n)を指定する方法
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　(<a href="javascript: history.go(-n)">～</a>)

　直前のページへ戻るリンクを貼るには、<a>タグにhref属性にjavascript: history.go(-n)を指定します。
　history.go(-n)のnには戻る数だけ記入します。また正の数を記入するとその分進みます。
　例えば、テキストエディタに下記のような記述をしてから、ブラウザで確認してください。
　　<a href="javascript: history.go(-1)">[戻る]</a>
　ブラウザにはこのように表示されます。

ボタンクリックで直前のページへ戻るには

・<input>タグにonclick属性にlocation.hrefを指定する方法
　　　　　　　　　　(<input type="button" onclick="location.href='javascript: history.back()'">)

　ボタンクリックで直前のページへ戻るには、<input>タグにonclick属性にlocation.hrefを指定します。
　例えば、テキストエディタに下記のような記述をしてから、ブラウザで確認してください。
　　<form> <input type="button" value="戻る" onclick="location.href='javascript: history.back()'"> </form>
　ブラウザにはこのように表示されます。

▲ページトップへ

別ページへ自動ジャンプさせるには

・<meta>タグを使用して別ページへ自動ジャンプさせる方法
　　　　　　　 (<meta http-equiv="refresh" content="n; url=http://majideka.web.fc2.com/">)

　別ページへ自動ジャンプさせるには、<meta>タグを使用します。
　content="n"のnには自動ジャンプさせるまでの時間(秒)を記入します。
　url=～"の="内にはリンク先のURLを記述してください
　例えば、テキストエディタに下記のような記述を<head>～</head>の間にしてから、ブラウザで確認してください。
　　<meta http-equiv="refresh" content="10; url=http://majideka.web.fc2.com/">
　ブラウザにはこのように表示されます。

・JavaScriptを使用して別ページへ自動ジャンプさせる方法

別ページへ自動ジャンプさせるには、<meta>タグを使用します。
　setTimeout ("autoLink()", n)のnには自動ジャンプさせるまでの時間を記入します。
　この場合のnは、10秒である場合には10000と記入してください。
　location.href="～"の""にはリンク先のURLを記述してください
　例えば、テキストエディタに下記のような記述を<head>～</head>の間にしてから、ブラウザで確認してください。
　　<script type="text/javascript">  </script>
　ブラウザにはこのように表示されます。

リンクテキストに触れただけでリンク先へジャンプさせるには

・<a>タグにonmouseover属性を指定する方法
　　　　　　　　　　　　　　　 (<a href="#" onmouseover="document.location.href='～'">～</a>)

　リンクテキストに触れただけでリンク先へジャンプさせるには、<a>タグにonmouseover属性を指定します。
　location.href='～'の''内にはリンク先のURLを記述してください
　例えば、テキストエディタに下記のような記述をしてから、ブラウザで確認してください。
　　<a href="#" onmouseover="document.location.href='http://majideka.web.fc2.com/'">MAJIDEKA.COMへジャンプ</a>
　ブラウザにはこのように表示されます。

ページを更新させるには

・<a>タグにhref属性にjavascript: history.go()を指定する方法
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 (<a href="javascript: history.go()">～</a>)

　ページを更新させるには、<a>タグにhref属性にjavascript: history.go()を指定します。
　例えば、テキストエディタに下記のような記述をしてから、ブラウザで確認してください。
　　<a href="javascript: history.go()">[更新]</a>
　ブラウザにはこのように表示されます。

▲ページトップへ

ボタンクリックでページを更新させるには

・<input>タグにonclick属性にlocation.hrefを指定する方法
　　　　　　　　　　　 (<input type="button" onclick="location.href='javascript: history.go()'">)

　ボタンクリックでページを更新させるには、<input>タグにonclick属性にlocation.hrefを指定します。
　例えば、テキストエディタに下記のような記述をしてから、ブラウザで確認してください。
　　<form> <input type="button" value="更新" onclick="location.href='javascript: history.go()'"> </form>
　ブラウザにはこのように表示されます。

ページを自動更新させるには

・<meta>タグを使用してページを自動更新させる方法(<meta http-equiv="refresh" content="n">)

　ページを自動更新させるには、<meta>タグを使用します。
　content="n"のnには自動更新させるまでの時間(秒)を記入します。
　例えば、テキストエディタに下記のような記述を<head>～</head>の間にしてから、ブラウザで確認してください。
　　<meta http-equiv="refresh" content="10">
　ブラウザにはこのように表示されます。

WordやExcelなどの文書を開くには

・<a>タグにhref属性にWordやExcelなどのファイル名を指定する方法(<a href="xxx.doc">～</a>)

　WordやExcelなどの文書を開くには、<a>タグにhref属性にWordやExcelなどのファイル名を指定します。
　例えば、テキストエディタに下記のような記述をしてから、ブラウザで確認してください。
　　<a href="xxx.doc">MAJIDEKA文書</a>
　ブラウザにはこのように表示されます。

リンクの表示先を一括で指定するには

・<base>タグにtarget属性を指定する方法(<base target="_～">)

　リンクの表示先を一括で指定するには、<base>タグにtarget属性に_～を指定します。
　target="_～"の_～には_self、_blank、_topのいずれかを記述します。
　_selfは同じウィンドウへ、_blankは別ウィンドウへ、_topはフレームから通常のウィンドウへと表示します。
　テキストエディタには<head>～</head>の間に記述します。

▲ページトップへ

ウィンドウを[閉じる]リンクを貼るには

・<a>タグにonclick属性にwindow.close();を指定する方法
　　　　　　　　　　　　　　　　　　　　　　　　(<a href="#" onclick="window.close();">[閉じる]</a>)

　ウィンドウを[閉じる]リンクを貼るには、<a>タグにonclick属性にwindow.close();を指定します。
　例えば、テキストエディタに下記のような記述をしてから、ブラウザで確認してください。
　　<a href="#" onclick="window.close();">[閉じる]</a>
　ブラウザにはこのように表示されます。

・<a>タグにhref属性にjavascript: window.close();を指定する方法
　　　　　　　　　　　　　　　　　　　　　　　　 (<a href="javascript: window.close();">[閉じる]</a>)

　リンクを指定した位置に表示するには、<a>タグにstyle属性にposition; absoluteを指定します。
　例えば、テキストエディタに下記のような記述を<body>～</body>の間にしてから、ブラウザで確認してください。
　　<a href="javascript: window.close();">[閉じる]</a>
　ブラウザにはこのように表示されます。

時間帯別にリンクを貼るには

・JavaScriptを使用して時間帯別にリンクを貼る方法

時間帯別にリンクを貼るには、JavaScriptを使用します。
　jump[n]="～"の～にはリンク先のURLを記述してください。
　例えば、テキストエディタに下記のような記述を<body>～</body>の間にしてから、ブラウザで確認してください。
　　<script type="text/javascript">  </script>
　ブラウザにはこのように時間帯で指定したブラウザが表示されます。

▲ページトップへ

ランダムなリンクを貼るには

・JavaScriptを使用してランダムなリンクを貼る方法

ランダムなリンクを貼るには、JavaScriptを使用します。
　linkCount=nにはランダムに表示するリンクの数を記入してください
　theURL[n]="～"の""にはリンク先のURLを記述してください
　例えば、テキストエディタに下記のような記述をしてから、ブラウザで確認してください。
　　<html> <head> <title>ランダムリンク</title> <script type="text/javascript">  </script> </head> <body> <a href="javascript: randomJump()">ランダムにジャンプ</a> </body> </html>
　ブラウザにはこのように表示されます。

リンクを指定した位置に表示するには

・<a>タグにstyle属性にposition; absoluteを指定する方法
　　　　　　　　　　　　　　　　　　　　　　　　　　(<a href="～" style="position: absolute">～</a>)

　リンクを指定した位置に表示するには、<a>タグにstyle属性にposition; absoluteを指定します。
　例えば、テキストエディタに下記のような記述を<body>～</body>の間にしてから、ブラウザで確認してください。
　　<a href="http://majideka.web.fc2.com/" style="position: absolute; top: 100px; left: 250px;"> MAJIDEKA.COMへジャンプ</a>
　ブラウザにはこのように表示されます。

ボタンクリックでリンクを指定した位置に表示するには

・JavaScriptを使用してボタンクリックでリンクを指定した位置に表示する方法

ボタンクリックでリンクを指定した位置に表示するには、JavaScriptを使用します。
　例えば、テキストエディタに下記のような記述を<body>～</body>の間にしてから、ブラウザで確認してください。
　　<script type="text/javascript">  </script> <a href="http://majideka.web.fc2.com/" id="string1" style="position: absolute; visibility: hidden; top: 100px; left: 250px;"> MAJIDEKA.COMへジャンプ</a> <form> <input type="button" value="Click" onclick="klicken('string1')"> </form>
　ブラウザにはこのように表示されます。

▲ページトップへ

Copyright (c) 2006～ MAJIDEKA.COM. All Rights Reserved.