|
|
リンクの方法について説明します。
リンクには、<A>（アンカー）タグを使います。必ず</A>で閉じて下さい。
リンク方法としては、リンク先を別窓で表示するか、今のページをリンク先のページに置き換えるか、またフレームを使用している場合はフレーム内に表示する方法があります。
「Web site作成にあたって」のページでも説明していますが、フレームの中から別サイトへのリンクには、必ず target="
_top" 又は target=" _blank" を使うようにしましょう。
フレーム内のページにこのオプションを記述するのを忘れると、外部のサイトがフレーム内に取り込まれてしまいます。これは別に説明したように著作権の問題が生じてきますので、充分に注意を払いましょう。
IBM社のホームページビルダーを使用されてる方は、自分のサイト内のページへのリンクには「親ウィンドウ（target="
_blank"）」を、他のサイトへのリンクの場合は「全画面（target="
_top"）」を使うことを推奨します。この方法ですと新たな窓でリンク先が表示されませんし、ブラウザの「戻るボタン」や「次のボタン」を利用して今まで見ていたページに簡単に移動することができます。
5-1 他のページにリンクする方法です。
同じファイルにリンク先がある場合
リンク先が、リンクを書いているファイルを基準にして、一つ上の階層にある場合
リンク先が、リンクを書いているファイルを基準にして、二つ上の階層にある場合
リンク先が、リンクを書いているファイルを基準にして、一つ下の階層にある場合
| 階層が一つ上の場合には、 ．．/ をリンク先ページの前に付けます。 |
| 階層が二つ上の場合には、 ．．/．．/ をリンク先ページの前に付けます。 |
| 階層が一つ下の場合には、 階層の名前を記入し、／の後にリンク先ページの名前を書きます。 |
この方法は、画像やアイコンなどのイメージ素材を利用するときにも使いますので、覚えておきましょう。
5-2 リンクの色を変える方法
| 上のタグを<HEAD>と</HEAD>の間に書きます。この例では、リンクの記述すべてを10ポイントで表示し、かつ色は赤を指定しています。ポイント及び色を変えれば色々とバリエーションが広がります。 |
同じページのリンクアンカー全てに適用する場合は、次のようにまとめることも出来ます。
5-3 リンクのアンダーラインを消す方法
| text-decoration:NONE; と指定すればアンダーラインが消えます。これもタグを<HEAD>と</HEAD>の間に書きます。 |
同じページのリンクアンカー全てに適用する場合は、次のようにまとめることも出来ます。
5-4 マウスが乗ったときだけアンダーラインを表示する方法
| マウスが乗ったときのところを変更します。これもタグを<HEAD>と</HEAD>の間に書きます。 |
5-5 マウスが乗ったときにリンクの背景色を変更する方法
| マウスが乗ったときの背景色 BACKGROUND-COLOR を指定します。これもタグを<HEAD>と</HEAD>の間に書きます。 |
5-6 文字に触れただけでジャンプされる方法
URL部分にはリンク先のURLを。文字のところには適当な文書を記述します。
5-7 リンクに触れた時、カーソルを変える方法
URLの部分にはリンク先のURLを。タイプのところには下の表から選択してください。
| help | こんな感じになります |
| crosshair | こんな感じになります |
| move | こんな感じになります |
| text | こんな感じになります |
| wait | こんな感じになります |
| nw-resize | こんな感じになります |
その他のタイプです。
auto default hand e-resize ne-resize n-resize se-resize sw-resize s-resize w-risize
5-8 お気に入りに追加するボタンを作る方法
5-9 ボタンを利用してリンクを作る方法
5-10 ボタンに色を付けてリンクを作る方法
色については、カラーチャートを参照してください。
5-11 選択リストを作る方法
<option>文字を繰り返せば、何行でも作れます。
5-12 選択リストを利用してリンクを貼ることができます。
このように表示されます。
<option VALUE="URL">を繰り返せば、何行でも作れます。
5-13 メールへのリンク方法について
このように表示されます。文字をクリックすると、メーラーが起動します。
「メール下さい。」の文字を適当に変更してご利用下さい。
Web site作成講座 リンクについて