STEP7 : リンクをはる 7-1 リンクのはりかた第6回まででだいぶページを作れるようになりましたね＾＾
そろそろ２ページ目、３ページ目に取り掛かっている方もいるでしょう。
そこで、今回はリンクの貼り方を覚えましょう。
リンクとはページとページをくっつけるようなことで、 リンクをクリックすると、リンク先のページへ移動することができます。
例えばここをクリックすると、STEP6のページへ行くことができます。
リンクをはるには、次のようなタグを使います。
| <a href="リンク先のアドレス">〜</a> |
リンクを設定した文字の下線をなくしたい方は、次のように書き加えてください。
| <a href="リンク先のアドレス" STYLE="text-decoration:none"> |
また、このように
画像にリンクを設定することもできます＾＾画像にリンクを設定するには、上の例の〜の部分に第６回で覚えた方法で画像を表示させればOKです。
| <a href="リンク先のアドレス"><img src="画像ファイルのURL"></a> |
ところが、実際に上の方法で画像にリンクを設定した場合、 画像の周りに枠が表示されてしまいます。
| 元の画像 | リンクをはると・・・ |
|
|
枠があるとちょっとかっこ悪くなってしまうことも多いですよね？
そんな時はちょっと手を加えて枠をなくしてしまいましょう。
この場合の枠の設定の方法は第６回で画像の枠を設定したやり方といっしょです。
imgタグ内でborder属性を設定してあげればよかったですね＾＾
枠をなくすには、下のようにborderの値を0にします。
| <a href="リンク先のアドレス"><img src="画像のURL" border="0"></a> |
| 元の画像 | リンクをはると・・・ |
|
|
7-2 マーカーを使うリンクといっても他のページを開くばかりではありません。
同じページのほかの場所に移るリンクを作ることもできます。
例えばここをクリックするとこのページの7-1の項目にジャンプします。
まずはジャンプしたい場所に印をつけます。この印をマーカーといいます。
| <a name="印の名前"> |
あとは普通にリンクをはる要領で、アドレスを#印の名前とします。
| <a href="#印の名前">〜</a> |
また、他のページのマーカーにジャンプしたい時は
リンク先のページのURLに続けて#印の名前を加えればOKです。
| <a href="リンク先のページのURL#印の名前">〜</a> |
7-3 リンク先の開き方を指定するいろいろなサイトを見て回っていると、リンクによって 同じウィンドウでリンク先が表示されたり
新しいウィンドウが開いてリンク先が表示されたりしますよね
これらを使い分けることで見やすいHPを作ることができます。
この設定は、リンク先のアドレスのうしろに続けて、target属性を加えることで行います。
| <a href="リンク先のアドレス" target="属性値"> |
targetの属性値はそれぞれ次のようになっています。
| 属性値 | リンク先の開き方 |
| _self | 同じウィンドウで開く（指定しない時と同じ |
| _blank | 新しいウィンドウで開く |
| _top | フレームから普通の窓へ （フレームについては後のほうで説明します） |
| 任意の名前 | 別フレームに表示 （フレームについては後のほうで説明します） |
他のサイトさまへのリンクは新しいウィンドウで開くと便利なことが多いです。
自分のサイト内での移動にも活用していただきたいですが、なんでもかんでも新しいウィンドウが開いてしまうと逆効果になってしまうので、うまく使い分けてくださいね＾＾