サイト内リンク
自分のサイト内にジャンプするリンクを作るには
<a href="index.html"> ここに文字とか画像などの要素を入れる </a>
ここでは、同じ階層の『index.html』というページにリンクする設定になっています。階層が分からない人は右メニューの『階層』という所で詳しく説明していますので、そちらの方をご覧ください。このように、自分のサイト内で、今いる場所を基準にしてパスを指定する事を、相対パスといいます。
指定の場所にジャンプ
同じページ内の指定した場所にジャンプするリンクを作ることができます。
ココをクリックすると、一番下までジャンプする事ができます。このようにしたい場合、まずジャンプしたい文字列などに、
<a name="1"> ジャンプしたい場所 </a>
のように、名前を付けます。今では簡単に『1』と記述していますが、半角英数で指定すればなんでもＯＫです。これでジャンプ場所の設定は完了しました。次にリンクの設定を行います。
<a href="#1"> リンク </a>
と記述します。ここでのポイントは、先ほど付けた名前に『 # 』を付けるということです。上記メニューなどのリンクもこれで作られています。このように記述する事により簡単にサイト内にジャンプする事ができます。名前を付ける時に名前が被らないように気をつけてください。
他サイトのリンク
他のサイトにリンクする方法も、基本的に上の方法と同じになります。
<a href="http://www1.ttcn.ne.jp/~syuri/"> 他のサイトにジャンプ </a>
ここでのポイントはリンク先に、相手先のアドレスを記述しているという事です。このように、全てのアドレスを記述することを絶対パスといいます。
リンクを使ってみる
今まで説明した事を踏まえて、文字と画像でリンクしてみましょう。
<a href="http://www2.ttcn.ne.jp/webforest.com/"> 文字でリンク </a>
まず、文字でのリンクを見てみましょう。このように<a href=""></a>のタグの中に文字を入れる事でリンクさせる事ができます。
<a href="http://www2.ttcn.ne.jp/webforest.com/">
<img src="images/img.gif" width="87" height="64" alt="リンク" border="0">
</a>
画像でのリンクも基本的に文字列の時と同じで、リンクのタグの中に画像を入れて指定しています。画像リンクの場合border="0"を記述しておかないと、枠線が出てしまいますので注意が必要です。詳しくは右メニュー『画像』の中で説明してあります。
新しいウィンドウで表示
リンクを別のウィンドウで表示してみましょう。
<a href="http://www2.ttcn.ne.jp/webforest.com/" target="_blank">
別のウィンドウでリンク
</a>
このように、属性にtarget="_blank"を指定する事により、新しいウィンドウでリンクを表示します。
