一から始めるWeb制作 #7〜絶対パスと相対パスの違いを理解しよう！

ウェブサイトを作成していると、カテゴリーやファイルが増えて、ディレクトリが多階層になる。

それをブラウザに適切に表示させるため、ディレクトリを整理して、その経路「パス」を正しく書くことが大切だ。

今回は、HTMLコーディングにおける「絶対パス」と「相対パス」について書いておこう。これが理解できると、パンくずリストの理解が早くなる。

HTMLにおける「パス」とは

冒頭でも触れたように、「パス」とはディレクトリ内の経路のこと。

HTMLでは、他のファイルへのアクセス指示をコーディングすることが頻繁にある。例えば、

などなど。このアクセス経路のことを「パス」という。

具体的に、以下の図を例に説明しよう。フォルダの階層ごとに色分けをしてある。

「一から始めるWeb制作 #2〜ウェブサイトの仕組みとHTML」でも説明の通り、ウェブサイト全てのファイルやフォルダが入っているものを「ルートディレクトリ」という。

上図では、Homeフォルダがルートディレクトリにあたる。

Homeフォルダ内全てのフォルダとファイルを、サーバー上のルートディレクトリへアップロードするからだ。

そして、上図の「images」「css」「javascript」「Debian」などの各フォルダは、サブディレクトリ。全て、ルートディレクトリに格納されている。

また、ウェブサイトのトップページにあたる「index.html」も、サブディレクトリ同様、ルートディレクトリに格納されている。

サブディレクトリの「Debian」には、さらに「32-bit」と「64-bit」の2つのサブディレクトリがあり、それぞれにHTMLファイルが存在するとしよう。

ちなみに、「Debian」フォルダ内の「index.html」は、ウェブサイト上における「Debian」カテゴリーページのインデックスにあたる。

このうち、「64-bit」フォルダのbbb.htmlというファイルを、パンくずリスト（ウェブページ上部や下部にある内部リンクの道標のようなもの）で表現すると、

Home / Debian / 64-bit / bbb.html

となる。これが、コーディングにおける「パス」だ。

このパンくずリストによって、ユーザーは自分が今閲覧しているページが、ウェブサイト上のどこに位置するのか、すぐに理解することができる。

絶対パス（フルパス）とは、ルートディレクトリから目的ファイルまでのパスを、文字通り「フル」で書くこと。具体的には、ドメイン名から全て書くことをいう。

前回作成した、デモサイトのルートディレクトリは「https://www.ura-no-ura.com/demo/」なので、上述のファイルへのリンクを書く場合は、

<a href="https://www.ura-no-ura.com/demo/Debian/64-bit/bbb.html">bbb（仮ファイル名）</a>

となる（リンクの「aタグ」については次回詳しく説明予定）。

絶対パスは、どの階層にあるファイルでも、ドメインから全てのルートを記載する。

そのため、階層を間違えたことにより、リンクが外れてしまうという凡ミスが起こることはない一方、何度も同じことを書く手間がかかる。

相対パスは、ルートディレクトリ内にて、現在作業中のファイルから、アクセスしたいファイルへのパスを表すもの。

上記の図を例に、説明しよう。現在、bbb.htmlファイルの作業中とする。

このファイルに、全体のスタイルシート「style.css」の内容を反映させたいという場合、スタイルシートへのアクセスは、図の青い線の通りだ。

これをHTMLで表す場合、

「../../css/style.css」

となる。

「../」は、ひとつ上の階層へ戻ることを示す。

具体的に、bbb.htmlのheadタグ内に記載する場合は、

<link rel="stylesheet" href="../../css/style.css">

となる。

bbb.htmlがある「64-bit」フォルダから「Debian」フォルダへひとつ戻り、さらにHomeフォルダへひとつ戻るので、「../」を連続して記述している。

そして、「Debian」フォルダとCSSフォルダは同じ階層にあるので、連続した「../」の後にCSSフォルダ名を指定し、そのフォルダ内のスタイルシート名を記述したものだ。

ウェブサイトのトップページにあたるindex.htmlは、CSSフォルダと同じ階層にあるので、スタイルシートを読み込ませる場合でも、階層を遡る記述は不要だ。

相対パスは、可能な限り省略できるものは省略するという、Google HTML/CSS Style Guideにも沿った書き方である一方、階層を間違えてリンクが反映されないというミスも起こりやすい。

ディレクトリとパスは、切っても切れない関係にある。

ディレクトリの構造をきちんと整理して、できる限り、相対パスでシンプルにコーディングしたいものだ。

「絶対パスは不要」というわけではない。必要に応じ、パスの書き方をチーム内で統一しておくことが大切だろう。

【本で学習したい人はコレ】