ファイル名とリンク

ファイルとフォルダ

Microsoft Windows や Apple Macintosh などの場合、「ファイル」を「フォルダの中に収納する」という操作ができるように設計されています。また、フォルダの中にフォルダを作ることも可能になっています。

いま、「handmade-www」というフォルダの中に「doc」というフォルダと、「index.html」というファイルがあり、「doc」の中に「coloring.html」というファイルがあるとします。この状態は、次のように、樹状図で表せます。

[handmade-www]
      |
      +--[doc]
      |    |
      |    +--[coloring.html]
      |
      +--[index.html]

こうした関係は、全体の見取図を描く際には複数の枝を持つ樹状になりますが、ある特定のファイルを表す際には、次のような表現になるでしょう。

[handmade-www]-[doc]-[coloring.html]

[handmade-www]-[index.html]

WWWのファイル名

さて、World Wide Webの「ページ」を見ようとする際、開こうとするページを指定するために、「http://www.asahi-net.or.jp/˜sd5a-ucd/index.html」というような「URL (Uniform Resource Locator)」を使います。

この「http://」から後ろは、『「www.asahi-net.or.jp」というコンピュータのディスクにある、「˜sd5a-ucd」というフォルダの中にある、「index.html」という名のファイル』という内容を意味しています。

いま、「˜sd5a-ucd」の中に「handmade-www」というフォルダがあり、その中にも「index.html」という名前のファイルがあるとすると、そのURLは次のようになります。

http://www.asahi-net.or.jp/˜sd5a-ucd/handmade-www/index.html

WWWでは、様々なファイルの1つ1つを、このような形式の固有名 (URI: Uniform Resource Identifier) で呼び表すようになっています。URLはURIの中の1形式です。

わたしたちのように接続業者の会員として借りたディスクにファイルを置かせてもらうことでWeb「ページ」を公開しようとする立場の場合、「http://業者のWWWサーバ名/割り当ててもらった個人フォルダ/」の中に、「ページ」のファイルを置いてゆき、それがそのままURLということになります。

そんなわけで、ファイル名やフォルダ名はURLの名付け規則による制限を受けることが前提となります。この前提があるために、「まず1つ作ってみよう」の最後に、「ファイル名は半角英数で、間にスペースを開けたりせずに、つける」と書いたのでした。

特定語句から別のページにリンクする

Webの「ページ」では、リンクの起点になっている語句やボタンをマウスでクリックしたりしてアクティブ(活動状態)にすると、そのリンクが指し示している相手ファイルが受信されるようになっています。

文中の特定語句をリンクの起点アンカー(anchor)として働かせる場合、HTMLではa要素で表し、次のようにマーク付けします。

<a href="http://www.asahi-net.or.jp/˜sd5a-ucd/index.html">最初のページへ</a>

開始タグが「要素名 属性名="属性値"」という形式を持っており、ここではhref属性とその値であるURLによって、リンクの相手ファイルを表します。

別ページから特定語句にリンクする

a要素は、起点アンカーだけでなく、ページ中の特定語句をリンク目標とする際の目標アンカーを表現する際にも用います。特定語句を目標アンカー(target anchor)として働かせる場合、次のようにマーク付けします。

特定語句を<a name="anchor-name">目標アンカー</a>にする。

このページのURLが「http://www.asahi-net.or.jp/˜sd5a-ucd/www/filename.html」だとすると、別ページから上の目標アンカーにリンクを張る場合、リンク先URLの最後が「ファイル名#目標アンカー名」となるような形でマーク付けします。

<a href="http://www.asahi-net.or.jp/˜sd5a-ucd/www/filename.html#ancho-name">目標アンカーへ</a>

完全URLと相対URL

例えば「筆者がどこに住んでいるか」を示すのに、多くの場合「仙台市青葉区…」というぐあいに説明します。これは、URLによってファイルの呼び名を表すのに似ています。一方、同じ建物の中に住んでいる人同志の場合は「上の階の内田です」というような説明で話が通ります。これと同様に、同じコンピュータのディスクに記録されているファイル同志で相手へのリンクを表現する場合、こうした省略が可能です。

一般に、「仙台市…」のように記すURLを「完全URL (full URL)」あるいは「絶対URL (absolute URL)」と呼び、「上の階の…」のように記すURLを「相対URL (relative URL)」と呼びます。

さて、URLの書き方では、ここまで「フォルダ」と呼んでいたものを「ディレクトリ」と呼び、「このフォルダののそのフォルダ」のことは「このディレクトリののそのディレクトリ」という具合に表現します。筆者は理由を知らないのですが、ディレクトリは、どんどん下に「掘って」いったり「降りて」いったりする、という表現をするもののようなのです。

ここで2つのファイルの関係を考えます。「http://www.asahi-net.or.jp/˜sd5a-ucd/handmade-www/doc/coloring.html」から見た「http://www.asahi-net.or.jp/˜sd5a-ucd/handmade-www/index.html」は、「自分のディレクトリより1つ上のディレクトリhandmade-wwwにあるindex.htmlというファイル」だ、という位置関係として表せます。ちょうど、建物の中の「上の階の誰々さん」といった関係ですね。

この関係でcoloring.htmlからindex.htmlへのリンクは、次の相対URLで表します。

<a href="../index.html">indexのページ</a>

逆にindex.htmlからcoloring.htmlへのリンクは、次の相対URLになります。

<a href="./doc/coloring.html">coloringのページ</a>

完全URLの書き方と比べてみましょう。「./」は「自分のディレクトリ」を指す記号で、「../」は「自分のすぐ上のディレクトリ」を指す記号なのです。(自分と同じディレクトリを指し示す場合は、「./」を省略することもできます。上位のディレクトリを示す「../」は、省略できません。)

このページで扱った内容について、詳しくはHTML 4仕様12.1節以下をご覧ください。


目次/詳細目次

まず1つ作ってみよう

色を変えてみたりする

HTMLの基本的な要素

ファイル名とリンク

画像などをページに貼り付ける

ページレイアウト

リストと表

フォームとスクリプト

HTML化する文章と文字

Web用の文章の組み立てを考える

HTMLで表せない型や要素

ドキュメントオブジェクトとDynamic HTML


Thanks a lot for many visits since April 13, 1999.

1999 - 2001 内田明
uchida@happy.email.ne.jp