【htmlコーディング】絶対パスと相対パスとは？違いを解説！

今回は、パスについて解説します。
絶対パス？相対パス？と、一度は悩んだことがあると思います。
パスを理解してコーディングスピードをあげよう！

パスとは

まずパスについて解説します。

パスとは、ディレクトリの場所を識別するための文字列です。
ディレクトリとは、フォルダのことです。

パソコンのフォルダをイメージしてください。

例えば、写真データを保存している場所が「ピクチャ」フォルダだとすると、その「ピクチャ」を識別するために必要な文字列のことを「パス」と言います。

識別の文字列

「ピクチャ」フォルダにsample.jpgという写真データを保存しているとします。
この場合、「/ピクチャ/sample.jpg」のように、スラッシュで区切って表現します。

この「/ピクチャ/sample.jpg」が、パスという言い方をします。

自分がいる場所からみたパス

次は、自分がいる場所からみたパスを考えてみます。

自分が「ユーザー」というフォルダを開いているとします。
「ユーザー」フォルダには、下記のようにいくつかフォルダがあるとします。

• ドキュメント
• ピクチャ
• ムービー

この時、先ほどと同様ピクチャフォルダのsample.jpgまでのパスは、「ピクチャ/sample.jpg」となります。

さっきと比べると、最初のスラッシュがないですね。

これは、今いる場所の階層にピクチャがあるので、スラッシュが不要になります。

次は、ピクチャフォルダを開いている状態で、ドキュメントのsample.txtまでのパスは、「../ドキュメント/sample.jpg」になります。

ピクチャフォルダにいるので、そこにはドキュメントフォルダはありません。
なので「../」ドットドットスラッシュで、1つ上の階層にあがる必要があります。

少し難しいですね。

ホームページのURL

ホームページのURLも全く同じことが言えます。

ホームページは、サーバーにフォルダとファイルをアップロードされていて、そのファイルをダウンロードすることでページが表示されるようになっています。

例えば、https://www.〇〇〇.com/company/index.htmlというURLがあるとします。
「www.〇〇〇.com」がドメイン、「company」がフォルダで、「index.html」がファイルですね。
なので、先ほど解説したパソコンのフォルダと全く同じです。

ただ、URLの場合は、フォルダではなくディレクトリという言い方をします。

絶対パス・相対パス・ルートパス

パスには3つ種類があります。

絶対パス

絶対パスは、ドメインも含んだパスのことです。

例：https://www.〇〇〇.com/company/index.html

メリット
・今いる場所がどこだろうが関係なく、同じ記述ができる。

デメリット
・文字数が長い
・コーディングするときサーバーにアップしないと確認できない
・ドメインを変更した際に、すべて修正が必要

サイト内のリンクであれば、絶対パスはまず使いません。
外部サイトに飛ばす時などに使用します。

相対パス

相対パスは、今いる場所からみて記述するパスのことです。

例：company/index.html、../company/index.html

メリット
・文字数を短くできる
・コーディングするときサーバーにアップしないで確認できる
・ドメインを変更しても、そのまま使用できる

デメリット
・「../../」など、階層が深いとややこしい
・ディレクトリの階層を変更すると、すべてリンク切れになる

相対パスは、慣れるまで時間が掛かります。
コーディングで一番使うのは相対パスなので、しっかり覚えましょう。

ルートパス

ルートパスは、1番上の階層からみて記述するパスのことです。

例：/index.html、/campany/index.html

メリット
・今いる場所がどこだろうが関係なく、同じ記述ができる。
・必ず1番上の階層からみた書き方なのでわかりやすい
・ドメインを変更しても、そのまま使用できる

デメリット
・コーディングするときサーバーにアップしないと確認できない

ルートパスは、階層が違うファイルの場合でも同じ書き方ができるので、個人的には1番すきです。
デメリットのサーバーにアップは、MAMPやXAMPPなどをインストールすれば、問題なくコーディングできます。

最後に

以上、パスについて解説しました。

初めは、パスを間違えて表示させたい画像や、cssファイルが効かないなどの壁にぶつかることがありますが、慣れるとスラスラ書けるようになるので、頑張って覚えましょう。