HTMLタグ/CSS一覧と初心者向けホームページ作成解説集:HTMLタグボード
HTMLタグボードのトップへ戻る ゼロから始めるホームページ作成講座 訪問者優位のWEBデザインTips インターネットで小遣い稼ぎ 今すぐ使える!便利ツール(HTMLタグ辞典など)

HTMLタグボードトップ >> ゼロから始めるホームページ作成講座 >> 仕組みを理解しよう >> 相対リンクと絶対リンク
お問い合わせはこちら サイトマップはこちら

仕組みを理解しようメニュー
1.ホームページとは
2.HTMLのはたらきと仕組み
3.HTMLタグの基礎
4.主なタグの紹介
5.相対リンクと絶対リンク
6.ファイル名の決め方
7.ファイルの種類

相対リンクと絶対リンク


リンクとは

リンクの仕組み

ホームページは文書や、画像、表、段落などの大きさや配置を指定するHTMLファイルとそれとセットになる画像や音楽データなどの外部のファイルで構成されています。これらのファイルが相互につながることで複数のページを持った一つのホームページが完成します。このページ同士をつなげることを「リンク」といいます。


その種類は自分のホームページ内のページ同士であったり、他のサイトのページへとジャンプするものであったりと様々ですが、これらはすべてリンクと見なされます。リンクがあるからこそ、ホームページが成り立つと言ってもいいでしょう。


インターネットの世界では、リンクをすることを「リンクする」や「リンクを張る」と言った言葉が使われています。また、利用者がこのリンクによって他のページに移動することを「ジャンプする」や「リンクを辿る」と呼んでいます。


リンクの種類

リンクそのものの役割は変わりませんが、一口にリンクと言ってもその種類は様々です。ここでは以下の3つに分類しています。


リンクの種類 リンクの仕方
内部リンク

自分のホームページ内の各ページ間のリンクのこと。

外部リンク

自分のサイトから他のサイトへのリンクのこと。

ページ内リンク

同じページ内のリンクのこと。


相対リンクと絶対リンク

では、本題に入りましょう。ここで理解すべき内容は以上の3つのリンクのうち、内部リンクに関するものです。上記にあるように内部リンクは自分のホームページ内での話になるので、ホームページを作成する人にとっては重要な内容です。


相対リンクとは、自分が見ているHTMLファイルから他のファイルへリンクをするとき、そのファイルから相対的にファイル場所を指定する方法です。


わかりにくいと思いますので、実際に例を出して考えてみましょう。自分がアップロードするサーバーのURLアドレスが「http://www.123XYZ.com/」であると仮定します。相対リンクの仕方この階層に「A」というフォルダを作り、さらにこのフォルダの下に「B」というフォルダを作成したとします。各フォルダにはそれぞれ「001.html」というファイルと、「002.html」 という2つのHTMLファイルがあるとします。


いま、あなたはフォルダ「A」の中に「001.html」を作成しました。つまり、アドレスは「http://www.123XYZ.com/A/001.html」です。それではさらにこのファイルからフォルダ「B」の中にある「002.html」へリンクをする方法を考えましょう。


このとき、リンクの仕方を最初から「http://www.123XYZ.com/A/B/002.html」と表記するリンクのことを「絶対リンク」と呼びます。


逆に「./B/002.html」のように、共通の部分は省略して、自分の見ているファイルから相対的に見たリンク先を指定する方法を「相対リンク」といいます。


ホームページを作成する上では、リンクの仕方は「相対リンクが良い」とされています。なぜなら、絶対リンクで記述していると、借りているサーバーのアドレスが変わった場合、リンク先の最初部分がすべて変更になるため、今まで作ったファイルのリンク先をすべて変更しなければならなくなるからです。


つまり、今までのアドレスの最初の部分が「http://www.123XYZ.com/」から「http://www.789ABC.com/」へ変わったとすると、絶対リンクで記述されていた「http://www.123XYZ.com/A/B/002.html」は固有のアドレスを指定しているため、「http://www.789ABC.com/A/B/002.html」とは自動的に変更されず、リンクがはずれてしまいます。


これを解決するのが「相対リンク」です。前述のように相対リンクはあくまでファイルから相対的に見た場所を示しているので、フォルダの階層が同じであれば、サーバーのアドレスが変更になってもリンク先まで変更する必要はないのです。


相対リンクの書き方

相対リンクの書き方の基本は以下のようになります。
(※以下の例は「http://www.ad-exm.com/A/B」内のフォルダにあるファイルからリンクする場合)


書き方の例 意味合い アドレスの例
/index.html トップ階層のファイルへ http://www.ad-exm.com/index.html
./index.html 同じ階層のファイルへ http://www.ad-exm.com/A/B/index.html
./C/index.html 一つ下の階層のファイルへ http://www.ad-exm.com/A/B/C/index.html
./C/D/index.html 二つ下の階層のファイルへ http://www.ad-exm.com/A/B/C/D/index.html
../index.html 一つ上の階層のファイルへ http://www.ad-exm.com/A/index.html
../../index.html 二つ上の階層のファイルへ http://www.ad-exm.com/index.html


☆ココがポイント!

自分のホームページにおけるページ同士のリンクは相対リンクで記述しましょう。


<< 前のページ 1 2 3 4 5 6 7 8 次のページ >>

画面のトップへ戻る

こんな時どうする?

リンクの仕方(タグの書き方)を教えて


リンクの仕方

リンクを指定する(制作ソフト編) - ゼロから始めるホームページ作成講座
リンクを指定する(HTMLタグ編) - ゼロから始めるホームページ作成講座
リンクタグ - HTMLタグ辞典



画面のトップへ戻る

ゼロから始めるホームページ作成講座のトップへ

必要なものを揃えよう
伝えたい情報を考えよう
仕組みを理解しよう
実際に作ってみよう
作ったファイルを公開しよう
製作にあたり注意すべきこと
練習問題にチャレンジ!

訪問者優位のWEBデザインTipsのトップへ

インターネットで小遣い稼ぎのトップへ

今すぐ使える!便利ツールのトップへ