Home | 第59号 | 第60号 | 第61号 | 目次

初心者のためのホームページ作り　第60号

Web作成支援

メールマガジン「初心者のためのホームページ作り」でお伝えした内容を、「復習」の意味で掲載しています。テキストのみのマガジンと違って、実際のサンプルや画像を交えて解説していますので、理解が深まると思います。なお、疑問点や分からない点がありましたら、遠慮なく メールにてご質問ください。

プレーンテキスト版バックナンバー

＜第60号＞ 今週のおさらい
　　　　　　　　　　　　　　　　　  毎週金曜日配信　What's New 2003/7/25
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
　　　■ HTML講座  ８７回 --- リンクとパス
　　　■ XHTML講座　第20回 --- XHTML2.0概要
◆ HTML講座 --- リンクとパス
HTMLは、他のリソースにリンクする機能が備わっています。これによって簡単にページを移動することができます。
トップページから導かれる各ページへのリンクは、こうした機能を利用することで、複数のページと関連付けます。
■ リンクの設定
通常、他のサイトへリンクする場合には、そのアドレスを記述します。これを 「絶対パス」と呼びます。
<a href="http://www.google.com/">Google Search</a>
これによって、ユーザはそのリンクをクリックすると、Google検索サイトに移動することができます。
しかし、自分のサイト内で、ページを移動する場合には、一般的に「絶対パス」を用いることはありません。そのほとんどで 「相対パス」を用います。相対パスを利用する上で、ディレクトリ構造を知っておくことは重要です。
■ ディレクトリ
ディレクトリとは、一覧表とか、目次などを表しますが、UNIX上で書類や文書の入れ物として扱われます。ディレクトリは「ツリー構造」になっていることが一般的です。
ディレクトリ構造 左の図は、A〜Fまでのディレクトリをツリー構造で示した例です。

A のディレクトリには、B と C のディレクトリが存在します。

B のディレクトリには、D と E の２つのディレクトリが存在しています。そしてまた、C のディレクトリには、F というディレクトリがあります。

逆にいえば、D と E の２つのディレクトリから見た親となるディレクトリは B であることが言えます。このように、ディレクトリは必ずツリー構造になっているのです。

それぞれのディレクトリに 「index.html」 という名の HTML文書があったと仮定して相対パスについて解説しましょう。
■ 相対パスとディレクトリ階層
ディレクトリの「ツリー構造」とは、分かりやすく言えば「階層構造」です。上記の図では、３層の階層であることが理解できるでしょう。
A というディレクトリから見た Bのディレクトリは、下位階層であることが理解できるでしょう。逆に、Bから見た Aのディレクトリは上位階層ということになります。
Aディレクトリ内の HTML文書から見た、下位階層の Bディレクトリ内の index.htmlへのリンクは、<a href="B/index.html"> と記述します。つまり、下位階層のディレクトリ名 ＋ ファイル名 という URL（実際には URI）で成り立ちます。
逆に、Bディレクトリ内にある HTML文書から見た Aディレクトリの内の index.htmlへのリンクは、<a href="../index.html"> となります。../ とは、上位階層を示します。
一番深い階層にある Dディレクトリ内から最上位階層の Aディレクトリ内の index.htmlへのリンクは、階層が２つ上であるために、../../ というパスを記述します。
つまり、、<a href="../../index.html"> という記述で、最上位ディレクトリ内にあるファイルにリンクできるわけです。
Dディレクトリ内の HTML文書から見た同位ディレクトリにある Eディレクトリにリンクする場合は、、<a href="../E/index.html"> となります。これは、上位ディレクトリである Bディレクトリ内にある Dディレクトリを参照する、という意味になります。
では、Dディレクトリから見た Fディレクトリのパスはどのようにすればいいのでしょうか。一見すれば同じ階層にあるように見えますが、「ルート」が違います。
最上位のルートディレクトリは同じでも、Fディレクトリの親は Cディレクトリになります。そのため、最上位に戻ってからパスを記述します。
<a href="../../C/F/index.html> このようなパスの記述でリンクします。
■ 相対パスのまとめ
少し分かりにくいかと思いますが、相対パスの設定をまとめました。
ディレクトリ構造とパスの設定は、初心者には少し難しいと思いますが、サイトの成長とともに避けて通れない課題でもあります。自分なりにいろいろ試してそのポイントをつかむように学ぶことが大切です。
◆ XHTML講座 --- XHTML2.0 概要
正式勧告間近といわれる XHTML2.0 ですが、その草案を見る限りでは、初心者にはとっつきにくい仕様となっています。
XHTML2.0の詳しい解説は、今週のメールマガジン「第60号」を見ていただければ分かるように、従来の使用と大きく変わり、互換性を持たない XML仕様に近づいています。
また、懸案になっていた物理タグの廃止や、新たなモジュールの追加や、スキーマの採用など、その全貌は未確定な部分がありますが、XHTML1.1とは大きく様変わりしています。
特に XML で利用される XLink、XForm、XML Event、XFrames などのモジュールの追加、そして何より XML Schema は、本当に分かりにくいものです。
ともかく、正式勧告になった時点で、メールマガジンや WEBサイト上で詳しくお伝えします。その前に、私たちは XMLをおさらいしておく必要がありそうです。
Valid XHTML 1.1! Copyright（C） 2002-2003 初心者のためのホームページ作り臨時制作委員会 wfb-org@jcom.home.ne.jp