絶対URLと相対URL
絶対パスと相対パスの違いを理解します。
「絶対URLと相対URL」はCoddyKit上の無料HTML Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはHTML Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 HTML Academyコースには全4レッスンが含まれています。
URLとは
URL（Uniform Resource Locator）とは、Web上のリソースの完全なアドレスです。
URLには次の部分があります。
https://example.com:443/products/widget?color=red#reviews
│ │ │ │ │ │
│ │ │ │ │ └─ Fragment
│ │ │ │ └─ Query string
│ │ │ └─ Path
│ │ └─ Port
│ └─ Domain
└─ Protocol絶対URL
絶対URLには、プロトコル、ドメイン、パスを含む完全なアドレスが指定されます。
<a href="https://example.com/about">About</a>
<img src="https://cdn.example.com/logo.png" alt="Logo">
<!-- Absolute URLs work from anywhere -->
<!-- Use for: external sites, CDN resources, canonical tags -->相対URL
相対URLは現在のページの場所を基準とするため、プロトコルやドメインを指定する必要がありません。
<!-- Current page: https://example.com/blog/post.html -->
<a href="other-post.html">Same folder</a>
<!-- → https://example.com/blog/other-post.html -->
<a href="../products">Parent folder</a>
<!-- → https://example.com/products -->
<a href="/contact">Root relative</a>
<!-- → https://example.com/contact -->相対URLの3つの種類
相対URLには3つの形式があります。
<!-- 1. Relative to current file's folder -->
<a href="page.html">Same directory</a>
<!-- 2. Root-relative: starts with / (relative to domain root) -->
<a href="/about">Root-relative</a>
<!-- 3. Protocol-relative: starts with // -->
<img src="//cdn.example.com/img.png" alt="">../で移動する方法
../を使用すると、1つ上のディレクトリ階層に移動できます。
<!-- File structure:
/
├── index.html
├── about.html
└── blog/
├── post1.html
└── post2.html
-->
<!-- In blog/post1.html: -->
<a href="post2.html">Post 2</a> <!-- same folder -->
<a href="../">Home</a> <!-- up one level -->
<a href="../about.html">About</a> <!-- up then file -->絶対URLと相対URLの使い分け
ガイドライン：
- 外部リソース — 常に絶対URL：
https://... - CDNリソース — 絶対URLまたはプロトコル相対URL
- 内部ナビゲーション — ルート相対（
/page）が最も安全 - 同じディレクトリ — 相対URL（
page.html）が便利
ルート相対URLは移植性が高い
ルート相対URL（/path）は、ページを移動してもそのまま使用できます。
<!-- If this page moves from /blog/post.html to /articles/post.html -->
<!-- Root-relative STILL works: -->
<a href="/contact">Contact</a> <!-- always → example.com/contact -->
<!-- Relative MAY break: -->
<a href="../contact.html">Contact</a> <!-- different result in new location -->base要素
<head>内の<base>要素を使用すると、すべての相対リンクの基準URLを設定できます。
<head>
<base href="https://example.com/docs/">
</head>
<body>
<!-- This resolves to: https://example.com/docs/guide.html -->
<a href="guide.html">Guide</a>
</body>URLエンコード
URL内の特殊文字はパーセントエンコードする必要があります。
<!-- Space in URL path -->
<a href="/pages/my%20page.html">My Page</a>
<!-- Query string with special characters -->
<a href="/search?q=HTML%20%26%20CSS">Search HTML & CSS</a>
<!-- Common encodings:
space → %20
& → %26
= → %3D
# → %23
-->正規URL
1つのページに複数のURLからアクセスできる場合は、canonicalタグを使用して優先するURLを宣言します。
<head>
<!-- Prevents duplicate content SEO penalty -->
<link rel="canonical" href="https://example.com/blog/post">
</head>
<!-- Both /blog/post and /blog/post.html may serve the same content -->
<!-- Canonical tells Google which URL to index -->URLのベストプラクティス
次のURL規則に従ってください。
- 小文字だけを使用する
- 単語の区切りにはアンダースコアではなくハイフンを使用する
- URLは短く、内容が分かるものにする
- 特殊文字は避け、エンコードする
- 内部リンクにはルート相対URLを使用する
確認問題
/blog/post.htmlにあるファイルから/about.htmlへリンクしたいとします。最も安全な相対URLはどれですか。
まとめ：絶対URLと相対URL
URLの種類のまとめ：
- 絶対URL — プロトコルとドメインを含む完全なURL
- ルート相対URL —
/で始まり、ドメインルートを基準とするURL - 相対URL — 現在のファイルの場所を基準とするURL
../— 1つ上のディレクトリ階層に移動する<base href>— すべての相対URLの基準を設定する
よくある質問
「絶対URLと相対URL」レッスンは無料ですか？
はい。「絶対URLと相対URL」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、HTML Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 HTML Academyコースには全4レッスンが含まれています。
「絶対URLと相対URL」で何を学びますか？
絶対パスと相対パスの違いを理解します。 ブラウザで直接実行するハンズオンコードでHTML Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
HTML Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのHTML Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。
「絶対URLと相対URL」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このHTML Academyレッスンでコードを書いて実行できますか？
はい。すべてのHTML Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。