パスの書き方を覚えよう。絶対パス、相対パス、ルート相対パスの違い

うーん、ファイルの場所《ばしょ》を整理《せいり》してたら、画像《がぞう》が読《よ》み込《こ》めなくなっちゃった……

りこちゃんも？　ぼくもうまくいかなくて、困《こま》ってたんだ……

ふっふっふ。それはきっと、画像ファイルまでの場所が変わってしまったからだべ

山田先生！

場所が変わったらどうすればいいの？

ファイルまでの道順《みちじゅん》を、しっかりと書いてあげるんだべ
じゃあ、今日はその方法を教えてあげるべ

わーい

わーい

パスは、目的のファイルまでの道順《みちじゅん》を表すものだべ

道順？

たとえば、自分のパソコンの「site《サイト》」というフォルダで、ホームページを作っているとするべ

では、index.htmlからrico.pngを呼び出したいとき、どういう道順を通《とお》れば、rico.pngに辿《たど》り着《つ》くべ？
アルくん、答えるべ

えっ、ぼく？
えっと……同じ場所にimgフォルダがあって、そのなかにrico.pngがあるから……
imgに行けば、rico.pngがあるね

そうだべ。つまりこういう道順だべ

img → rico.png というふうに進めば、rico.pngを呼び出せるんだべ
こういった目的のファイルまでの道順を、「パス」っていうんだべ

パスは道順のことね！
覚えたよ

そして、パスの指定方法《していほうほう》は、３つあるんだべ
絶対《ぜったい》パス、相対《そうたい》パス、ルート相対パス、だべ

ちなみに、上の例《れい》は「相対パス」だべ

どう違うの？

順番に解説《かいせつ》していくべよ！

まず、ルートディレクトリという言葉を覚《おぼ》えて欲しいんだべ

ルートディレクトリ？

なにそれ？　どんな鳥？

それはもう、おいしそうな……てやんでぇ、べらぼうめ！　鳥じゃないべよ！
ルートディレクトリは、一番上のディレクトリだべ

ディレクトリって？

フォルダのことだべ

一番上のフォルダってこと？
うーん、一番上ってどこなんだろう……

待って、これって、URLじゃないの？

どういうこと？

URLは、ホームページを見る人に分かりやすいようつけられた、場所《ばしょ》の名前でしかないべ
そしてホームページは、Webサーバーの公開《こうかい》ディレクトリに保存《ほぞん》されたものが表示されてるんだべ

へぇ、そうなんだ

つまり、ブラウザにURLを入れて表示されたものは、Webサーバーの公開ディレクトリに保存されたものってこと？

そういうことだべ
そして、ブラウザでホームページを見るとき、そのトップページのURLで見れるところよりも上のディレクトリは、見ることができないんだべ。だからここが一番上のディレクトリで、ルートディレクトリになるんだべ

絶対パスは、ルートディレクトリから見たパスのことだべ

一番上のフォルダから、目的《もくてき》のファイルまでの道順《みちじゅん》ってことね！

もし、rico.pngを表示したいと思った場合、絶対パスではこのような道順になるべ

まずimgフォルダへ行って、そこからrico.pngを呼び出すんだね

そして、絶対パスはこのように書くんだべ

こんかいは、画像を表示したいわけだべから、imgタグを使ってみるべ。するとこんなふうになるべ

スラッシュ（ / ）で区切って書くのね！

絶対パスを使うメリットは、なんといっても分かりやすさだべ
目的のファイルがどこにあるのか、ひとめ見ただけで分かるべよ

へぇー

あれ、でも、ローカルでホームページを作りたいときはどうすればいいの？

そこが、絶対パスのデメリットだべよ
絶対パスをローカルで使おうとすると、使えないことはないべけど、かなり使いにくいべよ

一番簡単《かんたん》な方法だと、ローカルサーバーを立てて開発《かいはつ》し、公開するときは実際《じっさい》のURLにすべて書《か》き換《か》えるんだべ

そっか、URLが変わっちゃうから、ぜんぶ書き換えなくちゃいけないのね……

そうだべ。ホームページを移転《いてん》したいときとかも、全部書き換える必要《ひつよう》があるべよ

うーん、まあ、大変《たいへん》なんだね

相対パスは、読み込むページから見て、目的《もくてき》のファイルがどこにあるのかを書く方法だべ

下の例《れい》は、index.htmlでrico.pngを表示するときの道順《みちじゅん》だべよ

こんどは一番上からじゃないんだね

そうだべ！
そして、パスはこうなるんだべ！

あれ？　２通りあるってこと？

どっちを使っても構《かま》わないべよ
実際《じっさい》に画像を表示するときは、このようにするべよ

絶対《ぜったい》パスは一番上のディレクトリから、相対《そうたい》パスは読み込むページから見て、目的《もくてき》のファイルがどこにあるのかを示《しめ》すのね！
うん、覚《おぼ》えたよ

ふっふっふ。でもりこちゃん、こんな場合《ばあい》はどうするべ？

こんどは、character.htmlで、aru.pngを表示させたいべ
相対パスで考えてほしいべよ

character.htmlはpageフォルダに入ってるから……あれっ、どうすればいいの？

ちなみに、一つ上の階層《かいそう》にいくには、「 ../ 」を使うべよ

うーん……

ふっふっふ、正解は、こういうふうだべ

あ、そっか。../で一つ上の階層にいって、そこにあるimgフォルダのなかの、aru.pngを読み込めばいいのね！

そうだべ！
imgタグを使う場合はこうなるべ

相対パスを使うメリットは、URLが変わっても、パスを変更する必要がないことだべ

そっか。読み込むファイルからの場所だから、URLは関係《かんけい》ないのね！

うーん、ぼくはこれを見ても、いまいちどこを表しているのか、よく分からないな……

それだべ。相対パスのデメリットは

これなの！？

相対パスは、どのファイルを示しているのか、ちょっと分かりにくいべ。読み込む側のファイルの階層が、深くなれば深くなるほど分からなくなるべ

あ、../../../みたいに書かなくちゃいけなくなっちゃうんだ！

そしてもうひとつ。読み込む側のファイルの場所を変更したら、全てリンク切れになるべ……

ひぃ、なんかこわい……

ルート相対パスは、ルートディレクトリから見たパスのことだべ

へぇー
あれっ、それって絶対《ぜったい》パスじゃないの？

そうだべな……たしかに絶対パスに似てるべけど、書き方がちょっと違《ちが》うんだべよ

どうやるの？

ルート相対パスでは、こういう道順《みちじゅん》でディレクトリを見ていくべ
これはaru.pngを表示したい場合の例《れい》だべよ

絶対パスとおなじじゃん！

まぁまぁ。ルート相対パスはこうやって書くべよ

あ、スラッシュからはじまるんだ

そうなんだべ。一番最初《さいしょ》のスラッシュが、ルートディレクトリを表《あらわ》しているんだべよ

そして、画像《がぞう》を表示《ひょうじ》するなら、こういうふうになるべ

これって……もしかして、URLが変わってもパスはそのままでいいってこと？

ふっふっふ。じつはそうなんだべ
ルート相対パスは、絶対パスと相対パスのいいとこ取りなんだべよ

いいとこ取り？

URLの変更があっても、パスはそのままだべ
読み込む側《がわ》のファイルの位置《いち》が変わっても、リンク切れは起きないべ
そして、ルートディレクトリからの場所を示しているから、分かりやすいべ

ルート相対パスにも、やっぱりデメリットはあるの？

ローカルでホームページをつくるときは、ローカルサーバーを立てる必要があるべ……
けど、絶対パスのときのようなURLの書《か》き換《か》えは、しなくてもいいんだべよ

ちょっとむずかしいけど、しっかり覚《おぼ》えればルート相対パスは使いやすそうだね

どうだべ、パスの書き方は分かったべか？

うん！　それぞれにメリット、デメリットがあるのね！

がんばって覚えるよ！

うん、がんばるべよ
では、わたすは、日本橋《にっぽんばし》に行ってくるべよ

へぇ、なにしにいくの？

マウスを買いに行くべ
今週……昨日で三つ目を壊《こわ》してしまったべ

えっ、どうしてそんなに壊れちゃったの？

つい、ケーブルをかじってしまったべ……
どうしても、あれはねずみにしか見えないべ

ジャンクならかなりお手頃《てごろ》な値段《ねだん》で手に入るべよ
わたす、マウスは、保存用《ほぞんよう》と観賞用《かんしょうよう》、使う用、かじる用が必要《ひつよう》なんだべ……まぁ、コレクションみたいなものだべ

マウス、好きなんだね
ぼくも、ポケモンカードあつめるの好きだよ

かじる用……？