リンク

  1. リンクとは
  2. リンクの実例
  3. リンクのマークアップ
  4. href属性を付ける
  5. href属性の属性値を記入する
  6. URIとは
  7. href属性の属性値にURIを記入する
  8. URIの種類
  9. 完全URIとは
  10. 相対URIとは

リンクとは

リンク(link)とはあるリソース(resource)とリソースの結び付きの事を言います。また、動詞としての意味も持ち合わせており、リソース間を結びつけるという意味も持ちます。皆さんもこのページに辿り着くまでに多くのリンクを辿って来たことでしょう。HTMLでリンクと言えば主にhyperlink(ハイパーリンク)の事を指し、今後の説明でも特に断りがない場合はそれを示します。

リソースとは資源の事で、ここではHTMLファイルをはじめとした、画像ファイルや音楽ファイルなどの事を表しています。system resource(システムリソース)とは特に関係はありません。

リンクの実例

実例を挙げるまでもないかもしれませんが、次のような物をリンクと言います。

上のように記述する事によって、このページ(リソース)とGoogleのページ(リソース)が関係を持ちました。この関係、もしくは状態をリンクと呼びます。この「Google」や「真面目に創るホームページ」の文字列のことをリンクと呼ぶこともありますし、実際にはそれで通りますが、説明の便宜上アンカー(anchor＝錨・支えの意[リレーの最終競技者のアンカーと同じ])と呼ぶことにしましょう。このページと google のページがイカリと鎖で繋がれているようなイメージが持てますでしょうか(少し重々しいですが)。リンクとはそのようにして各リソースが繋がっている事を言います。(クモの巣とか糸とかの方がイメージし易いかな)

色々な所にあるたくさんのページがそれぞれ繋がっているのですね。

リンクのマークアップ

前項の補講でマークアップという言葉を勉強したので、これからは積極的にこの言葉を使用して行きたいと思います。リンクのマークアップには<a>〜</a>を用います。a は anchor の頭文字(略)です。意味は前述の通りです。

手順1
文書の中からリンクさせたい文字列を決定します。
手順2
その文字列を<a>〜</a>で挟みます。 
<h1>ララの世界</h1>

<p>
ご訪問ありがとうございます。ララの世界は管理人ララが趣味でなんとなく運営しているサイトです。今のところは日記や写真、掲示板しかありませんが、もっと頑張って素敵なサイトにして行きたいと思っていますので、どうぞ宜しくお願いします。
</p>

<h2><a>自己紹介</a></h2>
<p>私のプロフィールです。</p>

<h2><a>ラララ日記</a></h2>
<p>日々の記録です。</p>

<h2><a>ララの写真館</a></h2>
<p>なんとなく撮った写真を公開しています。</p>

<h2><a>掲示板</a></h2>
<p>一言お寄せください。</p>

<h2>リンク</h2>

<h3><a>お友達リンク</a></h3>
<p>ネットで知り合った私の友人が運営しているサイトです。</p>

<h3>お役立ちリンク</h3>

<h4><a>ホームページ</a></h4>
<p>ホームページを創るのにお世話になったサイトです。</p>

<h4><a>その他</a></h4>
<p>その他のお役立ちサイトです。</p>

後述しますが<h2><a>自己紹介</a></h2>であり、<a><h2>自己紹介</h2></a> となっていない事に注意してください。また、<h2><a>自己紹介</h2></a> などともなり得ません。

結果
アンカーのマークアップが完成しました。(まだリンクはされていません)

どうして逆だとダメなんですか？

後述しますが、各要素(タグ)はブロック要素と呼ばれる物と、インライン要素と呼ばれる物に分かれるのです。その関係で逆にはなれないのです。意味的に考えていただければわかると思います。例えば自己紹介のリンクを例にすると、自己紹介というリンクされている言葉が見出しになっているのです。自己紹介という見出しがリンクされている状態とは異なります。

それじゃあ互い違いにするのは何でダメなの？

ダメなものはダメなのと覚えた方が早いと思うのですが・・・

href属性を付ける

ここで初めて属性という言葉が出てきました。以前 『< と > で挟まれた物をHTMLタグ(tag)と呼びます』と書きましたが、< と > で挟まれた物の中にはこの属性(attribute)も入ります。そしてその属性は属性名とその値である属性値(attribute value)というもので構成されています。挿入のされ方は開始タグの要素の後に半角スペース分だけ空け <要素 属性名="属性値"> というように記述します。リンクの場合は<a href="URI">〜</a>のようになります。

手順1
a要素 に href属性(名) を加えて行きます。 
<h1>ララの世界</h1>

<p>
ご訪問ありがとうございます。ララの世界は管理人ララが趣味でなんとなく運営しているサイトです。今のところは日記や写真、掲示板しかありませんが、もっと頑張って素敵なサイトにして行きたいと思っていますので、どうぞ宜しくお願いします。
</p>

<h2><a href="">自己紹介</a></h2>
<p>私のプロフィールです。</p>

<h2><a href="">ラララ日記</a></h2>
<p>日々の記録です。</p>

<h2><a href="">ララの写真館</a></h2>
<p>なんとなく撮った写真を公開しています。</p>

<h2><a href="">掲示板</a></h2>
<p>一言お寄せください。</p>

<h2>リンク</h2>

<h3><a href="">お友達リンク</a></h3>
<p>ネットで知り合った私の友人が運営しているサイトです。</p>

<h3>お役立ちリンク</h3>

<h4><a href="">ホームページ</a></h4>
<p>ホームページを創るのにお世話になったサイトです。</p>

<h4><a href="">その他</a></h4>
<p>その他のお役立ちサイトです。</p>
結果
a要素 に属性値が空の href属性(名)が付属されました。(属性値が空なのでまだリンクはされていません)

<属性名="属性値">というまとまりを主に属性と言います。一般的に属性名のことを属性と言う事もあります。細かい言葉に拘る必要はないと思うので特に注意を払いませんが、こういった違いがあるのだと知っておいてください。

URIは入れないんですか？

ここはリンク先によって流動的に変わるものなので、絶対にコレが入ると決まっていないのです。ですので、次から少しずつ詳しく説明して行きます。

href属性の属性値を記入する

タグと同じように属性にも色々な種類がありますが、属性によってその属性値は様々です。どのような属性があり、どのような属性値が入るのかはその都度説明して行きます。今回の href属性 にはURIが入ります。つまり<a href="URI">という形になります。

URIとは

URIとは Uniform Resource Identifier のことで、リソースが存在する場所を示す物です。本当はURLの方が説明し易いのですが、諸事情によりURIでという言葉で説明して行きます。包含関係にまつわる違いがあるのですが、ここではほぼ同意で扱っていきますので、URIと書いてあったら、URLの事だなと思ってください。URLとは Uniform Resource Locator のことで、これまたリソースの存在する場所を示す物です。わかり易く言えば http://〜 などのアドレスと思って頂いても良いかもしれません。URIとURLの違いは各自でお調べください。「URLとURI」などのキーワードで検索してみる事をお勧めします。

href属性の属性値にURIを記入する

今までの流れで行くのならばこちらが用意したサンプルにURIを記入して行くのですが、このURIの記述方が少々特殊で、初心者の方が一番最初に躓く所でもあります。ですので、サンプルに実際に記入するのは一番最後にして、ここからはじっくりとURIの記述方法について勉強して行きたいと思います。先ずは実際の例を見て頂きたいので、このページの最初の方に登場した Google へのリンク方法の手順を紹介します。復習の意味も込めて、上と同じ手順も繰り返しています。

手順1
リンクさせたい文字列を記入します。 
Google
手順2
リンクさせたい文字列にアンカーのマークアップをします。 
<a>Google</a>
手順3
アンカーに href属性 を付加します。 
<a href="">Google</a>
手順4
href属性 の属性値に(完全)URIを記入します。 
<a href="http://www.google.co.jp/">Google</a>
結果
Google へのリンクが完成しました。 
Google

上の記述は試さなくても結構です。そんな風にリンクをするのだと覚えてください。実際にリンクさせてみたい人は上記のソースを <body>〜<body> 間の <p>その他のお役立ちサイトです。</p> の中にでも一時的に記入してみてください。次のような感じです。<p>その他のお役立ちサイトです。<a href="http://www.google.co.jp/">Google</a></p>

URIってホームページアドレスの事ですか？それから(完全)って何ですか？

ホームページを創るだけならそう思っていても問題は無いと思うのですが、違うという事は知って置いてください。後の質問については次から説明します。

URIの種類

URLやURNという物を含んだ物なのですが(詳しくは検索してください)、そのURIも二種類に分類されます。その一つを 完全URI(full URI) と呼び、もう一つを 相対URI(relative URI)と呼びます。

完全URIとは

完全URI(full URI) とはそのリソースが存在する場所を、その名の通り完全に表した物を言います。絶対URI (absolute URI)とも呼びます。(絶対パスなどとも言います)

相対URIとは

相対URI(relative URI) とは完全URIとは違って、ある特定の条件の中から、そのリソースの場所を表す場合に用いる物を言います。(相対パスなどとも言います)

これらの呼び方には諸説があり。様々な呼び方が横行しています。そしてその微妙な違いすら無視される傾向にあるようです。おそらくは『 完全(絶対)URI 』と『 相対URI 』が正しいと思いますが、URIというよりも、慣れ親しまれているURLとされることが多く、また、それすらも「パス」という言葉に置き換えられています。つまりは【絶対パス】【相対パス】と称されているようです。したがって、これから先の説明では、そのように呼ぶことにします。

つまり http://www.google.co.jp/ は絶対パスってこと？

そういう事になりますね。

それじゃあ相対パスは？

自分のサイト内でリンクをする場合に用います。詳しくは 後述 します。

[ トップページ ] [ 目次 ] [ ページの先頭 ] [ 前項目 ] [ 次項目 ]

Google