相対パスの指定方法
相対パスを指定する際はフォルダ名を区切り文字で繋げて目的のファイル名を指定するようにします。
区切り文字はWindowsの場合は「\」と「 \ 」、LinuxやMacOSでは「/」を使います。
解説では区切り文字は「/」を使います。
パスを指定する際に記号を使って表現することがあるので解説します。
特殊な記号
カレントディレクトリ(現在のフォルダ)
カレントディレクトリを表す際には「.」を使いますが、一般的には省略して書きます。
親ディレクトリ(1つ上の階層のフォルダ)
親ディレクトリへの移動を表す際は「..」を使います。
書き方パターン
今回は以下のファイル構造を使って解説します。
project/
├── html/(カレントディレクトリ)
│ ├── top.html
│ ├── index.html
│ └── image/
│ └── flower/
│ ├── sakura.png
│ └── himawari.png
├── sample.html
└── css/
└── design.css
カレントディレクトリ内のファイル(top.html)にアクセスする場合
「top.html」と書きます。
カレントディレクトリを記載する場合は、「./top.html」と書きます。
子フォルダ内のファイル(sakura.html)にアクセスする場合
「image/flower/sakura.html」と書きます。
親フォルダ内のファイル(sample.html)にアクセスする場合
「../sample.html」と書きます。
同じ階層の別フォルダ内のファイル(design.css)にアクセスする場合
「../css/design.css」と書きます。
初心者が間違えやすいポイント
区切り文字
区切り文字を間違えて書いてしまう場合があります。特にスラッシュを使う場合は、Windowsの場合は「 \ 」、LinuxやMacOSでは「/」と向きが違うので間違えて入力することがあります。
区切り文字の後にスペースを入力している
区切り文字の後にスペースが入力されている場合はエラーになります。
入力していないか確認するようにしましょう。
スペルミス・ファイル名の拡張子の書き忘れ
スペルミスがあると正しく読み取られません。
間違えないように確認することや、コピー&ペーストを活用するようにしましょう。
また、拡張子を入力しないとファイル名と認識されません。
ファイル名を入力する際は、必ず拡張子も入力しましょう。
カレントディレクトリの場所が分からない
コマンドプロンプトの場合は「カーソルの左側」、LinuxやMacOSの場合は「ホスト名の後」にカレントディレクトリまでの絶対パスが書かれているので確認しましょう。
また、コマンドで表示することもできます。
コマンドプロンプトの場合は「cd」、LinuxやMacOSの場合は「pwd」で表示することができます。
フォルダ構造が把握できていない
エクスプローラーやFinderなどのファイルマネージャーを使い、視覚的にファイルの構造を把握するようにしましょう。
おわりに

相対パスの指定方法について解説しました。
無料のプログラミングスクール「テクドリ」の卒業生のインタビュー動画を、インスタグラムほか公式SNSにて公開中!