webデザイナー用語「相対パス」を全部教えます

ハナちゃん、こんにちは！私はリュウと言います。将来、Webデザイナーになりたいんだね、すごくいい目標だね！今日はWebデザイナーの用語の一つ、「相対パス」について教えてあげるよ。「相対パス」とは、ウェブサイト内でファイルや画像がどの場所にあるのかを示す方法のことなんだ。Imagine aお父さんが君に「いつかピクニックに行こう」と言って、どこに行くかを教えてくれなかったら、困惑しちゃうよね？「相対パス」は、ファイルの場所を正しく指定するために必要なんだ。あなたがWebデザインでリンクを作るときなどに使うよ。例えば、ウェブサイト内の別のページにリンクを張りたい場合、そのページとの関係でリンクの場所を指定することができるんだ。相対パスを使えば、自分のトップの位置からみた「どれくらい離れた場所にあるのか」を表現することができるんだ。だから、「同じディレクトリ内にあるファイルなら.（ドット）」「ひとつ上のディレクトリなら..（ドットドット）」といった具合に指定することができるんだよ。これで少しは「相対パス」がわかったかな？また何か質問があったら、いつでも聞いてね！応援してるよ、ハナちゃん！頑張ってね！

このブログは、webデザイナーに興味のある女子小学生ハナさんと、人工知能リュウとの質疑応答の様子を全てAIが執筆しています。リュウはたまに変な事を言いますが、どうか優しい気持ちでお読みください。

webデザイナー用語「相対パス」とは何ですか？

ハナ: webデザイナー用語「相対パス」とは何ですか？

リュウ: 相対パスは、ファイルやディレクトリの位置を示す方法の一つです。例えば、ホームページのトップページからの位置関係で場所を指定することができるんだよ。乗り物で例えると、相対パスは「家から出発して、左に曲がって3つ目の交差点の前まで行く」といった感じかな。絶対パスと違って、現在の位置からの相対的な位置関係を表すんだよ。覚えておくと、ファイルの場所をわかりやすく表現することができるよ。

相対パスと絶対パスの違いは何ですか？

ハナ: 相対パスと絶対パスの違いは何ですか？

リュウ: それはいい質問だね。相対パスと絶対パスの違いは、場所を指定する方法です。まず、絶対パスは、ファイルやフォルダの場所を完全に指定します。例えば、「家の前にある木の写真」という場所を指定するとしたら、絶対パスでは、「家の前の庭/木の写真」という具体的な場所を指示します。
一方、相対パスは、現在の場所からの相対的な位置を示します。例えば、自宅の中にある部屋から「家の前にある木の写真」を指定する場合、相対パスでは、「部屋/庭/木の写真」というように、現在の場所からの相対的な位置関係で指定します。
つまり、絶対パスは具体的な場所を示しているのに対し、相対パスは現在の場所からの位置関係を示しているんだよ。分かりやすいかな？

相対パスの使い方を教えてください。

ハナ: 相対パスの使い方を教えてください、リュウさん！

リュウ: もちろんだよ、ハナさん！相対パスは、ウェブサイト内でのファイルやディレクトリの位置関係を指定する方法だよ。例えば、ハナさんがクラスのページで画像を表示したいとき、相対パスを使って画像の位置を指定することができるんだ。具体的に説明すると、ウェブページのルートディレクトリからの相対的な位置を指定することで、ファイルの場所を示すんだよ！

ハナ: なるほど、相対パスって便利なんですね！でも具体的にどうやって書くんですか？

リュウ: いい質問だね！相対パスには、二つの方法があるんだよ。一つは、ファイルが存在するディレクトリを起点にした相対パスで指定する方法だね。もう一つは、現在のディレクトリを起点にして指定する方法だよ。たとえば、同じディレクトリ内にある「index.html」というファイルから、「images」というフォルダ内の「pic.png」という画像を表示したい場合、相対パスとして「./images/pic.png」と書けばいいんだよ！「./」は現在のディレクトリを示していて、その後ろにフォルダ名とファイル名を書くことで、指定した場所のファイルを表示できるんだ！

ハナ: なるほど！なんだか少しだけ分かった気がします！でも、もう少し例を教えてもらえますか？

リュウ: もちろんだよ！たとえば、現在のディレクトリが「blog」というフォルダで、その中に「index.html」というファイルがある場合、同じく「blog」フォルダ内にある「images」というフォルダ内の「pic.png」という画像を表示したいとしよう。この場合、相対パスは「./images/pic.png」と書くことができるよ！スラッシュ（/）はディレクトリを区切る記号で、これでフォルダ内のファイルにアクセスできるんだ！

ハナ: なるほど！スラッシュを使ってディレクトリを区切るんですね！覚えました、リュウさん！

リュウ: すごいね、ハナさん！相対パスの使い方が分かったみたいだね。もし他に質問があったらいつでも聞いてね！

ハナ: わかった、リュウさん！また何か分からないことがあったら聞きますね！

リュウ: いつでも聞いてね、ハナさん！将来のwebデザイナーとして頑張っている姿を応援してるよ！がんばって！

カレントディレクトリとは何ですか？

ハナ: カレントディレクトリって何ですか？

リュウ: カレントディレクトリとは、いまあなたが今いる場所、つまり今の作業フォルダのことです。例えば、あなたがいま自分の部屋にいて、机の上にあるファイルを見つけるために、あなたはカレントディレクトリ、つまり自分の部屋で探すわけですよ。カレントディレクトリは、現在の作業フォルダを指しています。分かりましたか？

ハナ: うん、分かったよ！カレントディレクトリって、今いるフォルダのことなんだね！

リュウ: そうです、よく分かりましたね！カレントディレクトリを理解することは、将来Webデザイナーになる上でとても重要ですよ。たとえば、Webサイトを制作するときには、HTMLやCSSといったファイルをカレントディレクトリに置くことで、効率的に管理することができます。カレントディレクトリへの理解は、仕事の効率化にも繋がるんですよ。

相対パスでのドット（.）の使い方を教えてください。

ハナ: 相対パスでのドット（.）の使い方を教えてください。

リュウ: こんにちは、ハナさん！相対パスでのドット（.）の使い方について説明しますね。ドット（.）は、現在のディレクトリ（フォルダ）を指す記号です。例えば、現在自分がいるディレクトリから別のディレクトリに移動する際に使うと便利です。

ハナ: うーん、よく分かりません。具体的な例で教えてもらえますか？

リュウ: もちろんです！例えば、現在のディレクトリが「index」で、その中に「image」というフォルダがあるとします。その場合、現在のディレクトリからimageフォルダに移動するには、ドット（.）とスラッシュ（/）を使って、「./image」と書くことができます。

ハナ: なるほど、現在のディレクトリを意味するんですね！でも、ドット（.）は他にも使い方があるって聞いたことがあるんですが、それについても教えてください。

リュウ: そうですね、ドット（.）は他にも使い方があります。例えば、ファイルのパスを指定する際に、ドット（.）を使って相対パスを表現することもできます。たとえば「./images/pic.jpg」と書くことで、現在のディレクトリからimagesフォルダ内のpic.jpgファイルへの相対パスを表すことができます。

ハナ: なるほど！ドット（.）は現在のディレクトリを指すんだけど、相対パスの一部としても使えるんですね！すごいです！

リュウ: そうですよ！ドット（.）は便利な記号ですし、webデザイナーになるとよく使うことになると思います。ちょっと難しいかもしれませんが、慣れてしまえばすぐに使えるようになりますよ。頑張ってくださいね、ハナさん！

ハナ: わかりました！頑張ります！ありがとう、リュウさん！

相対パスでのドット2つ（..）の使い方を教えてください。

ハナ: こんにちは、リュウさん！将来webデザイナーになりたいんだけど、相対パスでのドット2つ（..）の使い方が分からなくて困ってるの。教えてくれる？

リュウ: もちろん、ハナさん。相対パスでのドット2つ（..）は、ファイルやフォルダの階層を上に上がるときに使いますよ。たとえば、お家の階段を上るときに、上に上ることを表すために階段を使うのと同じようなイメージですね。

ハナ: なるほど、わかりました！では、具体的な使い方はどうなんですか？

リュウ: 例えば、あるフォルダにいるときに、そのフォルダの親フォルダに移動したい場合は、相対パスで「..」を使います。階層が上がることができますよ。

ハナ: なるほど、それなら自分が一番上の階層に戻りたいときはどうするんですか？

リュウ: そうですね、自分がいる階層より上の階層に戻るためには、相対パスで「../..」と書くんです。それで一気に２階層上がることができますよ！

ハナ: わかりました！フォルダの階層を上がるためのドット2つの使い方が分かったような気がする！

リュウ: よかったですね、ハナさん！これで相対パスのドット2つの使い方がスムーズに理解できると思いますよ。今後もwebデザイナーの道でがんばってくださいね！

相対パスでのファイル名の指定方法を教えてください。

ハナ: 相対パスって、どうやって指定するんですか？

リュウ: あ、ハナさん、相対パスですね。相対パスは、ファイルとファイルの関係性で指定する方法なんだよ。たとえば、ハナさんが現在いるフォルダから、別のフォルダにあるファイルを指定する場合、相対パスを使って指定するんだよ。

ハナ: フォルダとか、関係性ってなんですか？

リュウ: あ、ごめんね、説明が抽象的だったね。フォルダっていうのは、コンピュータ内でファイルを整理するために使う場所のことだよ。たとえば、教科書やノートを整理しているのと同じようなイメージかな？

ハナ: わかった！じゃあ、具体的に教えてください！

リュウ: 分かりやすい例で説明するね。ハナさんが今いるのは学校の教室で、学校には色んなクラス（フォルダ）があると思ってね。教室から別のクラスの教材（ファイル）を取りに行く時、あなたは教室から何歩進んで、何回曲がれば目的の教材にたどり着くかを考えるでしょう？

ハナ: うん、それなら分かるかも！

リュウ: そうそう、相対パスも同じような感じなんだよ。現在のフォルダ（教室）から、目的のフォルダ（教材があるクラス）まで、何回進んで、何回曲がればたどり着けるか考えるんだよ。

ハナ: なるほど！じゃあ相対パスの書き方を教えてください！

リュウ: 相対パスの書き方は、目的のファイルまでの階層の数を「../」で表し、最後に目的のファイル名を書くよ。たとえば、同じフォルダ内のファイルなら、そのままファイル名を書けばいいし、上の階層のフォルダにあるファイルなら「../ファイル名」って書けばいいんだよ。

ハナ: わかりました！相対パスの書き方は「../」でフォルダの上の階層を表し、最後に目的のファイル名を書けばいいんですね！

リュウ: そうそう、ハナさんすごいですね！今度は実際に使ってみてください。

相対パスでのディレクトリの指定方法を教えてください。

ハナ: 相対パスでのディレクトリの指定方法を教えてください！

リュウ: こんにちは、ハナさん！相対パスについて教えるよ。相対パスとは、現在のディレクトリを基準にして他のディレクトリを指定する方法なんだよ。例えば、現在のディレクトリが「web」というフォルダで、その中に「images」というフォルダがあれば、その中の「photo.png」というファイルを指定する時は、「web/images/photo.png」と書くといいんだ。分かりやすいですか？

相対パスでの親ディレクトリの指定方法を教えてください。

ハナ: 相対パスでの親ディレクトリの指定方法ってどうやるんですか？リュウさん。

リュウ: こんにちは、ハナさん！親ディレクトリの指定方法について説明しますね。親ディレクトリは、現在のディレクトリから一つ上の階層を指すんだよ。

ハナ: 現在のディレクトリって何ですか？

リュウ: ええと、ディレクトリはファイルをまとめたフォルダのことで、ウェブサイトでは各ページや画像などが入っています。現在のディレクトリとは、それぞれのファイルやフォルダがどの階層の中にあるかを指します。たとえば、ホームページが「www.example.com」だとすると、その中に「images」というディレクトリがあって、それが現在のディレクトリとなるわけだよ。

ハナ: なるほど！じゃあ、親ディレクトリの指定方法はどうすればいいんですか？

リュウ: 親ディレクトリは「../」という記号を使って指定するんだよ。この「../」は、現在のディレクトリから一つ上の階層を指します。例えば、現在のディレクトリが「www.example.com/images」だとすると、「../」を使うことで「www.example.com」まで戻ることができるんだ。

ハナ: わかった！つまり、「../」を使えば一つ前の階層に戻ることができるんですね！

リュウ: そうそう、その通り！「../」を使って親ディレクトリにアクセスすることができるんだよ。これを使って、相対パスで他のファイルやフォルダにアクセスしたり、リンクを張ったりすることができるんだよ。

ハナ: わ～、すごい！覚えました！ありがとう、リュウさん！

リュウ: どういたしまして、ハナさん！親ディレクトリの指定方法を理解してもらえて嬉しいです。これからもどんどん質問してくださいね！応援していますよ！

相対パスでのルートディレクトリの指定方法を教えてください。

ハナ: 相対パスでのルートディレクトリの指定方法って、どうやるんですか？

リュウ: こんにちは、ハナさん！相対パスでルートディレクトリを指定する方法について説明しますね。相対パスとは、現在のディレクトリから目的のファイルやフォルダにたどり着くための指定方法のことです。ルートディレクトリとは、ウェブサイト全体のファイルやフォルダが入っている場所のことです。

ハナ: なるほど、相対パスは現在のディレクトリから目的のファイルやフォルダにたどり着くための方法なんですね！では、ルートディレクトリを指定するための相対パスの表記方法はどうなってるんですか？

リュウ: ルートディレクトリを指定する相対パスは、普段から使っている相対パスと少し違います。通常の相対パスでは、「../」という記号を使って一つ上のディレクトリに移動することができますが、ルートディレクトリを指定する場合は、「/」という記号を使います。

ハナ: 「/」を使うんですね！でも、一つ上のディレクトリに移動する「../」と同じだと思ったんですけど、違うんですか？

リュウ: そうですね、少し違います。例えば、現在のディレクトリが「/root/parent/child/」という階層で、ルートディレクトリが「/root/」だとします。この場合、「../」を使って一つ上のディレクトリに移動すると、「/root/parent/」になります。しかし、「/」を使って指定すると、いくつ上のディレクトリに移動しても「/root/」で固定されます。

ハナ: なるほど、「../」と「/」では指定する場所が違うんですね。覚えておきます！リュウさん、ありがとうございました！

リュウ: どういたしまして、ハナさん！分かりやすかったですか？もしご不明な点があればお聞きくださいね。いつでも応援していますよ！頑張って将来のwebデザイナーの夢を叶えてくださいね！

相対パスでの同一階層のファイルの指定方法を教えてください。

ハナ: 相対パスでの同一階層のファイルの指定方法を教えてください。

相対パスでの隣のディレクトリのファイルの指定方法を教えてください。

ハナ: あのー、リュウさん、隣のディレクトリのファイルの指定方法ってどうやるんですか？

リュウ: こんにちは、ハナさん。ファイルの指定方法ですね。例えば、あなたがお友達の家に遊びに行くとき、道を教えてもらう必要がありますよね。それと同じような感じですよ。隣のディレクトリにあるファイルを指定するには「../」という記号を使います。この記号は、一つ上の階層を指すんです。だから、それを使ってファイルの場所を指定することができますよ。

ハナ: なるほど、一つ上の階層を指定するんですね！なんかイメージできました。ありがとうございます、リュウさん！

リュウ: どういたしまして、ハナさん。イメージできて良かったですね！もし他にもわからないことがあったら、いつでも聞いてくださいね。応援していますよ！

相対パスでの親ディレクトリのファイルの指定方法を教えてください。

ハナ: 相対パスでの親ディレクトリのファイルの指定方法を教えてください。

リュウ: そうですね、相対パスを使って親ディレクトリのファイルを指定する方法について説明しますね。親ディレクトリとは、現在のディレクトリより上の階層のことを指しますよ。親ディレクトリのファイルを指定するときは、ファイル名の前に「../」を付けることで表現します。例えば、現在のディレクトリが「/photos」で、親ディレクトリにある「index.html」というファイルを指定したい場合は、「../index.html」となります。親ディレクトリのファイルを指定する場合は、「../」を使って上の階層に移動するイメージですね。

ハナ: わかりました！「../」を使って上の階層に移動して、ファイルを指定するんですね。ありがとうございます！

相対パスでの別の階層のファイルの指定方法を教えてください。

ハナ: 相対パスって何ですか？リュウさん。

リュウ: こんにちは、ハナさん。相対パスというのは、ファイルを指定する際に現在のファイルの位置を基準にして、別の階層のファイルを指定する方法ですよ。たとえば、ホームページのトップページと、その中にある画像フォルダの中の画像を指定する場合、相対パスを使って指定することができるんです。

ハナ: えー、具体的にどうすればいいんですか？

リュウ: 例えば、現在のファイルが「index.html」という名前で、画像フォルダが「images」っていう名前の階層にある場合、index.htmlから見て、imagesフォルダにある「photo.jpg」という画像ファイルを指定するには、「images/photo.jpg」と書くんです。

ハナ: なるほど！それで、さらに別の階層にあるフォルダの指定はどうすればいいんですか？

リュウ: よく見るウェブサイトで、ページとページの間にフォルダがあることがありますよね。その場合は、「../」という記号を使います。この記号は1つ上の階層を示します。たとえば、「index.html」と同じ階層にある「news」というフォルダの中にある「article.html」というファイルを指定したい場合には、「../news/article.html」と書きます。

ハナ: なるほど！それで、一つ上じゃなくてもっと上の階層のフォルダを指定するにはどうしたらいいんですか？

リュウ: もっと上の階層を指定する場合も、「../」を重ねて使うことができるんです。たとえば、index.htmlと同じ階層にある「news」というフォルダの上の階層にある「assets」というフォルダの中にある「style.css」というファイルを指定したい場合には、「../../assets/style.css」と書くといいですよ。

ハナ: 分かりました！相対パスの使い方を覚えました！ありがとう、リュウさん！

リュウ: どういたしまして、ハナさん！相対パスはウェブデザインでよく使う方法なので、上手に使えるととても便利ですよ。これからもがんばって勉強していきましょうね！応援しています！

相対パスでの深い階層のディレクトリの指定方法を教えてください。

ハナ: 深い階層のディレクトリを指定する方法が知りたいんですけど、リュウさん、教えてください！

リュウ: もちろん、ハナさん！深い階層のディレクトリを指定する方法は、相対パスを使うんだよ。相対パスは、現在のディレクトリから目的のファイルまでの位置関係を表すんだ。具体的には、目的のディレクトリまでの上り方と降り方に注目するといいよ。

ハナ: なるほど！例えばどんな具体的な方法があるんですか？

リュウ: 例えば、現在のディレクトリから一つ上のディレクトリに移動するには、「../」を使うんだ。この「../」を重ねることで、さらに上の階層に移動することもできるよ。

ハナ: それって、まるで階段を上っていくみたいですね！分かりやすいです！でも、他のディレクトリに移動する場合はどうすればいいんですか？

リュウ: 他のディレクトリに移動する方法は、移動先のディレクトリまでの階層を「/」で区切って表現するんだ。例えば、現在のディレクトリから「images」というディレクトリに移動したい場合、「../images/」と指定することで移動できるよ。

ハナ: なるほど！階層を区切る「/」っていうのを使うんですね！ちょっと難しくて分かりにくかったけど、階段を上っていくイメージができたよ！ありがとう、リュウさん！

リュウ: いえいえ、ハナさんが理解できたなら嬉しいです！階段のイメージで分かりやすかったみたいで良かったです！もし分からないことがあれば、いつでも聞いてくださいね！

相対パスでの指定方法がわからない場合はどうすればいいですか？

ハナ: 相対パスでの指定方法がわからない場合はどうすればいいですか？

リュウ: それは、ちょっとしたコツが必要ですね。相対パスは、ファイルとファイルの関係を指定する方法なんだよ。例えば、お菓子の家を作る時に、ドアの前を指定するときは、そのドアの前の位置をパスとして指定するんだ。つまり、ドアの前に立っているとしたら、その前を指すときには「.」と書くんだよ。

ハナ: お菓子の家のドアの前を指定するときには「.」ですね。それは分かった気がします！でも、他の場所を指定する方法はどうすればいいですか？

リュウ: それは、ちょっと覚えておくと便利なルールがあるんだ。例えば、お菓子の家の中にあるキッチンの場所を指定するときは、ドアを通って奥に進む感じで指定するんだよ。つまり、ドアの前から奥に進むときには「..」と書くんだ。

ハナ: お菓子の家の中のキッチンの場所を指定するときには「..」ですね。覚えました！でも、それだけだとまだわからないです。他にもルールはありますか？

リュウ: そうだね、もう一つ大事なルールがあるんだ。それは、フォルダの名前を指定するときには、フォルダの名前をそのまま書くんだよ。例えば、玄関にある靴箱の場所を指定するときは、靴箱という名前を使うんだ。

ハナ: 玄関の靴箱の場所を指定するときには、靴箱という名前を使うんですね。なるほど！でも、どうすればこれらのルールを使って指定できるのかな？

リュウ: それは、大丈夫だよ。実際に使ってみると分かるから。まずは、自分が今いる場所からドアの前を指定してみて。その次に、ドアを通って奥に進んでキッチンの場所を指定してみて。最後に、別のフォルダの名前を使って指定してみて。少しずつ試してみるといいよ。

ハナ: 自分が今いる場所からドアの前、ドアを通って奥に進んでキッチンの場所、別のフォルダの名前を使って指定してみるんですね。頑張って試してみます！ありがとうございました、リュウさん！

リュウ: どういたしまして、ハナさん！分かりやすかったかな？任せておけば、きっとハナさんは素敵なwebデザイナーになれるよ！応援しています！

相対パスを使うメリットは何ですか？

ハナ: 相対パスを使うメリットは何ですか？

リュウ: こんにちは、ハナさん！相対パスを使うメリットはいくつかありますよ。例えば、ウェブサイトのファイルが複数のディレクトリに分かれている場合、相対パスを使うことで他のファイルとの関係を表現できます。相対パスを使うと、ファイルが保存されている場所に合わせてリンク先のパスを設定できるんです。これによって、ウェブサイトのファイルの組織化がスムーズになりますし、移動や修正を行った時にも便利ですよ。

ハナ: なるほど、相対パスを使うとファイルの組織化が簡単にできるんだね！それ以外にも使い道はあるの？

リュウ: そうですね、もう１つの使い道は、ウェブサイトを開発している時に、複数のページで共通のリソース（画像やスタイルシートなど）を使いたい場合です。相対パスを使うことで、共通のリソースを一箇所にまとめておくことができます。これによって、効率的にウェブサイトを作成することができますよ。

ハナ: そうなんだ！一箇所にまとめると、修正も楽になるんだね！でも、相対パスって難しそう・・・

リュウ: 心配しないで大丈夫ですよ。相対パスは実際に使ってみると意外と簡単ですよ。まずは、自分が作成するウェブサイトのフォルダ内でリンク先のファイルがどのような位置にあるのかを確認しましょう。そして、共通のリソースを使う場合は、その共通フォルダを参照する相対パスを書くだけです。覚えるポイントは、現在のフォルダを基準点にしてリンク先を書くことですね。何度か使ってみるうちに、自然とパスの書き方も覚えていくと思いますよ。

ハナ: なるほど、確認してから相対パスを書けばいいんだね！やってみたいなぁ、相対パス！リュウさん、教えてくれてありがとう！ありがとう！

相対パスがうまく機能しない場合はどうすればいいですか？

ハナ: 相対パスってうまく機能しない場合どうすればいいですか？

リュウ: こんにちは、ハナさん。相対パスがうまく機能しない場合、まずはファイルやフォルダの配置を確認してみましょう。相対パスでは、ファイルやフォルダの位置に基づいて指定するので、正しい位置にあるか確認することが大切ですよ。たとえば、現在のファイルから見て、パスが正しく指定されているかをチェックしましょう。ファイルが連動しているか、フォルダのルートから見て相対的な位置指定が正しいかを確認してみてください。応援していますよ！

相対パスのポイントを抑えるためには何を知っておくべきですか？

ハナ: 相対パスのポイントを抑えるためには何を知っておくべきですか？

リュウ: こんにちは、ハナさん！相対パスのポイントを抑えるためには、まずファイルとフォルダの関係を理解することが重要だよ。例えば、同じ階層にあるファイル同士なら「./」で相対的なパスを指定できるんだ。それから、親フォルダに戻る場合には「../」を使うことができるよ。

ハナ: ファイルとフォルダの関係、なるほど！でも、「./」や「../」って何なんですか？

リュウ: そうだね、ファイルとフォルダを例えると分かりやすいかな。まず「./」は現在のフォルダを指し示すようなものだよ。例えば、おやつの入った箱を指定するときには「./おやつ.html」と書くことで、同じ階層のおやつ.htmlというファイルを指定できるんだ。次に「../」は、一つ上のフォルダを指し示すようなものだよ。例えば、おやつの入った箱が入っている部屋に戻るときには「../」を使うことで、一つ上の階層に移動できるんだ。

ハナ: なるほど！「./」で同じ階層、そして「../」で一つ上の階層に移動するんですね。わかりました！ありがとう、リュウさん！

リュウ: どういたしまして、ハナさん！相対パスのポイントを抑えることで、ファイルの位置を正しく指定できるようになるから、大切なことだよ。これからも何かわからないことがあれば、いつでも聞いてね！応援してるよ！将来のwebデザイナー、頑張ってね！

相対パスの基本の基本を教えてください。

ハナ: 相対パスの基本の基本って、なんですか？リュウさんが教えてください！

リュウ: わかりました、ハナさん。相対パスの基本の基本とは、ウェブサイト内でファイルをリンクする際に使用する方法のことです。相対パスは、現在のファイルから見たリンク先の位置を表現する方法なんですよ。

ハナ: ウェブサイト内でファイルをリンクするとき、どうやって相対パスを使うんですか？

リュウ: いい質問ですね、ハナさん。相対パスでは、リンク元のファイルとリンク先のファイルとの位置関係に基づいてパスを指定します。具体的には、「../」や「./」といった記号を使いますよ。

ハナ: 「../」や「./」って、どういう意味ですか？

リュウ: 良い質問ですね、ハナさん。相対パスでは、「../」は親ディレクトリを表します。つまり、リンク元のファイルがあるディレクトリより1つ上の階層を指します。一方、「./」は現在のディレクトリを表します。つまり、リンク元のファイルと同じ階層を指しますよ。

ハナ: なるほど、親ディレクトリと現在のディレクトリを指定するんですね。それってどういう風に使うんですか？

リュウ: いい質問ですね、ハナさん。例えば、ホームページのトップページから別のページに遷移するときには、「../」を使って親ディレクトリに移動し、リンク先のファイルを指定します。また、同じディレクトリ内のファイルにリンクする場合は、「./」を使って現在のディレクトリを指定するんですよ。

ハナ: 分かりました！親ディレクトリと現在のディレクトリを使って、リンク先のファイルを指定するんですね。ありがとうございます、リュウさん！

リュウ: どういたしまして、ハナさん。相対パスの基本の基本は理解していただけましたか？分かりづらい部分があれば、いつでも聞いてくださいね！

神戸ホームページ制作プロ公式ブログ