リンクを張る

ついにリンクを張る時が来ました。リンクを張るにはURLの表し方を知らないといけないので、ぜひここでマスターしましょう。

目次

リンクを張る

ホームページの醍醐味といえばやっぱりリンクですね。正確にはハイパーリンクといいます。

リンクを張るにはa要素を使います。href属性で、<a href="リンク先URL">文字列</a>のようにURLを示します。

<p><a href="http://www.google.co.jp/">Google</a></p>

Google

a要素はインライン要素です。<h1>〜</h1>や<p>〜</p>の中で使ってください。

「○○の情報はこちら」「○○を見るにはここをクリック」といったように、リンクの文字列を「ここ」「こちら」「ここをクリック」などにしているページがたくさんありますが、このようなリンクの張り方はよくありません。(「here症候群」と呼ばれています。)リンクの文字列はなるべくリンク先の内容をあらわすものにしましょう。

悪い例：新しく○○のページを追加しました。ここをクリックしてご覧ください。

よい例：新しく○○のページを追加しました。

URLの中に&が含まれるときは、実体参照を使い&amp;としないといけません。

誤：http://www.google.co.jp/search?q=%E5%AE%9F%E6%85%8B%E5%8F%82%E7%85%A7&ie=utf-8&oe=utf-8

正：http://www.google.co.jp/search?q=%E5%AE%9F%E6%85%8B%E5%8F%82%E7%85%A7&amp;ie=utf-8&amp;oe=utf-8

URLの表記

「URL」という言葉はみなさんも聞いたことがあると思います。http://www.yahoo.co.jp/ みたいなやつで、ページの住所に当たるものです。これからURLの仕組みをちょっと詳しく勉強しましょう。

URLのあらわし方には絶対URLと相対URLの二つがあります。

絶対URL

絶対URLとはURLをhttp://から全部書く方法です。

http://www.example.jp/docs/page1.html

上のURLでhttpの部分をスキームといいます。(「プロトコル」と説明している本やサイトがありますが間違いです。)

www.example.jpの部分をホスト名といいます。インターネット上のコンピュータの名前のことです。

/docs/page1.htmlの部分がパスです。この例では「docsフォルダの中のpage1.htmlというファイル」をあらわしています。

(図)www.example.jp→docsフォルダ→page1.html

同じコンピュータ内のファイルをリンクさせるなら、「http://ホスト名」の部分を省略することができます。ですから上のURLは「/docs/page1.html」でもOKです。

相対URL

相対URLとはあるファイルを基準にしたURLです。これが意外と難しかったりします。気合入れていきましょう！

同じフォルダにあるファイルへリンク

folder1(page1.html page2.html) [page1.htmlからpage2.htmlへ]

あるファイルから同じフォルダにあるファイルにリンクするときは、そのファイル名を書くだけです。これは簡単ですね。

<p><a href="page2.html">ページ2</a></p>

フォルダの中にあるファイルへリンク

folder1(page1.html folder2(page2.html)) [page1.htmlからpage2.htmlへ]

フォルダの中に入っているファイルにリンクするときは、次のように書きます。

<p><a href="folder2/page2.html">ページ2</a></p>

「フォルダ名/ファイル名」ってことです。

深いフォルダの中にあるファイルへリンク

folder1(page1.html folder2(folder3(page2.html))) [page1.htmlからpage2.htmlへ]

フォルダの中の中に入っている場合は、フォルダ名を/で区切って書きます。

<p><a href="folder2/folder3/page2.html">ページ2</a></p>

「フォルダ名/フォルダ名/フォルダ名/…/フォルダ名/ファイル名」となります。これでどんなにフォルダが深くなっても大丈夫ですね。

ここまでが前半です。あと半分、がんばろう(^o^)／

一つ上のフォルダにあるファイルへリンク

folder1(page1.html folder2(page2.html)) [page2.htmlからpage1.htmlへ]

ここから重要です。一つ上のフォルダは「..(ピリオド二つ)」であらわします。一つ上のフォルダに入っているファイルは次のようにあらわします。

<p><a href="../page1.html">ページ1</a></p>

「../ファイル名」です。

二つ以上上のフォルダにあるファイルへリンク

folder1(page1.html folder2(folder3(page2.html))) [page2.htmlからpage1.htmlへ]

二つ以上上のフォルダなら次のようになります。

<p><a href="../../page1.html">ページ1</a></p>

「../../../…/../ファイル名」と、上のフォルダに戻る分だけ「../」をつけてあげればいいですね。

より複雑なリンク

これで相対URLの説明もおしまい！最後にちょっと応用的なリンクをやってみましょう。

folder1(folder2(folder3(page1.html)) folder4(folder5(page2.html))) [page1からpage2へ]

図のpage1.htmlからpage2.htmlにリンクするにはどうすればいいでしょうか？基本は一つ上のフォルダは「..」、一つ下のフォルダは「フォルダ名」であらわすってことです。それではやってみましょう。

まず、page1.htmlから二つ上のfolder1に戻らないといけないので「../../」です。さらにそこからfolder4、folder5とたどるので、「../../folder4/folder5/」。最後にファイル名をつけて「../../folder4/folder5/page2.html」で完成です。

<p><a href="../../folder4/folder5/page2.html">ページ2</a></p>

まとめ

難しかったですか？「余裕！」って人はこれで一つ関門をクリアしたと思ってください。「ちょっとまだ…」な人は自分のファイルをがんがんリンクさせて練習しましょう！

Information

現在の位置