HTMLでリンクや画像を使うとき、ファイルの場所を指定しますよね。あれってどういう仕組みなんですか？
それは「パス」と呼ばれる仕組みで、コンピューターやWeb上でファイルの場所を示す「道筋」のようなものなんだ。
道筋？住所みたいなものですか？
まさにその通り！住所が家の場所を示すように、パスはファイルの場所を示すんだ。今日はこのパスの仕組みと、URLの構造について詳しく学んでいこう。
パスとは？- デジタル世界の住所
パスは、コンピューターやWeb上でファイルやフォルダーの場所を指定するための「住所」のような仕組みです。
パスを理解することで、以下のことができるようになります：
- 正確なファイル参照 他のHTMLファイルや画像ファイルを確実に呼び出せる
- サイト構造の設計 整理されたフォルダー構成でファイルを管理できる
- リンク切れの防止 ファイルの場所が変わっても適切に対応できる
- 効率的な開発 チーム開発でも一貫したファイル参照ができる
パスの種類
パスには大きく分けて「相対パス」「ルートパス」「絶対パス」の3種類があります。それぞれの特徴を見てみましょう。
相対パス - 現在の位置を基準とした道筋
相対パスは、現在のファイルの位置を基準としてファイルの場所を指定する方法です。
相対パスの書き方
contact.html
../img/logo.png
pages/about.html → my-website/img/logo.png
../index.html
相対パスの具体例
pages/about.htmlから他のファイルを参照する実際のHTMLコード例を見てみましょう：
<!-- pages/about.html の中身 -->
<!DOCTYPE html>
<html>
<head>
<title>私について</title>
</head>
<body>
<!-- 同じフォルダーのファイル -->
<a href="contact.html">お問い合わせ</a>
<!-- サブフォルダー内のファイル -->
<img src="../img/logo.png" alt="ロゴ">
<!-- 親フォルダー（ルート）のファイル -->
<a href="../index.html">ホーム</a>
</body>
</html>相対パスの特徴
- 移植性が高い サイト全体を別の場所に移動しても動作する
- 簡潔な記述 ドメイン名などを書く必要がない
- ローカル開発に適している 自分のパソコンでテストしやすい
- 階層構造に依存（注意） ファイルの位置関係が変わると修正が必要
ルートパス - サイトのルートからの指定
ルートパスは、Webサイトのルート（最上位）からの位置でファイルを指定する方法です。/（スラッシュ）で始まり、サイト内のどのページからでも同じ表記で同じファイルを指せる便利な方法です。
ルートパスの書き方
/
で始まる → サイトのルートからの位置
/index.html → ルートのindex.html
/pages/about.html → pagesフォルダーのabout.html
/img/logo.png → imgフォルダーのlogo.png
ルートパスの具体例
同じサイト構造で、ルートパスを使って参照する場合：
<!-- どのファイルからでも同じ書き方 -->
<!DOCTYPE html>
<html>
<head>
<title>サンプルページ</title>
</head>
<body>
<!-- ルートパス -->
<a href="/index.html">ホーム</a>
<a href="/pages/about.html">私について</a>
<!-- 画像もルートパスで指定 -->
<img src="/img/logo.png" alt="ロゴ">
</body>
</html>ルートパスの特徴
- 位置に依存しない どのファイルからでも同じ表記で参照できる
- 分かりやすい ファイルの位置が一目で分かる
- 同一サイト内専用 同じサイト内のファイルのみ参照可能
- サーバー環境が必要 ローカルでは正しく動作しない場合がある
絶対パス - 完全なURL指定
絶対パスは、プロトコルから始まる完全なURLでリソースを指定する方法です。主に外部サイトのリソースを参照する際に使用します。
絶対パスの書き方
https://
で始まる → 他のサイトのリソースも参照可能
https://example.com/about.html
https://cdn.example.com/img/logo.png
https://www.google.com
絶対パスの具体例
外部サイトのリソースを参照する実際のHTMLコード例：
<!DOCTYPE html>
<html>
<head>
<title>絶対パスの例</title>
</head>
<body>
<!-- 外部サイトへのリンク（絶対パス） -->
<a href="https://www.google.com">Google</a>
<a href="https://github.com">GitHub</a>
<!-- 外部CDNの画像やリソース -->
<img src="https://cdn.example.com/img/logo.png" alt="CDNの画像">
<!-- 外部のCSS・JavaScriptライブラリ -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
</body>
</html>絶対パスの特徴
- 完全なURL指定 プロトコルから始まる完全なURL
- 外部リソース参照 他のサイトのファイルやCDNリソースを参照可能
- インターネット接続が必要 オフラインでは動作しない
- セキュリティ考慮 外部サイトのため、安全性の確認が重要
3つのパスの使い分け
実際の開発では、用途に応じて3つのパス形式を使い分けることが重要です。
推奨される使い分け
- 相対パス ローカル開発・プロジェクト内のファイル参照に最適
- ルートパス サーバー公開時・サイト内の統一的なファイル参照に便利
- 絶対パス 外部サイト・CDNリソースの参照専用
実践的な例
以下のような場面での使い分けを見てみましょう：
<!DOCTYPE html>
<html>
<head>
<title>パスの使い分け例</title>
</head>
<body>
<nav>
<!-- 同一サイト内 → 相対パス -->
<a href="about.html">私について</a>
<a href="pages/portfolio.html">ポートフォリオ</a>
<a href="../index.html">ホーム</a>
<!-- 同一サイト内 → ルートパス -->
<a href="/index.html">ホーム（ルートパス）</a>
<a href="/pages/about.html">私について（ルートパス）</a>
<a href="/contact.html">お問い合わせ</a>
<!-- 外部サイト → 完全URL -->
<a href="https://www.github.com">GitHub</a>
<a href="https://www.twitter.com">Twitter</a>
</nav>
<main>
<!-- 同一サイト内の画像 → 相対パス -->
<img src="img/profile.jpg" alt="プロフィール画像">
<!-- 同一サイト内の画像 → ルートパス -->
<img src="/img/logo.png" alt="サイトロゴ">
<!-- 外部CDNのアイコン → 完全URL -->
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/html5/html5-original.svg" alt="HTML5アイコン">
</main>
</body>
</html>WordPressなどの動的サイトでは、ルートパスがよく使われるって本当ですか？
その通り。動的サイトはサーバー側でページを生成することが多く、テンプレートや共通リソースをどのページからでも同じ表記で参照できるルートパス（/で始まる）を使うことが一般的だよ。
ルートパスを使えばテンプレートの保守や資産管理が楽になる、ということですね？
そうだね。ただし、サブディレクトリで運用する場合や環境ごとにルートが変わると問題になることもあるから、デプロイ先の設定に合わせてベースパスを確認することが重要だよ。
URLの構造を理解する
Webサイトにアクセスする際に使用されるURLは、複数の要素から構成されています。
URLってよく見ますが、あの長い文字列にはちゃんと意味があるんですか？
そうなんだ！URLは実は複数の部品が組み合わさっていて、それぞれに重要な役割があるんだよ。詳しく見てみよう。
URLの構成要素
通信の方式を指定します。Webサイトでは主に以下を使用：
- https:// セキュアな通信（暗号化あり）- 現在の標準
- http:// 通常の通信（暗号化なし）- 徐々に廃止傾向
- ftp:// ファイル転送プロトコル
プロトコルは「どのような方法で通信するか」を決める重要な部分です。現在はセキュリティの観点から https:// が標準となっており、個人情報の入力があるサイトでは必須です。
サーバーの住所を人間が読みやすい形で表現：
www.example.com一般的なWebサイトsubdomain.example.comサブドメインを使用example.co.jp国別ドメイン
ドメイン名は、数字の羅列であるIPアドレス（例：192.168.1.1）を人間が覚えやすい名前に変換したものです。インターネット上での「住所」の役割を果たします。
サーバー内での通信窓口を指定：
- :80 HTTP通信のデフォルト（通常は省略される）
- :443 HTTPS通信のデフォルト（通常は省略される）
ポート番号は通常省略されますが、開発環境や特別な設定のサーバーでは明示的に指定することがあります。
サーバー内のファイルやリソースの場所：
- / ルートページ（通常はindex.html）
- /about.html aboutページ
- /img/logo.png imgフォルダーのlogo.png
パスは今回の学習の中心となる部分で、サーバー内のどのファイルやディレクトリを指しているかを示します。
サーバーに追加情報を送信：
- ?search=html 検索キーワードを指定
- ?page=2&limit=10 ページ番号と表示件数
- ?lang=ja 言語設定
クエリパラメータは ? で始まり、& で複数の情報を繋げることができます。動的なWebサイトでよく使用されます。
ページ内の特定の場所を指定：
- #header ページ内のheader要素へジャンプ
- #top ページの上部への移動
フラグメントは # で始まり、同一ページ内の特定の要素にスクロールする際に使用します。目次やページ内ナビゲーションで活用されます。
理解度チェッククイズ
理解度を深めるために、パスとURLに関するクイズを用意したよ。しっかり考えてみてね！
パスとURL理解度クイズ
website/
├── index.html
├── pages/
│ └── about.html ← ここから参照
└── img/
└── logo.pngまとめ
パスって最初は難しそうでしたが、住所みたいに考えるとわかりやすいですね！
そうだね！パスの概念がしっかり理解できれば、リンクや画像の設定で迷うことがなくなるよ。
相対パス、ルートパス、絶対パスの使い分けも、用途がはっきりしてよくわかりました。
次は実際にaタグを使って、学んだパスの知識でリンクを作ってみよう。きっと今日の学習が活かされるはずだよ。
- 相対パス 同一サイト内のファイル参照に使用。移植性が高く開発効率が良い
- ルートパス サイト内の統一的なファイル参照に便利。サーバー環境で威力を発揮
- 絶対パス 外部サイトやAPIエンドポイントの指定に使用。完全URLで記述
- ファイル構造の設計 階層を整理してパスを分かりやすくする
- 用途による使い分け 内部リンクは相対・ルートパス、外部リンクは完全URLを基本とする
次回は、今日学んだパスの知識を活用して、実際にaタグでリンクを作成していきます。