ウェブサイトの“書き方”(6)~リンクでウェブページを結ぶ｜web design－havin' a coffee break

＃

ハイパーリンク

最初の記事でも紹介したとおり、HTMLは文書間をハイパーリンク、いわゆる“リンク”によって結びつけることができ、リンクで結ばれた複数のウェブページによってウェブサイトが形成されます。

リンクはウェブサイトのもっとも大事な機能といっても過言ではないですが、とても簡単に埋め込むことができます。



<a href="sample.html">リンク</a>

“<a>”でリンクにする文字を囲み、リンク先のページの場所を“href”属性で指定します。“<a>”に囲まれた文字はリンクになり、リンクをクリックすると指定した遷移先のウェブページに移動することができます。

＃

リンク先の表し方

相対パスと絶対パス

リンク先の表し方には“相対パス”と“絶対パス”の2種類があります。

相対パス
リンク元を基準として目的のファイルとの相対的な位置で指定する方法。
例えるなら「3つ目の角を右に曲がって突き当りを左に曲がって...」というように“道のり”で場所を表すようなイメージです。: 絶対パス
リンク元とは関係なく絶対的な位置で指定する方法で“http://”などから始まるインターネット上のURLで指定します。
例えるなら住所で場所を表すようなイメージです。

相対パス

相対パスでは、“./”がリンク元と同じ階層、“../”が一つ上の階層を表し、それに続けてフォルダ名やファイル名を書きます。

“./”は省略できるので通常は同じ階層にあるファイルにリンクする場合は単にリンク先のファイル名だけを記します。

リンク先がリンク元よりも上位の階層にあったり、他のフォルダにある場合は“../”は1個以上組み合わせてリンク元からリンク先までの“道のり”を表します。

例として、以下のような階層構造のウェブサイトがあるとします。

以下では相対パスで表したリンク先の書き方の例を挙げます。

“banana.html”から“apple.html”へリンクする場合
同じ階層にあるのでリンク先は“apple.html”となります。: “banana.html”から“mangosteen.html”へリンクする場合
一つ下の階層にあるのでフォルダ名とファイル名を続けて書き、リンク先は“tropical/mangosteen.html”となります。: “banana.html”から“index.html”へリンクする場合
一つ上の階層にあるのでリンク先は“../index.html”となります。: “banana.html”から“tomato.html”へリンクする場合
別の階層にあるので、「一つ上の階層の“vegetables”というフォルダの...」というようにリンク先は“../vegetables/tomato.html”となります。

深い階層構造の場合は“../”を階層の数だけ重ねます。

“mangosteen.html”から“index.html”へリンクする場合
二つ上の階層にあるので“../”を二つ続けて記述してリンク先は“../../index.html”となります。: “index.html”から“mangosteen.html”へリンクする場合
二つ下の階層にあるのでリンク先は“fruits/tropical/mangosteen.html”となります。

通常は相対パスはリンク元のファイルを基準としてリンク先を表しますが、常にそのリンク元のファイルがある階層構造の最上位の階層を基準とする“ルート相対パス”もあります。ルート相対パスでは“/”に続いて最上位の階層からリンク先のファイル名までの“道のり”を表します。例えば、同じウェブサイトのどのウェブページからリンクしても“mangosteen.html”へのリンクは“/fruits/tropical/mangosteen.html”です。

絶対パスと相対パスのどちらが良いか？

同じウェブサイト内でも絶対パスを使用することができますが、相対パスを使用するのが一般的であり、よりシンプルにリンクを表すことができます。

また、相対パスにはウェブサーバーにアップロードしなくてもウェブサイトがしっかり機能しているか確認できるという利点もあります。

＃

リンクを埋め込む

前回の記事までに作ったホームページとコンテンツとなるウェブページをリンクで結んでいきます。



<!DOCTYPE html>

<html lang="ja">


<head>


<meta charset="UTF-8">

<title>果物を食べる</title>


</head>

<body>




<h1>果物を食べる</h1>

<p>美味しいフルーツについて紹介していきます。</p>



<h2>メニュー<h2>

<nav>


<ul>


<li><a href="apple.html">りんご</a></li>

<li><a href="peach.html">もも</a></li>

<li><a href="banana.html">バナナ</a></li>

<li><a href="mangosteen.html">マンゴスチン</a></li>

<li><a href="link.html">リンク</a></li>

<li><a href="contact.html">連絡先</a></li>


</ul>


</nav>



<p>&copy; copyright 2015 Frouts wo taberu</p>




</body>


</html>

ついでにリンクによってコンテンツと結んだメニューはナビゲーションを表す“<nav>”で囲んでいます。

HTMLファイルを保存したら“index.html”をブラウザで開いてみます。リンクになった文字は通常青文字になり、下線が引かれます。

リンクをクリックしてリンク先として設定したページに遷移できれば正しくリンクが埋め込めています。

あとはコンテンツからホームページへ戻るリンクも必要になるので、同様に設定します。



<a href="index.html">トップに戻る</a>