【初学者必見】絶対パス・相対パスの書き方を解説！

コーディングをしているときに、なぜかCSSが反映されなかったり、画像が反映されなかったという経験したことありませんか？
大抵その時の原因は、パスの指定方法が間違っているケースが多いです。

今回の記事では、コーディングのつまづく原因となることの多いパスの指定方法について解説をしていきます。

この記事を読むことで、パスの指定ミスによるコーディングのつまづきはなくなり、より効果的にコーディングを進めることができるようになります。

パスってって何？

パスとはpath（通り道・道筋）のことです。
コーディングをする際にはHTMLやCSSに外部ファイルを読み込む必要があります。外部にあるファイルを読み込むことで画像を表示したり、ハイパーリンクを実装したり、HTMLファイルにCSSファイルを読み込んだりすることができます。

パスとは「該当するファイルのありか（までの道筋）」と認識しておけば大丈夫です。

パスには大きく2種類の指定方法があります。それが絶対パスと相対パスです。それぞれについて解説していきます。

絶対パスの書き方

絶対パスはhttpから始まるURLで「ファイルのありか」を指定する方法です。
以下のように使用します。

See the Pen
BaNeezP by クリ★スタ (@cresta_design)
on CodePen.

上記のテキストリンクをクリックするとクリ★スタのサイトに移動します。href属性の中にはクリ★スタのサイトのURLが書いてあります。

外部サイトをリンク先に設定する場合は絶対パスを使用します。

相対パスの書き方

相対パスはファイルの相対的な位置関係から「該当するファイルのありか」を指定する方法です。ファイル・フォルダの階層構造が関わってくることを理解しておきましょう。

同じ階層を指定：./ または何も付けない
一つ上の階層を指定：../
一つ下の階層を指定：/

以下のように、フォルダ名をスラッシュやドットでつなぎながら該当するファイルまでの道筋（パス）を書きます。

まとめ

今回は、パスの指定方法について解説をしていきました。

相対パスと絶対パスは必ず覚えておきましょう♪