HTMLコーディングをはじめよう〜副業にも!|第5章 絶対パスと相対パス

directory and path

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

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

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

HTMLにおける「パス」とは

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

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

  • ウェブサイト全体を装飾するスタイルシート
  • ナビゲーションメニューや内部リンクにおける他ページへのリンク
  • イメージフォルダ内に格納された画像

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

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

ファイルディレクトリの階層

HTMLコーディングをはじめよう〜副業にも!|序章 ウェブサイトとHTML」でも説明の通り、ウェブサイト全てのファイルやフォルダが入っているものを「ルートディレクトリ」という。

上図では、Homeフォルダがルートディレクトリにあたる。Homeフォルダ内の全てのフォルダとファイルを、サーバー上のルートディレクトリ(https://zakkuri-linux.com)へアップロードするからだ。

そして、上図の「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://zakkuri-linux.com」とし、上述のファイルへのリンクを書く場合は、

<a href="https://zakkuri-linux.com/Debian/64-bit/bbb.html">bbb(仮ファイル名)</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にも沿った書き方である一方、階層を間違えてリンクが反映されないというミスも起こりやすい。

この章のまとめ

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

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

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

コメント