トップページ＞タグを打ってみよう！＞サイト内のリンクを作る
サイト内のリンクを作る
このページでは、サイト内のリンクの設定を説明しています。メニューや上に戻るリンクはサイトを訪れた方が迷わず、便利なように作ります。
メニュー（目次）のリンク
目次として機能するリンクを作ります。サイトを閲覧する方が、すばやく目的のページにたどり着けるようにします。
ブラウザ表示 ブラウザで表示すると以下のようになります。
リンクの指定をすると、標準では青の文字と下線が付いて表示されます。
リンクを指定する
目次がリンクとしてはたらくようにHTMLで設定します。目次はリストの書き方で記述します。
HTML<h3>目次</h3> <ol> <li><a href="link01.htm">リンクをつくる</a></li> <li><a href="link02.htm">サイト外へのリンク</a></li> <li><a href="link03.htm">サイト内のリンク</a></li> </ol>
link01、link02、link03.htmは各ページのファイル名です。これがリンク先になります。リンクをクリックすればリンク先のページが開くようになります。
この例の場合は、同じ階層にファイルがある場合です。下の階層や、上の階層にあるファイルにリンクする場合の書き方はリンクと階層を参照してください。
リストの書き方はリストは箇条書き？を参照してください。
リンクの色をスタイルシートで指定する
リンクを設定すると、ブラウザの標準では、文字は青い色に変わり、下線が入ります。
ブラウザ表示
マウスポインタを乗せたとき、色が変ればわかりやすい。
さらに、マウスポインタを乗せたときにも色が変われば、そこがリンクであることが、はっきりとわかります。
下の例で、マウスポインタと文字色の変化を確認してください。リンク部分にマウスポインタを乗せると、マウスポインタの形が変り、文字色が赤に変ります。(例なので、クリックしてもリンク先に移動しません。)
スタイルシートの指定方法
そこで、スタイルシートで、リンクの色を指定してみましょう。
CSSa { color: blue; } ----------リンクの色は青 a:hover { color: red; } ------マウスを乗せたときの色は赤
リンクの色、ワンポイント
ここでは単純に文字色を青、マウスをのせた色を赤に指定しました。
だれが見てもリンクとわかるよう、リンクの文字色を青系に、マウスを乗せた色を赤系にするのがよいと思います。
多くのウェブサイトがリンクの色を青系、マウスポインタを乗せた色を赤系にしているので、慣れない方でもそこがリンクとわかるからです。
a:hover の読みと意味
a: hover はマウスを乗せたとき、の指定です。
a: hover の読み方は、エィ、ホバーです。hover とは鳥などが空に舞うという意味です。ホバークラフトという乗り物は海上に浮かぶようにして走るのですが、おそらくそのホバーだと思います。
タグを打ってみよう！
テキストエディタで記述したHTMLとCSS。スタイルシートはヘッダ部（headと/headの間）に書いています。
上に戻るリンクを作る
上に戻るリンクがあれば、スクロールしなくても上に戻れます。
ページの下のほうに、戻るリンクがあれば、訪れた人にとって親切なサイトになります。
上に戻るリンクの例、ブラウザで表示
上に戻るリンクの書き方
HTML、リンク元<p class="top">△<a href="#top">上に戻る</a></p>
class="top" はリンク元パラグラフ全体のクラス名です。
スタイルシートで文字の色などを指定するためにクラス名をtopとつけました。
△は日本語入力で出てくる三角じるしを使いましたが、
のような矢印画像も目立つのでよいと思います。
#top ---- リンク元のtopには # が付きます。
リンク先を指定
ページの一番上にある、ロゴやタイトル、画像などにリンク先を指定します。
リンク先のHTML / 画像が上にある場合<a name="top"> ----リンク先の名前をつけます。 このtopには＃が付きません。
<img src="gazou000.jpg"> --画像名。画像が上にある場合。
</a>
</p>
<a name="top"> ----リンク先の名前をつけます。 このtopには＃が付きません。
<h1>タイトル文字</h1> ----タイトル文字が上にある場合。
</a>
</p>
クラス名をつけるのはスタイルシートで文字の色などを指定するためです。クラス名headはリンク先パラグラフ全体のクラス名です。
<img src="gazou000.jpg"> は、ページの1番上に画像がある場合には、画像をリンク先にします。この例ではgazou000.jpg です。
<h1>タイトル文字</h1> は、ページの1番上に見出しがある場合に、見出しをリンク先にします。この例ではh1の見出しです。
リンク元の指定
CSScolor: blue; --------------テキストの色を青に。
text-align: right; --------テキストを右ぞろえに。
border-bottom: dotted 1px #cccccc; -----リンクテキストの下に グレーの点線を入れる。
}
.top a{
color: blue; ---------------リンクの色を青に。
}
.top a:hover{
color: red; ----------------マウスを乗せたら、リンクの色を赤に。
}
リンク指定のポイント
.topはリンク元のパラグラフ全体のクラス名です。
リンク a は.top a です。マウスを乗せたときの指定 a:hover は、.top a:hover です。
このように、クラス名を付けると、スタイルシートの指定がしやすくなります。
リンクテキストの下の点線は、なくてもよいのですが、「上に戻る」がわかりやすいです。他にもデザインが考えられると思います。
上に戻るリンクがあると、スクロールしなくても、ページの上に戻ることができます。縦長のページになったときは、一番下だけでなく、途中にもあると親切設計です。
タグを打ってみよう！
上に戻るリンクのHTMLとCSSの指定です。borderとpaddingの指定などは省略しても問題ありません。
リンクはややこしい？
リンクはリンク先、リンク元など、少しややこしい？感じがあります。ポイントはリンク先がきちんと指定してあること、につきると思います。リンクを指定したら、必ずリンク先に飛ぶかを確認します。
リンク先に飛ばないときは、階層の指定が合っているかを、確認します。作っているサイトのページを図にして書き出してみると、わかりやすいと思います。
階層の違うページにリンクする場合は、リンクと階層をご覧ください。
用語：リンク/リンクテキスト/リスト
サイト外へのリンクを作る前のページ | 次のページリンクと階層