ウェブランサー

HTMLのハイパーリンクについて

リンクを貼る

HTMLの最も優れた機能の一つがハイパーリンクです。ハイパーリンクとは、分かりやすく言うと、HTMLドキュメントとHTMLドキュメントをつなぐ橋のようなもので、インターネット上に散らばっているドキュメントをつなげる役割を果たします。

インターネット上に公開されているウェブページであれば、URLを参照して何処にでもリンクを張る事が出来ます。日本のサイトから海外のサイトへだって、たったのワンクリックで行けるのです。

リンクをつなぐ<a>タグ

ハイパーリンクを設置するには以下のタグを使います。

HTML
<a href="http://weblan3.com/">リンクする文字</a>

<a>タグは、href属性にURLを指定することで飛び先を指定します。文字の他にも、画像などのコンテンツにリンクを設置することもできます。この要素は、「a href」と書いて「エー エイチレフ」と読みます。

リンク方法は、大きく分けて二種類あります。自分のページの住所であるURLと同じドメイン上にあるページを示すものと、別のドメインを有する外部ページを示すものです。ドメインが同じ場合は「相対パス」、ドメインが違う場合は「絶対パス」という記述形式を用います。

それでは、実際にリンクを設置する場合を想定して、「絶対パス」と「相対パス」の違いを見ていきましょう。

絶対パスによるリンク指定

「絶対パス」は、HTTPからのアクセスに対して絶対的な場所を表す書き方です。住所に例えると、「日本国/東京都/渋谷区/何丁目/何番地」という風に、可能な限り詳しい住所を記述する形式になります。フルアドレスと言い換えることもできます。

HTML
絶対パスの例
<a href="http://weblan3.com/html/reference-hyperlink">このページへジャンプ</a>
表示確認
このページへジャンプ
※別タブで開くように設定しています

このように、アドレスバーに表示されるURLと同じように「http」から始まるインターネット上の住所を全て記述します。絶対パスは、主に自分のサイトから外部のサーバーに置いてあるファイルにアクセスする場合に使用します。

相対パスによるリンク指定

「相対パス」は、リンク元のファイルが存在している位置から、リンク先のファイルの存在位置を相対的に見た記述の仕方を取ります。同じサーバーに置いてあるファイルの場合、httpから記述するフルアドレスは必要ないので、ドメインの部分を省略することができます。住所に例えると、東京都内から手紙を出す場合に「渋谷区/何丁目/何番地」と省略しても届くという具合です。

HTML
相対パスの例
<a href="reference-hyperlink">このページへジャンプ</a>
表示確認
このページへジャンプ
※別タブで開くように設定しています

相対パスは、リンクを設置しているファイルの場所から、リンク先のファイルが「相対的に」どこにあるかによって記述内容を指定します。次の例を見て下さい。

public
|
| index.html
| about.html
|
+-- page / p001.html
	|      p002.html
	|      p003.html
	|
	+-- log / log001.html
	|         log002.html
	|         log003.html
	|
	+-- img / top.gif
	          sub.gif

この場合、「public」というフォルダに「index.html」などのHTMLファイルと「page」というフォルダが入っています。これが一階層目です。

次に「page」というフォルダの中には「p001~003.html」というファイルと「log」、「img」というフォルダが入っています。これがニ階層目になります。

そして「log」、「img」フォルダには、更に別のファイルが入っています。これは三階層目にあたります。

【パターンA】
表示しているページが置いてある階層と、リンク先のファイルが同じ階層に置いてある場合は、<a>タグのhref属性にファイル名を記述します。

HTML
[p001.html]から[p002.html]へリンクする場合
<a href="p002.html">リンクする文字列</a>

【パターンB】
表示しているページが置いてある階層よりも、リンク先のファイルが置いてある場所が下の階層になる場合は、<a>タグのhref属性に「フォルダ名/ファイル名」と記述します。

HTML
[index.html]から[p001.html]へリンクする場合
<a href="pagefile/p001.html">リンクする文字列</a>

【パターンC】
表示しているページが置いてある階層よりも、リンク先のファイルが置いてある場所が上の階層になる場合は、<a>タグのhref属性に「../ファイル名」と記述します。

HTML
[p001.html]から[index.html]へリンクする場合
<a href="../index.html">リンクする文字列</a>

相対パスのメリットは、ローカルでファイルを作成している段階でフォルダ分けをして整理が出来る事と、HTTPからのドメインを記述しないため、サイト移転などでURLが変わってもリンクに影響がないので、メンテナンスの必要が無いという事です。基本的に、自分のウェブサイト内で別のページにリンクする場合は、相対パスを使いましょう。

ハイパーリンクのまとめ

自分のサイト内のファイルにリンクする場合には「相対パス」でリンクした方が楽に管理できます。画像ファイルなどは、一つのフォルダにまとめておくと何処に何が置いてあるのか分かりやすくなるので、結果的に作業効率がアップします。

<a>タグはHTMLを記述する上で、最も重要かつ使用頻度の高い要素です。リンクを使いこなして、ウェブページ同士をつなぎ、使いやすいウェブサイトを目指して下さい。

HTMLリファレンス

HTMLって何? 初めての方でも分かる超基礎知識を解説します
HTMLの書き方 HTMLタグの書き方と基本的なルールについて
HTMLファイルの作り方 HTMLファイルを作成してから保存するまで
改行と半角スペース HTMLで改行や半角スペースを扱う際のルール
ハイパーリンクについて ドキュメントをリンクでつないでみましょう
ヘッダー情報について HTMLドキュメントのヘッダー情報について
ディレクトリの意味 「ディレクトリ」という言葉の意味
HTMLとXHTMLの違い XHTMLでWebサイトを作る際の特徴とルール