みなさん、こんにちは。今日もプログラミングの勉強をはじめていきましょう。
今回は、パスの書き方について学びます。
パスというのは、ファイルの場所を、パソコンに教えてあげる方法です。
![](https://original-game.com/wp-content/uploads/2020/09/sad-2.jpg)
りこちゃんも? ぼくもうまくいかなくて、困ってたんだ……
![](https://original-game.com/wp-content/uploads/2020/09/surprise-1.jpg)
山田先生!
![](https://original-game.com/wp-content/uploads/2020/09/sad-2.jpg)
場所が変わったらどうすればいいの?
![](https://original-game.com/wp-content/uploads/2020/09/normal-1.jpg)
わーい
![](https://original-game.com/wp-content/uploads/2020/09/normal-2.jpg)
わーい
この記事には「ホームページ」という言葉が出てきますが、ここでは「Webサイト」と同じ意味で使用しております。
パスってなぁに?
たとえば、ホームページを作っているとします。
ホームページに画像を表示したいとき、HTMLでただファイル名を指定しただけでは、うまく表示できないことがあります。
そうです。その画像がどこにあるものなのか、パソコンには分からないので、困ってしまうのです。
ならばどうすればいいのか……そんなときに使えるのが、パスです。
![](https://original-game.com/wp-content/uploads/2020/09/sad-1.jpg)
道順?
![](https://original-game.com/wp-content/uploads/2020/10/js6-860x511.jpg)
![](https://original-game.com/wp-content/uploads/2020/09/sad.jpg)
では、index.htmlからrico.pngを呼び出したいとき、どういう道順を通れば、rico.pngに辿り着くべ?
アルくん、答えるべ
![](https://original-game.com/wp-content/uploads/2020/09/normal.jpg)
そうだべ。つまりこういう道順だべ
![](https://original-game.com/wp-content/uploads/2020/10/js7-860x511.jpg)
![](https://original-game.com/wp-content/uploads/2020/09/normal-1.jpg)
パスは道順のことね!
覚えたよ
![](https://original-game.com/wp-content/uploads/2020/09/normal.jpg)
そして、パスの指定方法は、3つあるんだべ
絶対パス、相対パス、ルート相対パス、だべ
ちなみに、上の例は「相対パス」だべ
![](https://original-game.com/wp-content/uploads/2020/09/sad-1.jpg)
どう違うの?
![](https://original-game.com/wp-content/uploads/2020/09/normal.jpg)
順番に解説していくべよ!
ルートディレクトリってなぁに?
パスの書き方を覚えていきたいのですが、そのまえに、まず、ルートディレクトリがなんなのかを知っていると、分かりやすくなります。
![](https://original-game.com/wp-content/uploads/2020/09/sad-2.jpg)
なにそれ? どんな鳥?
ルートディレクトリは、一番上のフォルダのことです。
といっても、一番上ってどこなのでしょう。
では、ホームページをつくるときの「ルートディレクトリ」について解説します。
まず、このサイトのURLを見てください。
トップページは「original-game.com」ですね。
ここが、ルートディレクトリです。
![ルートディレクトリ](https://original-game.com/wp-content/uploads/2020/10/js11-790x540.jpg)
![](https://original-game.com/wp-content/uploads/2020/09/surprise-2.jpg)
待って、これって、URLじゃないの?
![](https://original-game.com/wp-content/uploads/2020/09/sad-1.jpg)
どういうこと?
![](https://original-game.com/wp-content/uploads/2020/09/surprise-2.jpg)
へぇ、そうなんだ
![](https://original-game.com/wp-content/uploads/2020/09/normal.jpg)
そういうことだべ
そして、ブラウザでホームページを見るとき、そのトップページのURLで見れるところよりも上のディレクトリは、見ることができないんだべ。だからここが一番上のディレクトリで、ルートディレクトリになるんだべ
絶対パスってなぁに?
では、絶対パスの書き方から紹介していきます。
HTMLで画像を表示するには、imgタグを使います。今回は、このimgタグで画像を表示する場合を例に、パスの書き方を学んでいきたいと思います。
![](https://original-game.com/wp-content/uploads/2020/09/angry.jpg)
もし、rico.pngを表示したいと思った場合、絶対パスではこのような道順になるべ
![](https://original-game.com/wp-content/uploads/2020/10/js12-790x540.jpg)
![](https://original-game.com/wp-content/uploads/2020/09/angry.jpg)
そして、絶対パスはこのように書くんだべ
https://original-game.com/img/rico.png
![](https://original-game.com/wp-content/uploads/2020/09/normal.jpg)
こんかいは、画像を表示したいわけだべから、imgタグを使ってみるべ。するとこんなふうになるべ
<img src="https://original-game.com/img/rico.png">
![絶対パスの書き方](https://original-game.com/wp-content/uploads/2020/10/js14-860x363.jpg)
![](https://original-game.com/wp-content/uploads/2020/09/normal-1.jpg)
スラッシュ( / )で区切って書くのね!
![](https://original-game.com/wp-content/uploads/2020/09/normal-2.jpg)
へぇー
![](https://original-game.com/wp-content/uploads/2020/09/sad.jpg)
そこが、絶対パスのデメリットだべよ
絶対パスをローカルで使おうとすると、使えないことはないべけど、かなり使いにくいべよ
一番簡単な方法だと、ローカルサーバーを立てて開発し、公開するときは実際のURLにすべて書き換えるんだべ
![](https://original-game.com/wp-content/uploads/2020/09/sad-1.jpg)
そっか、URLが変わっちゃうから、ぜんぶ書き換えなくちゃいけないのね……
![](https://original-game.com/wp-content/uploads/2020/09/sad-2.jpg)
うーん、まあ、大変なんだね
相対パスってなぁに?
つづいて、相対パスについて見ていきましょう。
![](https://original-game.com/wp-content/uploads/2020/10/js15-720x540.jpg)
![](https://original-game.com/wp-content/uploads/2020/09/normal-1.jpg)
こんどは一番上からじゃないんだね
![](https://original-game.com/wp-content/uploads/2020/09/normal.jpg)
そうだべ!
そして、パスはこうなるんだべ!
img/rico.png
./img/rico.png
![](https://original-game.com/wp-content/uploads/2020/09/surprise-2.jpg)
あれ? 2通りあるってこと?
![](https://original-game.com/wp-content/uploads/2020/09/normal.jpg)
どっちを使っても構わないべよ
実際に画像を表示するときは、このようにするべよ
<img src="img/rico.png">
<img src="./img/rico.png">
![相対パスの書き方](https://original-game.com/wp-content/uploads/2020/10/js16-697x540.jpg)
![](https://original-game.com/wp-content/uploads/2020/09/sad.jpg)
ふっふっふ。でもりこちゃん、こんな場合はどうするべ?
![](https://original-game.com/wp-content/uploads/2020/10/js17-824x540.jpg)
![](https://original-game.com/wp-content/uploads/2020/09/sad.jpg)
こんどは、character.htmlで、aru.pngを表示させたいべ
相対パスで考えてほしいべよ
![](https://original-game.com/wp-content/uploads/2020/09/normal.jpg)
ちなみに、一つ上の階層にいくには、「 ../ 」を使うべよ
![](https://original-game.com/wp-content/uploads/2020/09/sad-2.jpg)
うーん……
![](https://original-game.com/wp-content/uploads/2020/09/sad.jpg)
ふっふっふ、正解は、こういうふうだべ
../img/aru.png
![](https://original-game.com/wp-content/uploads/2020/09/normal.jpg)
そうだべ!
imgタグを使う場合はこうなるべ
<img src="../img/aru.png">
![相対パスの書き方](https://original-game.com/wp-content/uploads/2020/10/js18-860x391.jpg)
![](https://original-game.com/wp-content/uploads/2020/09/normal.jpg)
相対パスを使うメリットは、URLが変わっても、パスを変更する必要がないことだべ
![](https://original-game.com/wp-content/uploads/2020/09/sad-2.jpg)
うーん、ぼくはこれを見ても、いまいちどこを表しているのか、よく分からないな……
![](https://original-game.com/wp-content/uploads/2020/09/angry.jpg)
それだべ。相対パスのデメリットは
![](https://original-game.com/wp-content/uploads/2020/09/surprise-2.jpg)
これなの!?
![](https://original-game.com/wp-content/uploads/2020/09/surprise-1.jpg)
あ、../../../みたいに書かなくちゃいけなくなっちゃうんだ!
![](https://original-game.com/wp-content/uploads/2020/09/sad-2.jpg)
ひぃ、なんかこわい……
ルート相対パスってなぁに?
つづいて、ルート相対パスについて、見ていきたいと思います。
![](https://original-game.com/wp-content/uploads/2020/09/surprise-1.jpg)
へぇー
あれっ、それって絶対パスじゃないの?
![](https://original-game.com/wp-content/uploads/2020/09/angry.jpg)
そうだべな……たしかに絶対パスに似てるべけど、書き方がちょっと違うんだべよ
![](https://original-game.com/wp-content/uploads/2020/09/sad-2.jpg)
どうやるの?
![](https://original-game.com/wp-content/uploads/2020/10/js19-652x540.jpg)
![](https://original-game.com/wp-content/uploads/2020/09/angry-2.jpg)
絶対パスとおなじじゃん!
![](https://original-game.com/wp-content/uploads/2020/09/normal.jpg)
まぁまぁ。ルート相対パスはこうやって書くべよ
/img/aru.png
![](https://original-game.com/wp-content/uploads/2020/09/surprise-1.jpg)
あ、スラッシュからはじまるんだ
<img src="/img/aru.png">
![ルート相対パス](https://original-game.com/wp-content/uploads/2020/10/js20-860x434.jpg)
![](https://original-game.com/wp-content/uploads/2020/09/surprise-1.jpg)
これって……もしかして、URLが変わってもパスはそのままでいいってこと?
![](https://original-game.com/wp-content/uploads/2020/09/sad.jpg)
ふっふっふ。じつはそうなんだべ
ルート相対パスは、絶対パスと相対パスのいいとこ取りなんだべよ
![](https://original-game.com/wp-content/uploads/2020/09/sad-2.jpg)
いいとこ取り?
![](https://original-game.com/wp-content/uploads/2020/09/sad-1.jpg)
ルート相対パスにも、やっぱりデメリットはあるの?
![](https://original-game.com/wp-content/uploads/2020/09/normal-2.jpg)
ちょっとむずかしいけど、しっかり覚えればルート相対パスは使いやすそうだね
それぞれのパスのメリット、デメリット、まとめ
最後に、それぞれのパスのメリット、デメリットをまとめます。
絶対パス
メリット
- 目的のファイルがどこにあるのか分かりやすい
- リンク切れが起こりにくい
デメリット
- パスが長くなる
- ローカルでの開発にあまり向かない
- URLが変わると、全てのリンクを書き換える必要がある
相対パス
メリット
- URLが変わっても、パスを書き換える必要がない
- ローカルで開発しやすい
- パスが短くて済む
デメリット
- リンク切れが起こりやすい
- どのファイルを表しているのか分かりにくい
ルート相対パス
メリット
- 目的のファイルがどこにあるのか分かりやすい
- URLが変わっても、パスを書き換える必要がない
- リンク切れが起こりにくい
- パスが短くて済む
デメリット
- ローカルで開発するには、ローカルサーバーを立てる必要がある
![](https://original-game.com/wp-content/uploads/2020/09/normal.jpg)
どうだべ、パスの書き方は分かったべか?
![](https://original-game.com/wp-content/uploads/2020/09/normal-1.jpg)
うん! それぞれにメリット、デメリットがあるのね!
![](https://original-game.com/wp-content/uploads/2020/09/normal-2.jpg)
がんばって覚えるよ!
![](https://original-game.com/wp-content/uploads/2020/09/normal.jpg)
うん、がんばるべよ
では、わたすは、日本橋に行ってくるべよ
![](https://original-game.com/wp-content/uploads/2020/09/normal-2.jpg)
へぇ、なにしにいくの?
![](https://original-game.com/wp-content/uploads/2020/09/sad.jpg)
マウスを買いに行くべ
今週……昨日で三つ目を壊してしまったべ
![](https://original-game.com/wp-content/uploads/2020/09/surprise-1.jpg)
えっ、どうしてそんなに壊れちゃったの?
![](https://original-game.com/wp-content/uploads/2020/09/sad.jpg)
つい、ケーブルをかじってしまったべ……
どうしても、あれはねずみにしか見えないべ
ジャンクならかなりお手頃な値段で手に入るべよ
わたす、マウスは、保存用と観賞用、使う用、かじる用が必要なんだべ……まぁ、コレクションみたいなものだべ
![](https://original-game.com/wp-content/uploads/2020/09/normal-2.jpg)
マウス、好きなんだね
ぼくも、ポケモンカードあつめるの好きだよ
![](https://original-game.com/wp-content/uploads/2020/09/surprise-1.jpg)
かじる用……?