HTML 相対パスと絶対パスの違い｜リンク切れを防ぐ考え方を初心者向けに解説
生徒
「リンクを作ったのに、クリックするとページが見つからないことがあるんですが、どうしてですか？」
先生
「それは、相対パスと絶対パスの使い分けが原因かもしれませんね。」
生徒
「パスって住所みたいなものですか？」
先生
「その通りです。ページの場所をどう伝えるかで、リンクが正しく動くか決まります。」
1. パスとは何を示しているのか
HTMLで使われるパスとは、ファイルやページの場所を示す情報です。インターネット上のページや画像には置き場所があり、その道順を書いたものがパスです。現実世界で言えば、家やお店の住所にあたります。正しい住所を書かないと、目的地にたどり着けません。
2. 絶対パスの基本的な考え方
絶対パスは、最初から最後まで省略せずに書く方法です。国名から番地まで全部書いた住所のようなものです。どこから見ても同じ場所を指すため、分かりやすいのが特徴です。ただし、長くなりやすく、環境が変わると修正が必要になることもあります。
<a href="https://example.com/about.html">会社情報ページ</a>
3. 相対パスの基本的な考え方
相対パスは、今いる場所を基準にして目的地を書く方法です。学校の中で教室を説明するような感覚に近いです。近くの場所であれば短く書けるため、サイト制作ではよく使われます。ただし、基準となる場所を間違えるとリンク切れが起きやすくなります。
<a href="about.html">会社情報ページ</a>
4. フォルダ構成と相対パスの関係
相対パスは、フォルダの構造を理解していないと混乱しやすくなります。フォルダとは、書類をまとめる箱のようなものです。今いるフォルダから見て、どこに目的のファイルがあるのかを意識することが重要です。
<a href="blog/article.html">ブログ記事</a>
5. 一つ上の階層へ移動する指定
相対パスでは、今いるフォルダより一つ上に戻る指定もできます。これは、建物の別の階に戻るイメージです。この指定を使うことで、共通ページへのリンクを効率よく作れますが、使いすぎると分かりにくくなるため注意が必要です。
<a href="../index.html">トップページへ戻る</a>
6. リンク切れが起こる主な原因
リンク切れは、指定したパスが実際の場所と一致しないときに発生します。ファイル名の間違い、フォルダの移動、相対パスの基準ミスが代表的な原因です。特に初心者のうちは、相対パスの書き方で失敗しやすいため注意しましょう。
7. SEOとパス指定の関係
検索エンジンは、リンクをたどってページを巡回します。リンク切れが多いと、サイト全体の評価が下がる原因になります。安定して表示させたい重要なページには、分かりやすいパス指定を行うことがSEO対策としても大切です。
8. 初心者におすすめの考え方
最初は、どのページからでも同じ場所を指せる絶対パスを使うと混乱しにくくなります。サイト構造に慣れてきたら、相対パスを使って効率よくリンクを管理するとよいでしょう。どちらも正しく理解することが、リンク切れを防ぐ近道です。
「意味」がわかればWebは楽しい！現役エンジニアが教える、挫折しないためのHTML構造化入門
「Webの仕組み」を正しく操る。HTML5でプロフェッショナルな情報設計の第一歩を。
本講座では、単なるタグの暗記ではなく、「検索エンジンやAIに正しく伝わる情報の構造化」という本質的な技術を学びます。モダンWebの土台であるHTML5を通じて、将来的にWebデザイナーやフロントエンドエンジニアを目指すための「稼げる基礎力」を最短距離で身につけます。
具体的なワークショップ内容と環境
【つくるもの】
自己紹介やポートフォリオの土台となる「構造化されたWebページ」を作成します。見出し、段落、リスト、リンク、画像配置など、商用サイトでも必ず使われる「セマンティックなマークアップ」をゼロから体験してください。
【開発環境】
世界中のプロが愛用するVisual Studio Code (VS Code)を使用します。Emmet（高速入力機能）の設定から、HTMLの文法ミスを自動チェックする拡張機能まで、現場基準の効率的な環境を一緒に構築します。
この60分で得られる3つの武器
Googleから高く評価されるタグの選び方を理解し、検索上位を狙えるサイト構造の作り方を学びます。
プロが使うショートカットや自動補完機能を習得し、タイピングの手間を最小限にする技術を体得します。
画像への代替テキストや適切な階層構造など、誰にとっても使いやすい「優しいWeb」の作り方を伝授します。
※本講座は、将来的にWebデザイナー、コーダー、フロントエンドエンジニアを目指す未経験者のためのエントリー講座です。「モクモク」独自のマンツーマン形式により、コードを1行書くたびに生まれる疑問をその場で解決します。
現役エンジニアが教えるHTML入門
各回少人数・マンツーマン形式で徹底サポート
このセミナーの詳細・お申し込みはこちら
