トップ > HTMLの解説

※ここの解説は、後になるほど省略されている場合がありますのでできるだけ順番に読んでください。

■ 8.リンクの設定

さて、大まかな構成ができてきましたら、次はリンクを張ってみましょう。
リンクとは、あるページから別のページを表示させたり、同一ページの別の場所へジャンプする文字や画像のことです。

最初は、1枚で済んでいたホームページもコンテンツが増えてきますと1ページじゃ足りなくなったり、縦長いページであればそのページの指定場所をいきなり表示させたいと思いますよね。

そういったときにリンクを使用します。
リンクの書き方も奥が深いですから、単純なものから説明していきます。


例えば、ページが2枚あってそれぞれのファイル名が page1.html、page2.html でどちらも同じフォルダにある場合、
page1.html から page2.html を呼び出すときのタグは、

 <a href="page2.html">page2へジャンプ</a>

などと記述します。
ホームページ上には、

page2へジャンプ

と表示されます。
この表現の仕方は、人それぞれによって違います。
例をあげると、

○○のページへ
ここをクリックすると○○のページにジャンプします。
○○のページはここをクリックしてください。

などと言った表現をよく見ます。
それぞれの記述の仕方は、

<a href="page_b.html">○○のページへ</a>
<a href="page_b.html">ここをクリック</a>すると○○のページにジャンプします。
○○のページは<a href="page_b.html">ここ</a>をクリックしてください。

のように記述します。

ここまでは、そんなに難しくないですね。

ところが、ページが増えてくると管理が難しくなってきますので、別フォルダを作成してそれぞれのページを分類別に分けていくことになります。

そのようなときの指定方法を次に説明します。


■ リンクのページ指定

それでは、それぞれのページが別のフォルダにあった場合は、どう記述するのでしょう。
例えば次のような場合を例に挙げます。

c:\home(ホームページのフォルダ)
   ├index.html(ホームページ)
   │
   ├bun1(分類1のフォルダ)
   |└page1.html
   │
   └bun2(分類2のフォルダ)
    ├page21.html
    ├page22.html
    │
    └bun21(分類21のフォルダ)
     └page211.html

まず、index.html からそれぞれのページへのリンクは、次のように記述します。
<a href="bun1/page1.html">page1へジャンプ</a> <a href="bun2/page21.html">page21へジャンプ</a> <a href="bun2/page22.html">page22へジャンプ</a> <a href="bun2/bun21/page211.html">page211へジャンプ</a>
そのページより下のフォルダは、そのままフォルダ名から記述します。

次に、page21.html からそれぞれのページへのリンクは、次のように記述します。
<a href="../index.html">ホームページへ戻る</a> <a href="../bun1/page1.html">page1へジャンプ</a> <a href="page22.html">page22へジャンプ</a> <a href="bun21/page211.html">page211へジャンプ</a>
上記の、「../」はひとつ上のフォルダを意味します。
二つ上の場合は、「../../」と記述します。

また、特殊な記述としては、「./」があり、これは現在のフォルダを指します。
上記の
<a href="page22.html">page22へジャンプ</a> <a href="bun21/page211.html">page211へジャンプ</a> は、
<a href="./page22.html">page22へジャンプ</a> <a href="./bun21/page211.html">page211へジャンプ</a> と同義になります。

次に、page211.html からそれぞれのページへのリンクは、次のように記述します。
<a href="../../index.html">ホームページへ戻る</a> <a href="../../bun1/page1.html">page1へジャンプ</a> <a href="../page21.html">page21へジャンプ</a> <a href="../page22.html">page22へジャンプ</a>
ここまでの記述はすべて相対指定と言います。

これに対して絶対指定があります。
例えば、同じ画像を次のように、絶対指定を使用して指定することもできます。
<img src="http://www.freeweb.ne.jp/computer/~t-atom/index.html"> <img src="/~t-atom/index.html">
サーバーによっては次のような指定で表示できることもあります。
<img src="/index.html">

さて、リンクの基本的な設定が分かったら、次は、リンクの追加機能を見ていきましょう。


■ リンクのtarget属性

リンクには、target属性があり、リンクされてるページを開くときの動作を指定することができます。

taget属性 意  味
_self 次のページを開く時、現在のページが入れ替わります。 target属性を指定しないのと同じです。 <a href="index.html" target="_self">トップページ</a>
_blank 次のページを開く時、新しいウィンドウが開きます。 <a href="index.html" target="_blank">トップページ</a>
_top フレームページ等に使用され、 現在のページ全体を入れ替えます。 <a href="index.html" target="_top">トップページ</a>
_parent フレームページ等に使用され、 現在のフレームセット全体を入れ替えます。 <a href="index.html" target="_parent">トップページ</a>
上記以外 フレームページ等に使用され、 同一のフレーム名を持つフレームを入れ替えます。 フレーム名が存在しない場合は「_blank」と同じになります。 <a href="index.html" target="main">トップページ</a>

■ リンクの追加機能

同一ページ内の指定した位置にジャンプする場合は、次のように、ジャンプ先にアンカーを記述し、
<a name="top">

次のように、そのアンカーへのリンクを記述します。
<a href="#top">

この方法は、次のように別ページへのリンクにも使用できます。
<a href="page12.html#top">

ここをクリックしてみてください。→このページのトップへ

次のように「title」属性を記述しますとリンク文字に説明が表示されます。
<a href="#top" title="このページのトップに戻ります。">

この文字の上にマウスをおいてみてください。→説明表示のサンプル

リンク文字の変わりに画像を指定することもできます。
<a href="/><IMG src="atommin.gif"></A>
トップページへ戻ります

画像の周りに表示されるリンク枠を表示したくない場合は、次のように指定します。
 <a href="/"><IMG src="atommin.gif" border="0"></A>
 トップページへ戻ります

このリンク枠を表示したくない場合も、スタイル属性を使用し、次のように記述しましょう。
<IMG src="atommin.gif" style="border: 0;">
詳しくは「HTMLの解説」−「14.スタイル属性」、「15.スタイルシート」をご参照下さい。

■ リンクのその他機能

  1. 新しいウィンドウで開く
    <a href="/" target="_blank">
    新しいページを開くサンプル
  2. そのページすべて新しいウィンドウで開く
    BODY句内に次のような「BASE TARGET」を追加する
    (指定した位置以降に適用されます。)
    <base target="_blank">
  3. メール送信を開く
    <a href="mailto:aaa@bbb.jp?subject=はじめまして&body=本文の記述">
    メール送信のサンプル
  4. ファイルのダウンロード
    <a href="/lzh/tcounter.EXE">
    ファイルのダウンロードのサンプル
  5. リンク文字の下線を消す
      <a href="/lzh/tcounter.EXE" style="text-decoration : none">
      ファイルのダウンロードのサンプル

page update:2010/01/23 20:32

Copyright (c) 2000-2009, all Rights Reserved & Produced by atom