パス・ディレクトリとは？開発で必須なパスの基本知識と読み方を解説！

パスの表記はこんな感じ

パスは以下のように表記します。

./directory01/css/style.css

【 例のパスの読み方 】
「現在のディレクトリ内の"directory01"ディレクトリ内の"css"ディレクトリ内の"style.css"ファイル」

パスが必要なタイミング例

パスが必要なタイミングは意外に多いです。

• HTMLファイルのheadタグなどで他ファイルを読み込ませるとき。
• CSSで画像や他ファイルを読み込ませるとき。
• コンピュータでパスが関係する設定をするとき。
• コマンドで操作するとき。

ここで挙げたもの以外にもたくさんパスを使用する機会はあります。

「〇〇ディレクトリ内の」："(ディレクトリ名)/"・"(ディレクトリ名)\"

パス上で「〇〇ディレクトリ内の」を意味するのに、Linux/macOSは"(ディレクトリ名)/"・Windowsは"(ディレクトリ名)\"と表記します。

パス上の"〇〇/"・"〇〇\"が「〇〇ディレクトリ内の」という意味です。

ルートディレクトリ："/"・"\"

ルートディレクトリとは、コンピュータ上のフォルダー/ファイルすべてを内包する一番大元のディレクトリです。
パスの一番左に、Linux/macOSは"/"・Windowsは"\"を記載します。

【基準】

• ルートディレクトリ。コンピュータ上の一番大元のディレクトリが基準。
• 開いているディレクトリは関係ない。

パスの一番左の"/"・"\"がルートディレクトリです。

ホームディレクトリ："~/"・"%USERPROFILE%/"

ホームディレクトリとは、コンピュータ上のユーザーのデータ保存用のディレクトリです。
パスの一番左に、Linux/macOSは"~/"・Windowsは"%USERPROFILE%/"を記載します。

【基準】

• ホームディレクトリ。コンピュータ上のユーザーのデータ保存用のディレクトリが基準。
• 開いているディレクトリは関係ない。

パスの一番左にある"~/"・"%USERPROFILE%\"がホームディレクトリです。

カレントディレクトリ："./"・".\"

カレントディレクトリとは、現在開いているディレクトリです。
パスの一番左に、Linux/macOSは"./"・Windowsは".\"を記載します。

【基準】

• 開いているディレクトリが基準。

パスの一番左にある"./"・".\"がカレントディレクトリです。

「1つ戻って」親ディレクトリ："../"・"..\"

パス上で親ディレクトリ（内包してるディレクトリ）として、Linux/macOSは"../"・Windowsは"..\"と表記します。
簡単な言葉にすると「1つ戻って」です。

パス上の一番左に"../"・"..\"を表記すると、現在開いているディレクトリの親ディレクトリという意味になります。

【基準】

• パスの一番左が”../”・”..\”の場合、開いているディレクトリが基準。

パス上の"../"・"..\"が親ディレクトリ「1つ戻って」を意味します。

HTMLのimgタグで画像を表示する

imgタグは画像を表示するためのタグです。
属性srcに画像のパスを書きます。

上のHTMLをブラウザで表示すると、こんなかんじになります。

【 パスのイメージ 】

HTMLのaタグで別ページへ遷移させる

aタグを使うと別ページや外部サイトへのリンクが作れます。
ここでは別ページのリンクとして説明します。

上のHTMLをブラウザで表示すると、こんなかんじにリンクになります。

【 パスのイメージ 】

headタグでCSSファイルを読み込むとき

headタグ内には、CSSやJavaScriptファイルなどパスを指定して別ファイル呼び出すことができます。

linkタグの属性"href"にCSSファイルパスを指定します。

上のHTMLをブラウザで表示すると、こんなかんじになります。

【 パスのイメージ 】