TAG index
ホームページ作成ガイド

ステップアップ&テクニック - ホームページ作成ガイド

HTML&CSS Web制作リファレンス
- ホームページの構築・運用 -

< HOME / ホームページ作成ガイド / リンクしてみる
リンクしてみる


「ページの内容をアレンジしてみる」で作成したページ(index.html)に、リンクボタンを入れてみます。

同じフォルダ内にあるページ(sample.html)と、外部サイトへのリンクを設定してみましょう。

今回使用するソフトは、メモ帳とブラウザ(インターネットエクスプローラ)だけです。

※Windows98の環境で説明しますので、ご自分の環境に読み替えてご覧ください。


 同じフォルダ内のページへリンクする
index.html から sample.html にリンクさせてみましょう。

まず、「メモ帳」で index.html を開いてください。このファイルのソースを見ると、

<H1>私のホームページへようこそ!</H1>

上記のように書かれた1行がありますので、そのすぐ下あたりにリンクの指定を記述してみてください。

リンクの指定方法は、

<A HREF="sample.html">サンプルページへ</A>

上記のような感じになります。sample.html の部分に、リンク先のファイル名を指定してください。

<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=Shift_JIS">
<TITLE>マイホームページ</TITLE>
</HEAD>
<BODY BGCOLOR="#90EE90">

<CENTER>

<H1>私のホームページへようこそ!</H1>

<A HREF="sample.html">サンプルページへ</A>

<P>
ここは私のホームページです。<BR>
ご訪問ありがとうございました!
</P>

<P>
まだコンテンツはそろってないですけど、<BR>
がんばって充実させていく予定です。<BR>
またお越しくださいね。
</P>

</CENTER>

</BODY>
</HTML>

上記のように記述したら、このファイルを上書き保存した上で、ブラウザで表示確認を行ってください。

「サンプルページへ」というリンクボタンが新たに追加されたと思います。試しにそれをクリックしてみてください。サンプルページ(sample.html)へジャンプできたら、このリンクの設定は成功しています。

確認を済ませたら、ブラウザの「戻る」ボタンで index.html に戻っておいてください。

Aタグについての詳細は、「リンクボタンを作る」をご覧ください。


 外部のサイトへリンクする
次に、index.html から 外部のホームページにリンクさせてみましょう。とりあえずここでは、TAG indexにリンクするということで説明します。

「サンプルページへ」のリンクの下に、TAG indexへのリンクを記述してみてください。

リンクの指定方法は、

<A HREF="http://www.tagindex.com/">TAG indexへ</A>

上記のような感じになります。http://www.tagindex.com/ の部分に、リンク先サイトのURLを指定してください。

<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=Shift_JIS">
<TITLE>マイホームページ</TITLE>
</HEAD>
<BODY BGCOLOR="#90EE90">

<CENTER>

<H1>私のホームページへようこそ!</H1>

<A HREF="sample.html">サンプルページへ</A>
<A HREF="http://www.tagindex.com/">TAG indexへ</A>

<P>
ここは私のホームページです。<BR>
ご訪問ありがとうございました!
</P>

<P>
まだコンテンツはそろってないですけど、<BR>
がんばって充実させていく予定です。<BR>
またお越しくださいね。
</P>

</CENTER>

</BODY>
</HTML>

上記のように記述したら、このファイルを上書き保存した上で、ブラウザで表示確認を行ってください。

「TAG indexへ」というリンクボタンが新たに追加されたと思います。試しにそれをクリックしてみてください。TAG indexのホームページにジャンプできたら、このリンクの設定は成功しています。(インターネットに接続されている必要があります)

Aタグについての詳細は、「リンクボタンを作る」をご覧ください。


以上で練習用ホームページの作成は完了です。


 絶対パスと相対パス
最後に、絶対パスと相対パスについて少しだけ触れておきます。

リンクを設定するときは、リンク先のファイルをパスで指定することになります。

絶対パス
http:// から始まる指定方法です。別のサイトにリンクする場合は、この方法で指定します。

<A HREF="http://www.tagindex.com/">リンク</A>

相対パス
現在地を基準にした相対的な指定方法です。サイト内のページにリンクする場合は、この方法で指定します。(絶対パスでも指定できますが、通常は相対パスで指定します)

<A HREF="sample/index.html">リンク</A>

<A HREF="index.html"> 同じフォルダ内にリンクするときは、ファイル名のみを記述します。
<A HREF="sample/index.html"> 下位の階層にリンクするときは、フォルダ名に続けてスラッシュ( / )を入れ、ファイル名を記述します。
<A HREF="../index.html">
<A HREF="../../index.html">
上位の階層にリンクするときは、 ../ に続けてファイル名を記述します。../ は、ひとつ上の階層を指定するものです。
<A HREF="../sample/index.html"> 同じ階層の別フォルダ内にリンクするときは、../ に続けてフォルダ名とスラッシュを入れ、ファイル名を記述します。


ホームページ作成ガイドTOP


HTML5HTMLタグCSSカラーチャートWeb便利ツールテンプレートJavaScript
< HOME PageTop▲