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

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

メールマガジン「初心者のためのホームページ作り」でお伝えした内容を、「復習」の意味で掲載しています。テキストのみのマガジンと違って、実際のサンプルや画像を交えて解説していますので、理解が深まると思います。

なお文中、疑問点や分からない点がありましたら、ご遠慮なく当方まで メールにてご質問ください。

<第115号> 今週のおさらい
              毎週金曜日配信 What's New 2005年5月13日
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
   ■ やさしいHTML入門 第8回 --- パスとURL
やさしいHTML入門 --- パスとURL
「パス」とは、コンピュータ内の場所を示す階層的なディレクトリ (Windowsではフォルダと呼ぶ) の位置を求めるものです。Webサーバの多くが UNIX系であったためディレクトリと呼ばれていますが、パスはその位置を示すものです。
Windowsでパスを示すときはパスに「 \ 」を用いますが、Webではスラッシュ「 / 」を用います。
パスには直接リンク先を指定する「絶対パス」と、ディレクトリ内の位置を示す「相対パス」があります。絶対パスはリンク先を「http://」でその URLを示すので比較的単純ですが、相対パスはディレクトリを理解する必要があります。
ディレクトリの効用
すべての HTMLドキュメントや画像などのファイルを1つのディレクトリ内に収めるのであれば、パスを意識する必要はないでしょう。
しかし、同一ディレクトリに何もかも収めてしまうとゴチャゴチャになり、メンテナンスや更新の際に混乱する可能性が高くなります。各種のファイルはカテゴリー別に分けてディレクトリを作成し分類したほうが、はるかに効率的で楽になります。
一方で、ディレクトリを分けることで必要となるのが「パスの理解」です。リンク先や参照先を正しく指定しないと、画像が表示されないとかリンク切れとなってしまいます。
相対パスの指定
初心者にとって相対パスを設定することは大変かもしれません。しかし、その仕組みやコツさえ飲み込めば意外と容易に理解することができるでしょう。
パスを知る上で、ディレクトリの階層構造を理解することが重要です。階層構造はツリーとなっているので、どのディレクトリがどの位置にいるのかしっかり把握する必要があります。相対パスを指定するときには、「今いる場所」から目的の位置とファイル名を示すものです。
同一ディレクトリへのパス
目的とするファイルが同じディレクトリ内にある場合には、パスは意識する必要がありません。単純にファイル名だけを指定することによって参照・移動が可能です。
下位ディレクトリへのパス
今いる場所の直下にあるディレクトリのパスは、ディレクトリ名とファイル名を指定することで参照可能となります。
ディレクトリ名/ファイル名
例: <a href="sample/sample.html">Sample</a>
2つ下位のディレクトリへのパス
今いる場所の直下にあるディレクトリのさらにその下のディレクトリへのパスは、ディレクトリ名とファイル名を指定することで参照可能となります。
ディレクトリ名/ディレクトリ名/ファイル名
例: <a href="sample/sub/sample.html">Sample</a>
上位ディレクトリへのパス
今いる場所から1つ上のディレクトリへのパスは以下の要領で設定します。この場合ディレクトリ名の指定は不要となります。
../ファイル名
例: <a href="../sample.html">Sample</a>
2つ上位のディレクトリへのパス
今いる場所から2つ上のディレクトリへのパスは以下の要領で設定します。この場合ディレクトリ名の指定となります。
../../ファイル名
例: <a href="../../sample.html">Sample</a>
同位ディレクトリへのパス
今いるディレクトリと同じ層のディレクトリへのパスは、今いるディレクトリを抜け出て参照先のディレクトリ名を指定します。
../ディレクトリ名/ファイル名
例: <a href="../sample/sample.html">Sample</a>
パスを理解する上でディレクトリの構想階層をしっかりを認識する必要があります。階層構造を図にしておくことで案外楽にパスを設定することができるはずです。効率よく作業を進めるためにも適切なディレクトリの作成と構造を把握しておきましょう。


This page is Valid HTML 4.01! 初版公開日 2005年5月13日
Copyright(C) 2002-2005 banban@scollabo.com