URL について

URL は、ウェブページのようなウェブ上のリソースを参照するため、その場所を示すもので、ウェブを構成する根本的な標準規格のひとつです。

わかりやすく例を挙げていえば、URL はウェブ上にある HTML 文書、画像や動画ファイル、その他リソースの場所を表す「住所」のようなものです。郵便などで使用する住所でも、家や会社の場所（行政区画や地番）だけでなく、集合住宅の場合は建物名や部屋番号、会社であれば部署や所属、あるいは役職などと組み合わせて、届けて欲しい人や場所を細かく指定することができますが、URL の仕組みも同様です。

ウェブサイト制作において、URL は頻繁に使用するものですので、その基本的な部分をまずはきちんと覚えておきましょう。

なお、URL の仕様は、HTML 仕様同様に、WHATWG が策定し、「URL Standard」（URL Living Standard）という形で公開されています。

URL の例

下記に URL の例を示します。

https://www.example.com/
https://www.example.com:443/
https://www.example.com/page/
https://www.example.com/page/page.html
https://www.example.com/page/page.html?key01=value01&key02=value02
https://www.example.com/page/page.html#section01

各部の名称

URL は下記の要素で構成されています。

スキーム

例でいう https の部分がスキームです。ウェブサイトにおいては一般的に https もしくは http が使用される場合がほとんどで、現在の主流は通信経路においてやりとりされるデータが Transport Layer Security （TLS） によって保護される、https です。この他にも電子メールのアドレスを示し、メールクライアントを起動する mailto スキームなどがよく利用されます。

<a href="mailto:info@example.com">メールを送信</a>

ホスト

ホストは、ドメイン名、もしくは IP アドレスのいずれかで指定します。多くの場合、スキームとホストまでの指定で、特定のウェブサイトのトップページまでたどり着くでしょう。

ポート

ホストに続いて、ポートを指定することが可能です。ただし、http なら :80、https なら :443 が標準ポートとなっているため、何らかの理由があってウェブサーバ側などで昇順とは別のポート番号を指定していない限り、ポートの指定は省略可能です。

よって、下記の 2 つの URL は同じということになります。

https://www.example.com/
https://www.example.com:443/

パス

パスは、ウェブサーバ上に置かれたリソースの細かい場所を特定するためのものです。前述した住所の例でいえば、部屋番号や部署、役職や人名といったところでしょうか。

パスは / で始まり、/ で区切ることで階層を表すことができます。ウェブサーバの設定で、パスの最後が / で終わる URL に対してどのリソースを返すかは決めることができるため、一般的には index.html など、index という名前を付けたファイルが表示されるようにしておく場合が多いです。

なお、ウェブサーバ上のパスが示す場所に、物理的にファイルが置かれている場合もありますし、動的生成（プログラムがリクエストに応じてデータベースなどと通信して結果を動的に返す仕組み）の場合は、実際には物理的なファイルは存在せず、処理を実行するための抽象的なデータとして扱われる場合もあります。

クエリ

クエリとして、ウェブサーバに追加の引数を送信することができます。クエリは ? で始まり、任意の キー と 値 の組み合わせ（値 は必須ではありません）で記述することが可能です。またこの組み合わせは & でつなげて複数指定することもできます。

ウェブサーバはクエリに応じて、検索結果を生成したり、表示する内容を変えるといった何らかの処理を行ったり、表示自体は変えなくても、アクセス解析を行うなど、様々な用途で利用することが可能です。

また、ウェブサイト制作の現場においては、外部から読み込む CSS ファイルや JavaScript ファイルのキャッシュをクリアする目的で使用する場合もあります。

<!-- クエリを変更することで、ブラウザにファイルが異なることを教え、キャッシュをクリアしてもらいます -->
<link rel="stylesheet" href="styles.css?202204011325" />

フラグメント

フラグメントは、HTML 文書の特定の場所を示すために使用されます。ウェブページ内の特定の場所にリンクを張りたい場合などによく利用されます。フラグメントは # で始まり、HTML 側で id 属性を用いて付与したフラグメント識別子を指定することでその場所にリンクを張って、ユーザーを移動させたりすることができます。

<a href="#section-url">「URLについての説明」に移動</a>
...（省略）...
<h2 id="section-url">URLについての説明</h2>

絶対 URL と相対 URL

HTML の属性値や CSS の宣言ブロック内において、URL を使用する場合、絶対 URL で記述する方法と、相対 URL で記述する方法を状況に応じて使い分けることができます。

絶対 URL とは、先に解説した「スキーム」から記述された URL のことをいいます。a 要素で絶対 URL を使用する場合は、下記のようになります。

<a href="https://www.example.com/">公式サイトはこちら</a>

一方で、同一のスキームやホスト内にあるリソースを指定する場合は、毎回スキームから記述するのも冗長ですので、相対 URL が使用できます。

相対 URL とは、「基準となる URL」からの相対的な場所を指定する方法です。基準となる URL というのは現在の場所、つまり相対 URL を記述する HTML 文書の URL ということになります。この基準 URL は、base 要素によって指定することもできます。

相対 URL にはいくつかの種類があり、例えばスキームを省略した「スキーム相対 URL（scheme-relative-URL）」は、スキーム部分が基準 URL と同じと判断されます。

<!-- スキーム相対 URL の例 -->
<script src="//cdn.example.com/js/plugin.js"></script>

つまり、基準 URL のスキームが https だった場合、上記の指定は、https://cdn.example.com/js/plugin.js が指定されたものとして扱われることになります。

パス相対 URL とパス絶対 URL

ウェブサイト制作においてよく使用されるのは、「パス相対 URL（path-relative-URL）」と「パス絶対 URL（path-absolute-URL）」でしょう。

どちらも、「スキーム」と「ホスト」は基準 URL と同一と見なされる点は同じです。

パス相対 URL とは、基準 URL からみた参照したいリソースの場所を「相対的な」パスで示すものです。例えば下記のようなディレクトリ構成で各ファイルが置かれていた場合で、「base.html」を基準 URL として考えたとき、各ファイルへのパス相対 URL がどのような記述になるかを考えてみましょう。

├ index.html
├ img
│  └ sample01.jpg
└ subdir
    ├ base.html ←基準 URL となるファイル
    ├ example.html
    └ img
        └ sample02.jpg

<!-- 基準 URL から example.html を指定するなら -->
<a href="example.html">example.html はこちら</a>
<a href="./example.html">example.html はこちら</a>

<!-- 基準 URL から sample02.jpg を指定するなら -->
<img src="img/sample02.jpg" alt="" />
<img src="./img/sample02.jpg" alt="" />

<!-- 基準 URL から index.html を指定するなら -->
<a href="../index.html">example.html はこちら</a>

<!-- 基準 URL から sample01.jpg を指定するなら -->
<img src="../img/sample02.jpg" alt="" />

<!-- もし index.html から sample02.jpg を指定するなら -->
<img src="subdir/img/sample02.jpg" alt="" />

パスが ./ から始まる、もしくは ./ がなく、ファイル名やディレクトリ名から始まった場合、基準 URL と同階層が指定されたことになります。ディレクトリ名を / でつなげていくことで、より下層へと下がっていくことができます。

もし、階層をひとつ上に上がりたい場合は ../ でパスをはじめれば、1 つ上の階層が指定できます。2 つ上層なら、../../ という形で、../ を記述するごとに、階層を 1 つ上がっていくことができます。

一方でパス絶対 URL はパスの表記を / から始めます。

パス相対 URL の場合、常に基準 URL から「2 つ上の階層の......」というように相対的な位置関係を考えなければなりませんが、これは基準 URL から参照したいリソースの階層が離れていったり、ディレクトリ構成が複雑だとわかりにくくなる場合もあります。また、基準 URL となるファイルだけを別の階層に移動した場合など、パスをすべて修正しなければならなくなるといった不便もあります。

パス絶対 URL であれば、このような基準 URL となるファイルだけを移動した場合でも、参照するリソースの場所が変わらなければ修正は不要です。パス相対 URL で使用したディレクトリ構成を使用して例を挙げてみましょう。

<!-- index.html、base.html、あるいは example.html のどこからでも sample.02.jpg は下記のように指定できます -->
<img src="/subdir/img/sample02.jpg" alt="" />

ただし、パス絶対 URL にも注意しなければならないことがあります。

例えはこの例のディレクトリ構成を、そのまま丸ごと test というディレクトリ配下に移動して全体的にひとつ階層を深くしたとします。すると、先ほどのパスの記述を下記のように修正しないと、正しく参照できません。

<img src="/test/subdir/img/sample02.jpg" alt="" />

つまり、ウェブページ一式が、何らかの理由であとで別の階層に移動されることが想定される場合、例えば開発中は https://www.example.com/development/ という URL で作業が行われ、公開する際の URL は https://www.example.com/production/ に変更される、といった場合であれば、パス相対 URL で記述しておいた方がよい可能性があります。

一方でヘッダやフッタなど、ウェブサイト全体で共通して使われる一部分を別パーツ化しておいて、全ページで読み込む場合など、どの階層のウェブページでパーツが読み込まれても正しいパスを参照できるようにしたいならパス絶対 URL での記述が適しているかもしれません。

その時々、ウェブサイトの要件などにあわせて、適切な記述の仕方を選択できるようにしておきましょう。