絶対パス?相対パス?ファイルの指定方法いろいろ-独学!未経験からWebデザイナーになる!!

絶対パス?相対パス?ファイルの指定方法いろいろ

※当サイトは、アフィリエイト広告を掲載し、収益を得て運営しています。

日ごろ私たちが目にする一般的なWebページは、孤立した単独の存在ではありません。画像やCSS等の様々なファイルを読み込んだり、様々なWebページにリンクしていたりします。

こういった際、つまり他のファイルを読み込んだりリンクしたりする際、どうやって対象のファイルを特定しているのでしょうか。すでにHTMLの学習を始めている方にとってはおなじみですが、これにはファイルのパスで対象を指定しています。

パスはWindowsやMacなどのOSでも使われる概念で、そう難しいものではありません。しかしながら、まったく同一のファイルを指定するにも複数の方法があり、その時々でふさわしい指定方法があります。この指定方法一つでサイトの制作・管理が楽になることがありますので、基本的なことを理解・またはおさらいしておきましょう。

絶対URI（絶対URL）での指定

http～から始まる指定方法です。インターネットにアクセスしている状態であれば、常に同じファイルにアクセスできる絶対的な指定方法となります。

[ 例 1-1 ]
http://www.example.jp/aaa.html
のページから
http://www.example.com/bbb.html
にリンクしたい時
<a href="http://www.example.com/bbb.html">リンクテキスト</a>

絶対URIでの指定は、外部サイトなど、ホスト名（www.example.jpのような部分）が異なるファイルにアクセスしたいときに使うのが一般的です。また、ローカル環境でテストする際、本番サーバのCSSを読み込みたい時などにも、絶対URIでの指定にすることで実現できます。

ただし自サイト内のリンクにおいては、絶対URIでの指定だと記述が長くて非常に不便です。加えて、ローカル環境においてテストする際、リンクが絶対URIだと、リンクをクリックすると本番ページにジャンプしてしまうため、ローカルでのテストがしづらいです。

なお、絶対パスで記述すると、実際のサーバにあらかじめファイルをアップロードしなければなりません。サイトの管理的な観点から、やはり外部サイトなどのホストが違うファイルを指定するときに用いるのがいいでしょう。

相対パス

おそらく最も使われることが多いのが、この相対パスでしょう。相対パスは、現在表示しているファイルから対象となるファイルを、相対的に指定します。

同じディレクトリのファイルを指定する

同じディレクトリにあるということは、リンク元ファイルからみて、現在のディレクトリ内にあるということを意味します。なお、現在のディレクトリは、カレントディレクトリと呼ばれます(この後たくさん使いますので覚えておいてくださいね)。カレントディレクトリ内のファイルを指定するには、下記のように指定します。

[ 例 2-1 ]
http://www.example.jp/aaa.html
のページから
http://www.example.jp/bbb.html
にリンクしたい時
<a href="bbb.html">リンクテキスト</a>

現在のファイルと階層が近い位置にあるファイルを指定するときは、上記の例のように、最も簡単にファイルを指定することができます。この例では、

<a href="bbb.html">リンクテキスト</a>

のように表しましたが、他にも別の表記があり、下記でも同じです。

<a href="./bbb.html">リンクテキスト</a>

[ ./ ]というのは、カレントディレクトリを意味します。このケースで、[ aaa.html ]と[ bbb.html ]は同じディレクトリ内にあるので、これでもきちんと指定できるんですね。

応用編として、極論を言えば下記でも同じです（もちろんこれは説明のためで、通常はこんな指定はしません^^;）。

<a href="././././././././bbb.html">リンクテキスト</a>

下層ディレクトリのファイルを指定する

次はリンク先のファイルが、下層ディレクトリ内にあるケースでの指定です。

[ 例 2-2 ]
http://www.example.jp/aaa.html
のページから
http://www.example.jp/dir1/bbb.html
にリンクしたい時
<a href="dir1/bbb.html">リンクテキスト</a>

このように、ディレクトリは/（スラッシュ）で区切って指定できます。なお、先ほどのようにカレントディレクトリを含めて指定することもできます。

<a href="./dir1/bbb.html">リンクテキスト</a>

ディレクトリをさかのぼるファイルの指定

次に、リンク先のファイルがディレクトリをさかのぼるパターンです。

[ 例 2-3 ]
http://www.example.jp/dir1/aaa.html
のページから
http://www.example.jp/dir2/bbb.html
にリンクしたい時
<a href="../dir2/bbb.html">リンクテキスト</a>

[ ../ ]というのは、カレントディレクトリの一つ上のディレクトリを意味します。このケースでは、[ dir1ディレクトリの上の ]→[ dir2ディレクトリの ]→[ bbb.htmlファイル ]を指定しているという訳なんですね。

応用としては、下記のように、必要時は何度もディレクトリを上がることができます。

[ 例 2-4 ]
http://www.example.jp/a/b/c/d/e/f/g/h/i.html
のページから
http://www.example.jp/aaa.html
にリンクしたい時
<a href="../../../../../../../../aaa.html">リンクテキスト</a>

公開ディレクトリからの絶対パス指定

サーバの公開ディレクトリ、つまり最上位ディレクトリ（ルートディレクトリ）をもとに、絶対的なパスで指定する方法です。

[ 例 3-1 ]
http://www.example.jp/a/b/c/d/e/f/g/h/i.html
のページから
http://www.example.jp/aaa.html
にリンクしたい時
<a href="/aaa.html">リンクテキスト</a>

[ / ]からはじまるパス指定の場合、先頭の[ / ]はルートディレクトリ（この場合はhttp://www.example.jp/）を表します。したがって、このケースでは、ルートディレクトリ直下のaaa.htmlへリンクしているんですね。

実はこの例は、相対指定の[ 例 2-4 ]と同じ例題です。相対指定のサンプルである、[ 例 2-4 ]をもう一度見てみましょう。

ものすごく何度も[ ../ ]で戻っていますよね。これでは[ ../]の数を間違えてしまったりすることもあるかもしれませんし、なにより冗長と言わざるをえません。しかし[ 例 3-1 ]では、これと同じ例文を使用していますがいとも簡潔に表せています。

このように、公開ディレクトリからの絶対パス指定は、基準となるファイルの階層を意識しなくていいので、深い階層から浅い階層のファイルを指定する際に便利です。

ただし、下記のような場合はあまり適しているとはいえませんね。

http://www.example.jp/a/b/c/d/e/f/g/h/i.html
のページから
http://www.example.jp/a/b/c/d/e/f/g/h/z.html
にリンクしたい時

このような場合は、公開ディレクトリからの絶対パス指定を用いると

<a href="/a/b/c/d/e/f/g/h/z.html">リンクテキスト</a>

となります。相対指定なら、

<a href="z.html">リンクテキスト</a>

ですみます。状況により一概には言えない場合もありますが、時と場合に応じて使い分けられるといいですね。

絶対パスはどれを指す？

Web制作の現場では、絶対パスという言葉は多少曖昧に使われることがあります。どういうことかと言えば、絶対URI指定のことを絶対パスと言う人もいるのです。人によって多少解釈が異なる場合もありますので、絶対パスとだけ言われたときは、絶対URI指定のことを言っているのか、ドキュメントルートからの絶対指定のことを言っているのかを確認した方がいいでしょう。

↓もし参考になりましたら、シェアしていただけると嬉しいです(^-^)

12/06/30 facebookページ開設しました。RSS代わりにも使いたいと思います。

独学！未経験からWebデザイナーになる！！

後藤さん　2017年12月16日06時57分

CGIから標準出力されたhtmlの場合、カレントディレクトリはどこになるのでしょう？
上記のhtmlから特定のフォルダ（例：jsフィル格納フォルダ）を相対パスで指定したいのですが、どうすればよいのか調べているところです。

馬場誠さん　2017年12月16日10時44分

後藤さん、こんにちは。
CGIであっても、出力されるファイルはHTMLですから、基本的に通常のHTMLファイルと同じ考えで大丈夫です。

(例
▽CGIファイル(URL)
example.jp/hoge/foo.cgi 

▽jsファイル
example.jp/js/bar.js

なら、CGIファイルはhogeディレクトリがカレントディレクトリですから、foo.cgi内からは ../js/bar.js で相対パスが通ります。


もしも、パス情報をパラメーターに使っていたり、mod_rewriteで書き換えたりする場合（つまり、URLと実際に動くファイルが異なる場合）は、リクエストURLを基準に考えます。

(例
▽URL
example.jp/hoge/foo/bar/

▽CGIファイル
example.jp/piyo.cgi

▽jsファイル
先ほどの例と同じ

上記の「URL」をリクエストすると、サーバー内では「CGIファイル」にリクエストが通るような場合です。

この場合、例えそのディレクトリが実際に存在しなくても、ウェブブラウザから見ればbarディレクトリがカレントディレクトリとして扱われます。

そのため、piyo.cgi内には ../../../js/bar.js とする事で相対パスが通ります。

このようなケースでは、相対パスでない方が使いやすいですけれどね。

Web制作Tips: デザイン; ├フリーの写真素材を有効活用しよう; ├デザイナーならこだわりたいカーニング（文字詰め）; ├文字のジャンプ率で適切なサイトイメージを演出する; ├TPOを考えてハズさないフォントを選ぶ; └失敗しない配色の基本; ユーザビリティ; ├そのフォントサイズ、適切ですか？; ├リンクテキストをわかりやすくする; ├フォームのリセットボタンを考える; ├リンク切れ時に適切な404ページを表示をする; └フォームの確定ボタンは右?左?; コーディング; ├文法チェッカーで正しい(X)HTML/CSSを書こう; ├インデントで読みやすいソースコードを; ├文字化けを防ぐ&解消する方法; └背景画像ありのボックスの文字をはみ出させない方法; その他; ├ディレクトリ構造は適切に; └絶対パス?相対パス?ファイルの指定方法いろいろ

ホームページへ戻る

ファイルの指定方法いろいろ