1. HOME
  2. »
  3. プログラミング・Web
  4. »
  5. パスの書き方を覚えよう。絶対パス、相対パス、ルート相対パスの違い

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

みなさん、こんにちは。今日もプログラミングの勉強べんきょうをはじめていきましょう。

今回は、パスの書き方について学びます。
パスというのは、ファイルの場所ばしょを、パソコンにおしえてあげる方法です。

りこ

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

アル

りこちゃんも? ぼくもうまくいかなくて、こまってたんだ……

山田

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

りこ

山田先生!

アル

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

山田

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

りこ

わーい

アル

わーい

この記事には「ホームページ」という言葉が出てきますが、ここでは「Webサイト」と同じ意味で使用しております。

目次
  1. パスってなぁに?
  2. ルートディレクトリってなぁに?
  3. 絶対ぜったいパスってなぁに?
  4. 相対そうたいパスってなぁに?
  5. ルート相対そうたいパスってなぁに?
  6. それぞれのパスのメリット、デメリット、まとめ

パスってなぁに?

たとえば、ホームページを作っているとします。
ホームページに画像がぞう表示ひょうじしたいとき、HTMLエイチティーエムエルでただファイル名を指定していしただけでは、うまく表示できないことがあります。

そうです。その画像がどこにあるものなのか、パソコンには分からないので、こまってしまうのです。

ならばどうすればいいのか……そんなときに使えるのが、パスです。

山田

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

りこ

道順?

山田

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

山田

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

アル

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

山田

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

山田

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

りこ

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

山田

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

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

りこ

どう違うの?

山田

順番に解説かいせつしていくべよ!

ルートディレクトリってなぁに?

パスの書き方をおぼえていきたいのですが、そのまえに、まず、ルートディレクトリがなんなのかを知っていると、分かりやすくなります。

山田

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

りこ

ルートディレクトリ?

アル

なにそれ? どんな鳥?

山田

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

アル

ディレクトリって?

山田

フォルダのことだべ

りこ

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

ルートディレクトリは、一番上のフォルダのことです。
といっても、一番上ってどこなのでしょう。

では、ホームページをつくるときの「ルートディレクトリ」について解説かいせつします。

まず、このサイトのURLを見てください。
トップページは「original-game.com」ですね。

ここが、ルートディレクトリです。

ルートディレクトリ
アル

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

りこ

どういうこと?

山田

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

アル

へぇ、そうなんだ

りこ

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

山田

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

絶対ぜったいパスってなぁに?

では、絶対ぜったいパスの書き方から紹介しょうかいしていきます。

HTMLで画像がぞう表示ひょうじするには、imgタグを使います。今回は、このimgタグで画像を表示する場合をれいに、パスの書き方を学んでいきたいと思います。

山田

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

りこ

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

山田

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

アル

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

山田

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

https://original-game.com/img/rico.png
山田

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

<img src="https://original-game.com/img/rico.png">
絶対パスの書き方
りこ

スラッシュ( / )で区切って書くのね!

山田

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

アル

へぇー

りこ

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

山田

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

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

りこ

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

山田

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

アル

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

相対そうたいパスってなぁに?

つづいて、相対そうたいパスについて見ていきましょう。

山田

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

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

りこ

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

山田

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

img/rico.png
./img/rico.png
アル

あれ? 2通りあるってこと?

山田

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

<img src="img/rico.png">
<img src="./img/rico.png">
相対パスの書き方
りこ

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

山田

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

山田

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

りこ

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

山田

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

アル

うーん……

山田

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

../img/aru.png
りこ

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

山田

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

<img src="../img/aru.png">
相対パスの書き方
山田

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

りこ

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

アル

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

山田

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

アル

これなの!?

山田

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

りこ

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

山田

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

アル

ひぃ、なんかこわい……

ルート相対そうたいパスってなぁに?

つづいて、ルート相対そうたいパスについて、見ていきたいと思います。

山田

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

りこ

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

山田

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

アル

どうやるの?

山田

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

アル

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

山田

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

/img/aru.png
りこ

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

山田

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

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

<img src="/img/aru.png">
ルート相対パス
りこ

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

山田

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

アル

いいとこ取り?

山田

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

りこ

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

山田

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

アル

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

それぞれのパスのメリット、デメリット、まとめ

最後に、それぞれのパスのメリット、デメリットをまとめます。

絶対ぜったいパス

メリット

  • 目的もくてきのファイルがどこにあるのか分かりやすい
  • リンク切れが起こりにくい

デメリット

  • パスが長くなる
  • ローカルでの開発かいはつにあまり向かない
  • URLが変わると、全てのリンクをえる必要ひつようがある

相対そうたいパス

メリット

  • URLが変わっても、パスを書き換える必要がない
  • ローカルで開発しやすい
  • パスが短くて

デメリット

  • リンク切れが起こりやすい
  • どのファイルをあらわしているのか分かりにくい

ルート相対パス

メリット

  • 目的のファイルがどこにあるのか分かりやすい
  • URLが変わっても、パスを書き換える必要がない
  • リンク切れが起こりにくい
  • パスが短くて済む

デメリット

  • ローカルで開発するには、ローカルサーバーを立てる必要がある
山田

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

りこ

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

アル

がんばって覚えるよ!

山田

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

アル

へぇ、なにしにいくの?

山田

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

りこ

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

山田

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

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

アル

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

りこ

かじる用……?

スポンサードリンク

関連コンテンツ

オススメ記事

キャラクター

JavaScriptマンガ風講座。初心者でも絶対に理解できる入門編!!

プログラミングは奥が深い。。。@It_is_Rです。 Flashがスマホから使えなくなり、多くのサイトにHTML5が使われ、ブラウザ上でのアニメーションはJavaScriptが多く使われるように

【Bootstrap 4】ボタングループ使い方。ボタンの一まとめにする方法

Bootstrap4の使い方、第6回目です。 前回、Bootstrap4でのボタンの作り方を紹介しましたが、今回はそのボタンをグループにしてひとまとめにする方法です。 Bootstrapにはボ

Docker Composeで自分のWordPressサイトをローカル開発環境に反映!

ローカルにWordPress開発環境を整えてテーマを作成することがあるのですが、単にローカルに環境を作っただけでは記事がなく、テーマのイメージが分かりません。@It_is_Rです。 かといって、te

【enchant.js入門】ガンシューティングゲームの作り方を完全解説!

enchant.jsを使ってガンシューティングゲームの開発を行なっていきます。 enchant.jsはゲームを作るのに特化したJavaScriptフレームワークです。 これを使うことで、Jav

scratch

Scratchでシューティングゲームを作ろう! 小学生からのプログラミング入門

さて、プログラミングの勉強をはじめていきましょう! 前回の「Scratchでじゃんけんゲームを作ろう!」では、じゃんけんゲームの作り方を学びました。今回は、もうちょっと本格的(ほんかくてき)な

ショートコード

BEMによるCSS設計の方法を解説。命名規則から使い方まで。

完璧を求めすぎて、平均以下な@It_is_Rです。 CSSは比較的簡単なものですが、CSS設計をしっかりしておかなければ、余分なコードが多くなったり、後から修正が大変になったりしてこまることにな

【Android Studio】エミュレータを起動してプログラムを実行する方法!

何をやっても長続きしない@It_is_Rです。 このままでは人生さえも長続きしないかも知れない。 さて、しばらくぶりになってしまいましたが、今回は Android Studio 2.3.2 を

ファイルを分けるべよ!

【JavaScript】ファイルを分けて管理してみよう! 小学生からのプログラミング入門

小学生からのJavaScript《ジャバスクリプト》入門講座《にゅうもんこうざ》、第5弾です。 前回はりこちゃんを方向キーで操作《そうさ》することができるようになりました。しかしプログラムを作

FC2 blog customize

FC2ブログ ”最強” カスタマイズ入門講座。背景を変更する。

三度の飯よりも好きなものが多すぎて比較にならない@It_is_Rです。 FC2ブログ"最強"カスタマイズ入門講座の続きですね。最強にカスタマイズしていきましょう。 今回は背景色の変更をメインに

キャラを決まった間隔ずつ動かすよ!

【JavaScript】キャラを決まった間隔ずつ動かす! 小学生からのプログラミング入門

小学生からのプログラミング入門講座《にゅうもんこうざ》、第8弾です。 前回は、キャラクターの画像《がぞう》をスムーズに動かす方法でしたが、スピードが速すぎたので、画像の移動間隔《いどうかんかく

コメントをどうぞ!(コメントは承認後に反映されます)

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です