親方インフォ　簡単ホームページ作成講座

もっと楽しく！
インターネットショッピング！
便利なページを創りましょう！

CONTENTS

◆Top
◆Shopping
◆オンラインカジノ
◆アフィリエイトを始めよう！
◆ホームページ作成
◆フリー素材集
◆懸賞情報をチェック
◆Search&Link
◆ホームページ製作
◆Gallery
◆BBS
◆Fishing
◆リンク集
◆Profile
◆ゲームセンター

古本・ブランド・PC等300万商品を激安ショッピング！

サーチ:
Keyword:

簡単ホームページ作成講座

※用語解説のリンクにつきましては、「　ＩＴ用語辞典　e-Words　（株式会社インセプト）」　様の許可を得てリンクしています。下記の検索窓もご利用ください。

　｜INDEX｜１｜２｜３｜４｜５｜６｜７｜８｜

リンクをつくろう

　リンク（ハイパーリンク）って、ご存知でしょうか？簡単にいうと、今見ているWebページから、他のページや画像に移動する際に用います。このように他ページ等へのリンク情報を埋め込んだページをハイパーテキストと言います。Webページはその代表といえるでしょう。もしこの機能がなかったら、アドレスバーにいちいちアドレスを打ち込んで表示させる…。ネットサーフィンなんてできないですよね。
　リンクを作るタグは＜Ａ＞タグです。練習として、この講座で一番初めに作った「１.html」へのリンクを作ってみましょう。消してしまった方は２章に戻って「１.html」を再度作成するか、任意のファイルに読み替えて作業してください。今まで全部ファイルを作っている方は今回「32.html」になると思います。

Sample

<HTML>
<HEAD>
<TITLE>リンクを作る１</TITLE>
</HEAD>
<BODY>
<A HREF="1.html">ここをクリックして下さい。</a>
</BODY>
</HTML>

32.html

　如何でしょうか？ページが切り替わりましたでしょうか？上の例はテキストにリンクを設定してみました。「1.html」ではないファイルにリンクさせる場合は、”　”の中を変えてください。絶対パスでも、相対パスでもかまいません。

　今度は画像にリンクを設定してみましょう。難しく考えず、第５章でやった画像の表示方法と組み合わせれば簡単にできます。

　↑の画像を保存しましょう。右クリックで「名前を付けて画像を保存」で「img」フォルダに保存しましょう。「click.gif」という名前です。

Sample

<HTML>
<HEAD>
<TITLE>リンクを作る２</TITLE>
</HEAD>
<BODY>
<A HREF="1.html">
<IMG SRC="img/click.gif" BORDER="0">
</A>
</BODY>
</HTML>

33.html

　次は、リンク先を別のウインドウに表示してみましょう。リンクをクリックすると別のウインドウが開いて、リンク先のページが表示されます。属性は＜ＴＡＲＧＥＴ＞です。

Sample

<HTML>
<HEAD>
<TITLE>リンクを作る３</TITLE>
</HEAD>
<BODY>
<A HREF="1.html" TARGET="_blank">
ここをクリックして下さい。
</a>
</BODY>
</HTML>

34.html

　今回は、一番簡単な例を紹介しました。ＴＡＲＧＥＴ属性には他にも属性値はいろいろありますが、その辺は後に譲る事にします。また、JavaScript等を使うと、ウインドウのサイズ、ツールバーやスクロールバーの有無、表示位置の指定などもできます。
　今回の別ウインドウでの表示は、俗に言うポップアップウインドウとはちょっと意味あいが異なります。最近のブラウザや、ウイルス対策ソフト等ではポップアップ広告を表示しないような対策が取られていますが、これもJavaScript等を利用しています。閲覧者がページを開くと勝手に出てくるポップアップ広告は本当に迷惑なしろものでした。中には悪質に、閉じるボタンや、ページを移動する際に表示したりして、永遠に出し続けるなんていうサイトも登場しました。広告としてはインパクトもあり、使い方によっては便利な機能でしたが、心無いWeb製作者の悪用によってただの迷惑物として最近は撃退（ポップアップ遮断機能）されてしまいました。
　リンクを別ウインドウに表示するのは、参考ページを表示させたり、ちょっとした小さいページを表示するのに有効です。例えば今見ているページの中の専門的な事などにリンクを付けて、別ページに注釈の意味で表示するなんていうのは、非常に見ている側も見やすいものです。間違ってブラウザを閉じてしまっても、元のページは残っている訳ですから、探すのも苦労しません。
　便利だからといって、全てのリンクを別ウインドウにするのはやめましょう。それはポップアップ広告と同じようになってしまいます。自分のサイト内であれば、元に戻るリンク等をしっかり付けておけば良いのです。別サイトに飛ばす時は、自分のサイトへ戻るボタンは付けられませんから…。

　リンクで飛ばすのは、違うページだけとは限りません。熱のこもった？ページを作ると、長い文章になってしまいます。下にスクロールしていくのもなかなか大変になってしまいます。そんな時はページ内に名前を付けて、ページ上部に目次を付けてあげれば、目的の場所に飛んでいけます。スクロールで探すのではなく、目次で読みたい所に簡単に行ける配慮をするのも運営者としては心がけるポイントです。

リンクする場所では、＜Ａ　ＨＲＥＦ＝”＃キーワード”＞
飛ばす場所には、＜Ａ　ＮＡＭＥ”キーワード”＞＜/Ａ＞

　説明しにくいので、下のソースを見ていただいて理解してください。やってみれば簡単なことです。本来は長いテキストを打てば良いのですが、今回は改行を沢山入れる事で、縦長のページを作っています。ブラウザの縦の表示範囲を超えないと分かりつらいからです。

Sample

<HTML>
<HEAD>
<TITLE>同一ページのリンク</TITLE>
</HEAD>
<BODY>
<A NAME="TOP">トップ</A>
目次 
<A HREF="#1">第一章</A> 
<A HREF="#2">第二章</A> 
<A HREF="#3">第三章</A> 
 
 
<A NAME="1">第一章</A>
 
 
 
 
<A NAME="2">第二章</A>
 
 
 
 
<A NAME="3">第三章</A>
 
 
 
 
<A HREF="#TOP">ＴＯＰへ</A>
</BODY>
</HTML>

35.html

　おわかり頂けたでしょうか？＜ＮＡＭＥ＞で指定した場所へリンクを設定するということです。目次にリンクを付けて、クリックすると該当する章がページのトップにきます。一番下には、「ＴＯＰへ」というリンクがあります。一番上には＜ＡＮＡＭＥ＝”ＴＯＰ”＞と名前が付けられていますので、一番上に移動するわけです。但し、ブラウザの中に全ページが入る場合は機能しませんので、ご注意ください。
　このＮＡＭＥという属性値は、同一ページ内だけ有効というわけではありません。別のページから直接指定することもできます。上のＨＴＭＬファイルは、「35.html」で保存されていると思います。下のソースで、35.htmlの第二章にリンクしてみます。

Sample

<HTML>
<HEAD>
<TITLE>別ページにリンク</TITLE>
</HEAD>
<BODY>
詳細は説明ページの
<A HREF="35.html#2">第二章</A>
をご覧下さい。
</BODY>
</HTML>

36.html

　”ファイル名に＃ＮＡＭＥ”と指定すれば良いわけです。ファイル名の指定は、絶対パスでも、相対パスでもかまいません。

　次は、メールリンクを作ってみましょう。メールリンクは、クリックするとメールソフトが立ち上がり、指定したメールアドレスが宛先に入る便利な機能です。

Sample

<HTML>
<HEAD>
<TITLE>メールリンクを作る</TITLE>
</HEAD>
<BODY>
<A HREF="mailto:aaa@bbb.ne.jp">
メールはこちら
</a>
</BODY>
</HTML>

37.html

　上の例では、aaa＠bbb．ne．jp　という架空のアドレスを指定しています。ここに自分（送りたい）アドレスを指定してください。
　mailto：（コロン）アドレスです。

｜INDEX｜１｜２｜３｜４｜５｜６｜７｜８｜