パソコンの基礎知識 パスについて解説！

HTMLでファイルを指定する時に使用するのが「パス」です。

今回はパスについて初心者の方でもわかるように解説していきます。

ぜひ、最後まで見て行ってください！

パスとは？

パソコン上でのパスとは「ファイルまでの経路」、イメージとしては「住所」のようなものです。

パスには大きく分けると「絶対パス」と「相対パス」があり、「相対パス」の仲間に「ルートパス」があります。

以下がHTMLで画像を表示させるときの記述例です。./assets/img/sample/sample.jpgの部分がパスになります。

<img href="./assets/img/sample/sample.jpg" />

MacとWindowsの表記の違い

MacとWindowsではフォルダパス・ファイルパスの表記が違います。

Macの場合

/Users/xxx/Downloads/xxx.jpgと表記し、「/ (スラッシュ)」から始まり、「Usersフォルダ」の中にある「xxx」フォルダの中にある「Downloadsフォルダ」の中にある「xxx.jpg」ファイルという意味になります。

Windowsの場合

C:\Users\xxx\Downloads\xxx.jpgと表記し、「Cドライブ」の中にある「Usersフォルダ」の中にある「xxx」フォルダの中にある「Downloads」フォルダの中にある「xxx.jpg」ファイルという意味になります。

Windowsでは「/ (スラッシュ)」の代わりに「\(バックスラッシュ)」「¥ (円記号)」で表現されたりもします。

しかし、HTMLを記述する場合にはWindowsも同じように「/ (スラッシュ)」を使用します。

絶対パスとは

絶対パスとはフォルダの階層構造の頂点から目的地までの経路を省略せずに表したパスのことです。

言い換えると「誰が見ても変化しない住所」のようなもので、「フルパス」とも呼ばれており、指定元のファイルがどこであってもパスは変わりません。

階層構造の頂点、フォルダ名、ファイル名の順で間をスラッシュで区切った表記になります。

style.cssファイルを指定したい場合、絶対パスで記述すると/Users/xxx/Webサイトフォルダ/assets/css/style.cssとなります。
※上記のパスは例でOS、フォルダ構成等によってパスの内容は変わります

絶対パスのメリット

絶対パスは省略せずに記述するので、フォルダの構造が目に見えて分かりやすいというメリットがあります。

また、指定元がどこであってもパスが変わらないので、リンク切れが起きません。

しかし、指定先のファイルの場所が変わってしまうとパスも変わります。

絶対パスのデメリット

省略ができないので、記述が長くなり、読み込みに時間がかかることがあります。

サーバーやパソコンのドライブなどすべてを記述する必要があるため、ローカル環境では使用することができません。

また、サイトの引っ越しをするとドメイン名が変わってしまうため、パスも書き換える必要が出てきます。

相対パスとは

相対パスとは、現在作業している場所から指定するファイルまでの経路を表したパスです。

同じファイルでも指定元が違えばパスも変わります。

相対パスを書くにはフォルダ階層について理解する必要があります。

フォルダ階層とは

フォルダ階層とは、入れ子状態にフォルダを管理することです。

同じ階層を色分けすると以下のようになります。

相対パスは以下のルールに従って指定します。

以下の図を例に説明すると、現在作業中のファイルが「index.html」だとして必要なファイルが「aaa.jpg」だとすると、同じ階層のフォルダ内のファイルを指定するので、相対パスは./assets/img/aaa.jpgとなります。

現在作業中のファイルが「style.css」だとすると、一つ上の階層に上がり別のフォルダ内のファイルを指定するので、相対パスは../img/aaa.jpgとなります。

相対パスのメリット

相対パスは絶対パスよりかなり省略して記述することができるので、作業効率が上がります。

ファイル同士の位置を表しているパスなので、ローカル環境でも使用することができます。

また、サイトの引っ越しをしたとしても、ファイル同士の位置関係が同じであれば、パスはそのまま使用できます。

相対パスのデメリット

フォルダ階層の仕組みを理解する必要があるため、初心者はよくつまづく部分だと言えます。

ファイルの場所を移動してしまうとファイル同士の位置関係が崩れ、リンク切れが起きてしまうため、注意が必要です。

また、Webサイトが大きければ大きいほどフォルダ階層が複雑になり、パスの指定が複雑になってきます。

ルートパスとは

ルートとはWebサイトのトップページを意味します。

ルートパスとはWebサイトのトップページを省略して記述するパスのことです。

ルートを常に基準とし、「http://ドメイン名」の部分を省略、ルートディレクトリの意味を持つ「/ (スラッシュ)」を最初に記述します。

このように絶対パスがhttp://ドメイン名/assets/img/aaa.jpgだった場合、ルートパスでは/assets/img/aaa.jpgと記述します。

ドメイン名を省略しているので、サイトの引っ越しをしたとしても、パスの記述変更は必要ありません。

相対パスと比べると記述は長くなってしまい、作業効率は悪いです。

それぞれのパスの使い分け方

相対パスは同じサーバー内にあるファイルを指定するためのもののため、外部のファイルを指定する場合は絶対パスを使用しなければなりません。

内部リンクには相対パスを使用することで、記述量が減り作業効率が上がる他、ローカル環境でも使用できるので便利です。

大きいWebサイトのファイル構造が複雑な場合、またはチームで開発する際にはルートパスを使用します。

まとめ

今回は、HTMLで使用する絶対パス、相対パス、ルートパスについて解説してきました。

いかがだったでしょうか？

パスそれぞれのメリット、デメリットを知り、適切なパスを利用するようにしましょう。

別投稿にてコーディングについての知識について解説していますので、そちらもぜひチェックしてみてください！