リンクとは、クリックすることでホームページ内の違うページに飛んだり任意のサイトに飛んだりする、ウェブページを移動する機能になります。

ホームページを作る上で重要な機能になりますし、使用する頻度も高い機能になります。

Advertisement

1.別ページを作成する

まず、作成前の下準備で作成した、homepageフォルダ内に、indexファイルに加え新たなhtmlファイルを作成します。

ファイル名は任意で構いませんが、此処では「link.html」にしておきます。

そして、link.htmlのソースコードを下図の様にします。

ソースコード

image18

コピー用

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>linkファイル</title>
</head>

<body>
<p>正しくリンク出来ています。</p>
</body>
<html>

これで、homepageフォルダ内は数の様になっているはずです。

homepageフォルダ内

image17

2.サイト内でリンクする

同一サイト内でのページ移動を説明します。

リンクを設置するためには、aタグにhref属性を付け、値にリンク先となるURLを指定すれば aタグに囲まれた部分が実際にリンクになります。

indexファイルのbody内に「<a href="link.html">クリックすればlinkファイルにジャンプします。</a>」と書き込んで下さい。
indexファイルとlinkファイルを同一フォルダの中に保存していなければこの記述ではリンクは機能しません。※詳しくは「3.パスの解説」で説明します。

タグ内の文章は任意で変更して構いませんが、aタグ内がリンクになる事は覚えておいて下さい。

現在は、下図の様なソースコードになっているはずです。

ソースコード

image19

コピー用

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>リンクさせます。</title>
</head>

<body>
<a href="link.html">クリックすればlinkファイルにジャンプします。</a>
</body>
<html>

すると、ブラウザ上では下図の様にaタグ内の文章がリンクとなり文字色が変化し下線がついていると思います。

ブラウザ

image20]

文字をクリックしていただければ、「1.別ページを作成する」で作成した、linkファイルにジャンプするはずです。

文字を変化させるの項目の「3.リストを作る」で解説した技術と、今回解説したサイト内リンクを併用すれば、サイト内のページメニューが作成できるはずです。

3.パスの解説

リンクを理解するには、パスの構造を理解しなければなりません。
パス構造はリンクを扱う上で重要ですので、必ず覚えておいて下さい。

2.サイト内でリンクするの項目で、link.htmlにリンクする方法を解説しました。
この場合、<a href="link.html">の赤文字で表示されている部分はURLとなります。

簡単に言うと、URLとはウェブ上の住所のようなものです。
そして、URLには相対パスと絶対パスが存在するのです。

皆さんに作ってもらった、homepageフォルダ内は現時点で下図の様になっていると思います。

homepageフォルダ内

image17

このフォルダとファイルの位置づけはそれぞれ

homepageフォルダ内のimageフォルダ

homepageフォルダ内のindexファイル

homepageフォルダ内のlinkファイル

といった位置づけになります。

この仕組みを「階層」と呼びます。
そして、ウェブ上では階層を/で区切ります。

ソースコードにURLを記載する場合は、正しく階層を指定しなければなりません。
つまり上図の場合、それぞれのURLは

homepage/image

homepage/index.html

homepage/link.html

という記述になるのです。

もしも、imageフォルダ内にindexファイルがあるとしたら、indexファイルのURLは
homepage/image/index.htmlとなるわけです。

2.サイト内でリンクするの項目で、出てきた<a href="link.html">ではhomepegeフォルダ内のindexファイルから、同一階層にあるlinkファイルにリンクしているので、パスはファ イル名だけで良いのです。
しかし、もしimegeフォルダ内にlinkファイルがある場合は、<a href="imege/link.html">という記述になります。
これは、indexファイルから見て、同一階層にいるimegeフォルダの中(つまりはひとつ下の階層)のlinkファイルにリンクさせる記述です。

この様な、リンクする側を支点としてパスを指定する事を、相対パスと呼びます。

そして、 <a href="homepage/imege/link.html">の様に、URLの階層を頭から全て記述する事を絶対パスと呼ぶのです。
絶対パスで記述している場合は、ファイルとフォルダの位置関係を考えずにどこからでも使用できます。

少々分かりづらい説明になってしまったかもしれませんが、理解して頂けたでしょうか。

4.別サイトにリンクする

サイト外のウェブページにリンクする場合は、絶対パスを使います。

例として、世界最大の検索エンジンであるgoogleのトップページにリンクして見ましょう。

googleのトップページは下図の様になっております。

googleトップページ

image24

画面上部の、赤枠に囲まれているのが、googleトップページのURLであります。

別サイトにリンクする場合の方法も、「2.サイト内でリンクする」で解説した方法とほぼ同様になります。
aタグにhref属性を指定し、値にgoogleトップページのURLを入力すると
<a href="http://www.google.co.jp/"> となります。

では、2.サイト内でリンクするで使用したindexファイルにソースコードを追加記入してみましょう。

ソースコード

image25

コピー用

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>リンクさせます。</title>
</head>

<body>
<a href="link.html">クリックすればlinkファイルにジャンプします。</a>
</ br>
<a href="http://www.google.co.jp/">クリックすればgoogleトップページにジャンプします。</a>
</body>
<html>

<br />は改行の為に入れてあります。

ブラウザ上では下図の様になっているはずです。

ブラウザ

image26

これでこのページに、サイト内へのリンクと、サイト外へのリンクが出来たわけです。

aタグにリンクしたいページのURLを貼ることによって、Web上にあるページならばどこにでもリンクさせる事ができますので、用途にあわせて利用して下さい。
※中には無断でのリンクを禁止しているサイトもありますので気をつけて下さい。

5.ページ内にリンクする

サイトのページ内に内容がつまり過ぎてしまった時などは、同一ページ内にリンクする事もできます。

ページ内にリンクをしたい場合は、リンク先にアンカータグを設置する必要があります。
つまり、リンクをクリックした際に移動する先に印をつける様なものです。

アンカータグは、aタグにneme属性を追加します。

アンカータグのソースコードとしては下図の様になります。の部分は任意で決めて頂いて構いませんし、アンカータグ内に文字を入力する必要もありません。

<a name="">ジャンプ先</a>

アンカータグにジャンプするためのリンク元は、通常のリンクと同様にaタグにhref属性になります。

そして、href属性の値をアンカータグで指定したに指定します。
アンカータグをURLとして指定する際には必ず値の前に「#」を記入します。

また、別ページのアンカータグにリンクする場合は、「#値」の前にアンカータグが設置されているURLを記載する事で可能です。
例えば、linkファイルのアンカータグにリンクする場合、URLは「link.html#」となります。

リンク元のソースコードは下図の様になります。
にはアンカータグのnemeで指定したを記入して下さい。

<a href="#">アンカータグにジャンプします。</a>

<a href="link.html#">別ページのアンカータグにジャンプします。</a>

ためしに、アンカータグに飛んでみましょう。
ページ内の「1.別ページを作成する」と、作成前の下準備の項目の「2.テキストエディタの用意」にアンカータグを設置しています。
下記をクリックすれば、アンカータグまでジャンプします。

いかかでしょうか、リンクの仕組みは理解できましたか。

次は、ホームページに画像を反映させる項目です。
画像を表示するに進んで下さい。

Big-Sea All rights reserved.2010-2013
当サイト内の文章、画像など、すべての無断使用、転載を禁じます。