本講座では、パスへの理解を深めていきたいと思います。

パスとは

パスとは、ディレクトリやファイルの場所を記したものです。
「パスを書く」といえば、ディレクトリやファイルの場所をコンピュータに伝えることを指します。

パスの書き方例

以下のような構造のディレクトリがあるとします。

ディレクトリ構造

pathディレクトリ配下にはindex.htmlが置かれています。

pathディレクトリ配下

この構造でいくつかのパスの書き方例を挙げてみます。

  • link.htmlから並列のindex.htmlへのパス

link.htmlから並列のindex.htmlへのパス

link.html

または

./link.html
  • link.htmlからpathディレクトリ配下のindex.htmlへのパス

link.htmlからpathディレクトリ配下ののindex.htmlへのパス

path/index.html

または

./path/index.html
  • pathディレクトリ配下のindex.htmlからlink.htmlへのパス

pathディレクトリ配下ののindex.htmlからlink.htmlへのパス

../link.html

または

./../link.html

いくつか気になる点がありますね。
順に見ていきましょう。

パスの始点

例に挙げたパスの書き方では、自分自身がパスの始点になっています。
自分自身から見て「対象のファイルはここにありますよ」という書き方です。

スラッシュの意味

スラッシュ(/)で区切ることでディレクトリを表すことができます。
path/index.htmlは「pathディレクトリの―――」という意味でわかりやすいですね。

ドットの意味

ドット(.)は、1つか2つかで意味が異なります。

ドットが1つの場合、自分自身の場所を指し、これをカレントディレクトリと言ったりします。

ドットが2つの場合、1つ上階層のディレクトリを指します。
../link.htmlは「1つ上階層のディレクトリの―link.htmlですよ」、./../link.htmlは紛らわしい書き方をしていますが、「カレントディレクトリの―1つ上階層のディレクトリの―link.htmlですよ」、という意味になります。

index.htmlは省略可能

index.htmlは特別な命名で、ブラウザでアクセスするときに省略が可能です。

Appleのサイトを覗いてみましょう。

まずは以下のURLでアクセスしてみてください。

https://www.apple.com/jp/

続いてindex.htmlを付けた以下のURLでアクセスしてみましょう。

https://www.apple.com/jp/index.html

どちらも同じページが表示されたと思います。

このようにindex.htmlは省略が可能で、ディレクトリ + / でもページにアクセスできます。

おすすめのパスの書き方

1つのファイルへのパスでも複数の書き方があることが分かりましたが、どの書き方をするのが良いのでしょうか。
Gieerでは以下の書き方をおすすめします。

並列・下階層のファイルパス

./directory/file.ext

並列・下階層のファイルパスでは、./で始めることをおすすめします。
「カレントディレクトリの―」と宣言することでしっかりと位置関係が意識できるためです。

上階層のファイルパス

../file.ext

上階層のファイルパスでは、../で始めることをおすすめします。
カレントディレクトリを表す./で始めると見づらく、理解もしにくくなるためです。

index.htmlの省略

./directory/

index.htmlは省略することをおすすめします。
開発者としてはタイピング数が減ることがメリットですし、訪問者としてもURLがすっきりするメリット?があります。

まとめ

本講座では

  • パスにおけるスラッシュとドットの意味
  • おすすめのパスの書き方

について学びました。

HTMLに限らずパスに触れるたくさんあるので、ここで基本を身に着けておきましょう。

次の記事

これまでの記事

隠します!
Loading...