超初心者でも簡単!あなたもできるHP作成!− Make easily  
|| トップページ || HTML || Style Sheet || リファレンス || Web素材 || Contact Us || サイトマップ || 初めての方 || 

フルパス 相対パス 同一フォルダ内
1階層上にリンク ページ内のリンク 画像リンク
別ページに自動でジャンプ セレクトボックスジャンプ ファイルにリンク
閉じるリンク リンクの色を変える 別ウィンドウを開く

リンク

このリファレンスの見方については「リファレンスの見方」をお読みください。

フルパス

フルパスとは絶対パスとも言い「http://7nk.com/fullpass.html」のようにどこに居ても変わらない位置を示します。
「http://」から始まるものや「/(スラッシュ)」で始まるものの2種類があります。
CGIを設置する場合は、こちらを使うことが多いです。
【HTMLタグ】(例)

<a href="http://7nk.com/fullpass.html">りんく</a>

相対パス

フルパスとは違い、「../image/image.jpg」のように、現在のファイルから見た位置関係を書くことを「相対パス」と言います。
ホームページを作る場合、こちらのパスを良く使います。
【HTMLタグ】(例)

<a href="../pass/fullpass.html">りんく</a>

同一フォルダ内

同じフォルダにあるファイルにリンクする場合は、ファイル名のみでリンクすることが出来ます。
【HTMLタグ】(例)

<a href="fullpass.html">りんく</a>

1階層上にリンク

上の階層を示す場合「../」を使います。
一階層上の場合は「../」、二階層上の場合は「../../」、三階層上の場合は「../../../」となります。
【HTMLタグ】一階層上のファイルにリンクする場合(例)

<a href="../fullpass.html">りんく</a>

ページ内のリンク

同じページ内にある特定の位置にリンクを張ることもできます。
ちょうどこのリファレンスの一番上にあるこのメニューのようなものです。
フルパス 相対パス 同フォルダ内

同じページにリンクする場合は、リンク先を <a name="リンク名">リンク文字</a>で囲み、
リンクには<a href="#リンク名">リンク文字</a> とします。

【HTMLタグ】(例)

<a href="#full">フルパス</a>  <a href="#pass">相対パス</a> 


<a name="full">フルパス</a>とは絶対パスとも言い「http://7nk.com/fullpass.html」のようにどこに居ても変わらない位置を示します。

画像リンク

リンクは文字だけでなく、画像にもリンクをはることが出来ます。
画像にリンクをはるには、画像ファイル名をリンクタグではさみます。
画像にリンクをはると自動的にリンクの線が表示されるので、線を消したい場合は「border="0"」をつけておきます。
【HTMLタグ】(例)

<a href="link.html"><img src="img/image.jpg" border="0"></a>

別ページに自動でジャンプ

別のページに自動でジャンプさせるには、METAタグでジャンプ先と時間をセットしておきます。
【HTMLタグ】(例)0秒でyahooにジャンプさせる

<meta http-equiv="Refresh" content="0; url=http://www.yahoo.co.jp/">

「content="0;」でジャンプするまでの秒数をセットします。
「 url=・・・・」でジャンプ先のアドレスをセットします。

セレクトボックスジャンプ

セレクトボックスとは このようなプルダウンメニューなどのことをいいます。
【HTMLタグ】(例)

<select onchange="location.href=this.options[this.selectedIndex].value">
<option value="#">検索サイトにジャンプ
<option value="http://www.yahoo.co.jp/">Yahoo
<option value="http://www.google.co.jp/">Google
<option value="http://www.infoseek.co.jp/">Infoseek
</select>

セレクトボックスを表示させたい場所に、
<select onchange="location.href=this.options[this.selectedIndex].value"> 
   ・
   ・
</select>
の間にジャンプさせたいリンク先を記入します。

<option value="#"> にはデフォルトで表示したいものをセットします。
次に <option value="ジャンプ先のアドレス">リンク先名 でジャンプさせたいアドレスを追加していきます。

ファイルにリンク

エクセルやワード、PDFなどのファイルにリンクすることができます。
パソコンにソフトがインストールされている場合は、自動的にソフトが起動してファイルが開きます。
【HTMLタグ】

(例)ワードにリンク
<a href="word.doc">ワードファイル</a>

(例)PDFにリンク
<a href="file.pdf">PDFファイル</a>

閉じるリンク

別画面で開いたページに「閉じる」リンクを付けることができます。
【HTMLタグ】(例)

<a href="#" onclick="window.close()">[閉じる]</a>

[閉じる]のテキストを画像に変えることもできます。

リンクの色を変える

リンク部分のテキストの色を変えることができます。
【HTMLタグ】
リンクの色を緑
訪問済みリンクを青
クリック中のリンクを紫に指定 (改行しないで一行で書いてください)

<body text="#CCCCCC" bgcolor="#CCFFCC" link="#006600" vlink="#0000FF" alink="#990066">
     ・
     ・
     ・
</body>

インラインでは、リンクのスタイルシートの記述はできません。
ヘッダ部分及び外部ファイルを使ってください。
スタイルシートを使えば、さらにマウスを乗せたときの色を変えることができます。
【スタイルシートヘッダ、外部ファイル】

a:link { color: #006600; }     ←リンクの色
a:visited { color: #0000FF; }     ← 訪問済の色
a:active { color: #990066; }     ← クリック中の色
a:hover { color: #FF6600; }      ← マウスを乗せたときの色


<body>
     ・
     ・
     ・
</body>
▲このページのトップに戻るTop