相対パス・絶対パスとは

プログラミングをする上でどうしても押さえておきたいのが相対パス・絶対パスです。
これを理解しておかないと今後あなた…絶対に苦労するわよ（有能占い師風）。

HTMLに関わらず他のjavascriptだったりティラノスクリプトでも普通に使うので必ず押さえておきましょう。

相対パス

リンク元ファイルを起点に、リンク先ファイルまでの通り道を指定する記述方法を相対パスと言います。この説明だとわかりにくいと思うので実際に画像を見てみましょう。

まず、デスクトップに「soudaipasu」というフォルダを作りました。（相対にするつもりだったのになぜか壮大になったの草）これはHTMLの場合ならウェブページの中身を大量に詰め込むべき大元の場所ですね。

soudaipasuフォルダの中には「ichimonji」フォルダと「tumitobatu.html」ファイルが入っています。さらに、この「ichimonji」フォルダの中を覗いてみましょう。

「ichimonji」フォルダの中には「daigokun.html」というhtmlファイルが入っています。

階層を上げたいとき

あなたは今このdaigokun.htmlを加工編集しているとしましょう。そして一つ上の階層である「tumitobatu.html」をリンクしたい。そんな時に相対パスならこう表現します。

<a href="../tumitobatu.html">

<a href～>というのは、リンクするという意味を持っています。そしてこの「../」というのが、フォルダの階層を一つ上にのぼる（戻る）という意味です。つまり、「../」こうすることによってプログラム側は今居るdaigokun.htmlのフォルダから１つ上の「soudaipasu」フォルダに移動したということです。もしも２つフォルダの階層を登りたければ

このように、階層を２つ分上に上げてあげましょう。../が１個につき１つ分階層アップです。

階層を下げたいとき

では逆に、あなたが今tumitobatu.htmlを加工編集しているとしましょう。そしてdaigokun.html（下の階層にあるファイル）をリンクしたいとします。そうしたらこのように書きましょう。

<a href="ichimonji/daigokun.html">

これは簡単で、「ichimonji」フォルダの中にある「daigokun.html」を呼んできてよ！という意味です。左側がフォルダ名、スラッシュで分けた右側がファイル名です。
もしもいくつも下のフォルダの中を指定したいときはこのように書きます。下げたいフォルダを全部指定してPCにあなたが行くべき場所はここよ…と誘導してあげましょう。

<a href="ichimonji/ichimonjiikemen/daigokunnomesikatu.html">

同一階層の場合

もしも繋げたいファイルが同じフォルダ内に存在しているならば、こんな感じでファイル名を書いてあげるだけでOKです。

<a href="daigokunnomesikatu.html">

相対パスのメリット

ネット環境がなくても関連性を持たせることが可能です。これ使えたらプログラミングやってても結構便利です。

相対パスの注意点

相対パスを使うとたまに困ったことになります。というのが、ファイルの位置を違う階層のフォルダに移動したときに、PC側が「え？そんなファイルねーけど？」と言ってくることです。もしも場所を移動したならば指定するフォルダの階層も違うので当然のことでしょう。なので不用意に場所を動かせないというのがちょっと難点ですね。場所を変えるならばこの相対パスも全部書き換えです。あぁ面倒くさい。

絶対パス

絶対パスというのは相対パスよりも単純明快で、ダイレクトにURLを記載します。試しに書きますがこんな感じですね。

<a href="http://111111monji.com/">

絶対パスの注意点

絶対パスはURLをそのままリンクするので、もしもURLが変わったりすると途端にリンク切れを起こしてしまうデメリットがあります。
それからネット環境があってホームページみたいに公開されてないと使えないので、この絶対パスを使うタイミングとしては本当に全く関係のない外部のサイトに飛ばしたいときなどに利用します。