簡単ホームページをメモ帳で作ろうよ

第１5回：リンクを作ろう（その１）

＜nifty:FROM40PC/MES/11/1XXX＞

＜リンクの作り方　その１　この時期は、やっぱスケートリンクか。＞ (^_^;
こわい映画でしたね、リンク。（そりゃ、リングやろ）

今回からリンクの書き方に移ります。前にちょっとだけ登場したはずですが、リンクを作りたい場所（テキストや画像）をアンカータグ<A HREF="">～</A>でサンドイッチするのが基本です。先に一気にパターンを紹介して、最後にタグのサンプルを書いてみようと思います。

その１）テキストにリンクを張る（別ファイルへ、または URLへ）
<A HREF="リンク先のファイル名またはURL">テキスト</A>

このように書きます。A は Anchor アンカーの意味ですね。HREF はプロローグ編で書いたと思いますが、その時に登場したハイパーリファレンスの略でしょう。上のサンプルの場合、本文の中の「テキスト」の文字をクリックすると"リンク先" にジャンプするようになります。リンク先にはファイル名を書いても良いですし、URLを書いても構いません。URLってのは、例の http://www～のこと。
では、確認です。次のタグが何を表しているか、お分かりですね。(^_^)

<A HREF="links.htm">リンクの部屋</A>
本文の「リンクの部屋」の文字をクリックすると、ホームページサーバー上のlinks.htm というファイルにジャンプしてその内容を表示してくれます。なお、links.htmと、そこへのリンクを張るファイルは同じ場所（ディレクトリ）にないといけません。また、リンクを有効にすると、標準ではその部分の文字が青色に変化します。これを別の色に指定する方法は、応用編にて書こうと思います。

<A HREF="http://www.nifty.ne.jp/forum/from40pc/">ふろよんの部屋</A>
「ふろよんの部屋」の文字をクリックすると、FROM40PCのサイトへアクセスします。URLを記述するときは、間違いのないようにしましょう。大文字と小文字を間違えると、ブラウザにエラーが表示されます。

その２）画像にリンクを張る
<A HREF="links.htm"><IMG SRC="links.gif"></A>

上のように書くと、links.gif という画像（アイコン）をリンクボタンとして使うことができ、この画像をクリックすると links.htm にジャンプするようになります。リンクのタグと画像のタグの合わせ技ですね。(^_^)なお、リンクを設定すると画像の周囲に青い線が出来ますので、目障りな場合は前に習った画像のborder属性を付けて、<IMG SRC="links.gif" border=0>などとしましょう。線が消えます。

このあとのサンプルタグをブラウザで開いた例です。

その３）リンク先を新たにブラウザのウィンドウを開いて表示させる
<A HREF="links.htm" target=_blank>リンクの部屋</A>

さて、今度はリンク先の内容を別にブラウザを開いて表示させてみます。普通にリンクを書くと、ブラウザの同一ウィンドウの中にリンク先が表示されますが、リンクタグにも属性を付けることで別にブラウザのウィンドウを開いて表示させることができます。フレームの中のウィンドウを指定することも可能ですが、今回は触れません。機会があれば応用講座のほうで扱いたいと思います。

この時に登場するのが、ターゲット属性です。target=_blank という部分がそれです。これをリンクタグの後ろに追加すると別のウィンドウにリンク先が新しく表示されます。_self とか _top などもありますが、これらはフレームを使用する場合に必要になります。

リンクをクリックすると、このように別にブラウザウィンドウが開くようになります。

その４）同一ページ内でのリンクを作る（ページが縦長の場合に有効）
<A HREF="#キーワード">ふろよん自作講座のご案内</A>
（省略）
<A NAME="キーワード">ふろよん自作講座のご案内</A>

ちょっと複雑になってきましたが、縦にどんどんスクロールしなければいけないページの場合、ページのところどころのタイトルにリンクを張りたくなることがありますよね。その時に有効なのが NAME（ネーム）属性です。
上の例だけだと分かりにくいかもしれませんが、リンク先の名前に#(シャープ）を付けて記述しておき、その後で NAMEでキーワードを定義してやります。ますます分かりにくくなってしまったですね。(^_^;

つまり、リンク先に#を付けて記述すると、同じページのキーワードの書いてある場所にジャンプできるようになります。そのあとで、ジャンプさせたい場所に目印を付ける役目をしているのが NAME属性です。当然、リンク先の名前（#キーワード）と、NAME属性のキーワードは同じものが一組ずつないといけません。同じキーワードの二カ所以上に使うことはできません。
また、この方法を応用すると、同一ページではなく、別のファイルの特定の位置（別のページの目印を付けた箇所）にジャンプ先を指定するなんてことも可能になります。実際にこのタグを書いて、ブラウザで確認してみると分かりやすいかもしれません。

では、ここまでのおさらいを兼ねたサンプルタグを書いてみましょう。その１からその４までの要素を全部含んだタグにしてみました。皆さんが実験なさる場合は、リンク先のファイル名を変えてみてくださいね。

＜今日のチャンプルー、いや、サンプル＞(^_^;

上のタグをまとめたサンプルを書いてみました。画像はフォーラムホームページにあるバナーの大と小を用いています。みなさんはお好みの画像を別に用意してそれをお使いになると良いでしょう。コメントタグを挿入してできる限り説明を書いてみました。
上のタグはたとえば links.htm 下のタグは linka.htm として保存してC:\My Documentsに画像のアイコンと一緒に保存しておいた場合の例です。見やすいように空白をはさんでありますが、無くても構いません。

[ links.htm ]

<HTML>
<HEAD>
<TITLE>リンクを作って遊びましょ</TITLE>
</HEAD>
<BODY bgcolor="#ff9fff">


<A href="linka.htm">リンク先１に飛びます</A>
（同一ウィンドウで linka.htmへ飛びます）


<A href="linka.htm">
<IMG src="40pcmini.gif" width="88" height="31" border="0"></A>
（同上）


<A href="linka.htm" target="_blank">リンク先１に飛びます</A>
（別ウィンドウで linka.htmへ飛びます）


<A href="linka.htm" target="_blank">
<IMG src="40pcbanner.gif" width="454" height="59" border="0"></A>
（同上）


 
<A href="#keyword1">Sortieのキーワード</A> 
（このページの下のキーワード Sortie のキーワードにジャンプ） 


<A href="#keyword2">ほんちのキーワード</A> 
（このページの下のキーワードほんちのキーワードにジャンプ） 
<A href="#keyword3">みつりんのキーワード</A> 
（このページの下のキーワードみつりんのキーワードにジャンプ） 


<A name="keyword1">Sortieのキーワード</A> 
ここにいろいろ書きます。 
<A name="keyword2">ほんちのキーワード</A> 
ここにいろいろ書きます。 
<A name="keyword3">みつりんのキーワード</A> 
ここにいろいろ書きます。
 
本日の練習はこれまでとしましょう。(^_^) 
では、ハッピーＰＣいんぐ！ 
</BODY>
</HTML>

[ linka.htm ]

<HTML>
<HEAD>
<TITLE>リンク先サンプルページ</TITLE>
</HEAD>
<BODY bgcolor="#84ffff">

こちらがリンク先です。（＾＿＾） 
ブラウザの戻るボタンで戻ってね。

</BODY>
</HTML>

ここで　Sortieのキーワードをクリックすると、このページの下にある見出しにジャンプします

みつりんのキーワードをクリックしていれば、下のようにジャンプします。
いずれも、同じページの下のほうにある内容です。ページが縦長になった時はスクロールする手間が省けます。

では今日はこのくらいで。次回はリンクその２です。

Lesson 1	Lesson 2	Lesson 3	Lesson 4	Lesson 5	Lesson 6	Lesson 7	Lesson 8	Lesson 9	Lesson10
Lesson11	Lesson12	Lesson13	Lesson14	Lesson15	Lesson16	Lesson17	Lesson18	Lesson19	Lesson20
Lesson21	Lesson22	Lesson23	Lesson24	Lesson25	Lesson26	Lesson27	Lesson28	Lesson29	Lesson30

みつりんの簡単ホームページ講座トップ

トップページへ	コマンドプロンプト	VBAで遊ぼう	パレットへ(注)	ホームページ道場へ(注)
(注）@nifty会員のみご利用いただけます		30日で完成ホームページ本		ファイルの開き方

ホームページの内容の転載を禁じます　made by mitsurin
リンクについてはメールにてお問い合わせください。ただし、トップページ以外へのリンクは不許可とします。