HTML&CSSシェアするLINE!こんにちは、@AWAKOJIです。この記事では、絶対パスと相対パスの違いと書き方について簡単にわかりやすく説明しました。プログラミング初心者の僕が3か月前の僕に向けて書いた内容です。よかったらご覧ください。絶対パスと相対パスどちらで書くか?パスとは?パスとは英語でかくと“path”。ある画像を表示したり、あるページをリンクするとき、読み込むファイルまでの道順を教えてくれる文字列がパスというわけです。パスには絶対パス相対パスの2種類があります。絶対パスと相対パスを簡単に理解する2つの違いを簡単に説明します。2つの違いを理解するために以下の話を読んでみてください。おばあちゃんがAWAKOJIの家を訪ねようとして道に迷いました。ある家の住人に道を尋ねます。AWAKOJIさん家』というのが絶対パスです。住人が言った『隣』というのが相対パスです。絶対パスとは、誰が見てもわかる場所のことを言います。一方で相対パスは、ある場所を基準にして示される場所のことを言います。それぞれもう少しだけ詳しく説明していきます。path”と書きます。AWAKOJIさん家』のことです。見ればだれでもそのファイルのまでの道がわかるのが絶対パスです。パソコン内のあるファイルの場所を絶対パスで書くと、C:フォルダ名/フォルダ名/フォルダ名/ファイル名というような感じになります。インターネット上では、ファイルの場所を絶対パスで書くとhttps://○○○○.○○.○○というような感じです。インターネット上の絶対パスはURLというわけですね。絶対パスをつかうのはほとんどURLになることが多いです。そのため、『絶対パス=URL』と考えると理解しやすいです。path”と書きます。説明したとおり『隣』というのが相対パスにあたります。コードを書いているファイルから見た、目的のファイルまでの道がわかるのが相対パスです。相対パスは他人のサイトのファイルは書くことができません。別のサーバになってしまい相対的な場所を表示できないからです。絶対パスは他人のサイト(別のサーバ)のリンクを貼るときに使います。絶対パスを使ってリンクをはってみます。href="https://positivelifeshow.com">AWAKOJIのブログだよ</a>ご覧のとおり、絶対パスというのは、URLのことです。正確に言うとURLは絶対パスのうちの一つですが、絶対パス=URLという理解でも初心者の間は問題ないでしょう。以下の画像をご覧ください。これはAWAKOJIフォルダの中身です。a.htmlを基準にしてそれぞれのファイルへのリンクを貼ってみましょう。同じフォルダ内の場合a.htmlファイルの中で、b.htmlファイルのリンクを貼ってみます。href="./b.html">bページのリンクだよ</a>同じフォルダ内にあるファイルを読み込むときはファイル名だけを入力すればOKです。ちなみにb.htmlの前にある「.」はカレントディレクトリといって現在のディレクトリ(フォルダ)を意味しています。b.htmlファイルとなります。ディレクトリとはフォルダのことです。※最初の「./」は省略することもできます。href="b.html">bページのリンクだよ</a>下層ファイルの場合a.htmlファイルの中でc.htmlファイルのリンクをはります。c.htmlファイルとなります。上層ファイルの場合1a.htmlファイルの中でd.htmlファイルのリンクをはります。href="../d.html">dページのリンクだよ</a>上の階層のファイルを読み込む場合、使うのは「..」です。これで「一つ上の階層の」という意味があります。d.htmlファイルとなります。上層ファイルの場合2a.htmlファイルの中でe.htmlファイルのリンクを貼ります。href="../../e.html">eページのリンクだよ</a>二つ上の階層なら「../..」と二つ書きます。e.htmlファイルとなります。わかると思いますが、階層があがるごとに「..」が増えるというわけです。上層ファイルの下層ファイル最後にa.htmlファイルの中でf.htmlのリンクを貼ります。⇒f.htmlファイルとなります。絶対パスと相対パスどちらで書くか?同じサーバであれば、絶対パスでも相対パスでも読み込むことはできます。URLを書けばいいわけなので絶対パスの方がややこしくなさそうですよね。絶対パスで書くと、将来サイトを引っ越ししてドメインが変わった場合、リンク切れを起こすため修正が必要になってきます。相対パスで書いておけばドメインが変わってもフォルダ名、ファイル名に変更はありません。そのためできるだけ相対パスで書いた方がいいでしょう。