ウェブサイトを作成していると、カテゴリーやファイルが増えて、ディレクトリが多階層になる。
それをブラウザに適切に表示させるため、ディレクトリを整理して、その経路「パス」を正しく書くことが大切だ。
今回は、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にも沿った書き方である一方、階層を間違えてリンクが反映されないというミスも起こりやすい。
この章のまとめ
ディレクトリとパスは、切っても切れない関係にある。
ディレクトリの構造をきちんと整理して、できる限り、相対パスでシンプルにコーディングしたいものだ。
「絶対パスは不要」というわけではない。必要に応じ、パスの書き方をチーム内で統一しておくことが大切だろう。
【本で学習したい人はコレ】
コメント