中嶋悟
名前：中嶋 悟（なかじま さとる） ニックネーム：サトルン 年齢：28歳 性別：男性 職業：会社員（IT系メーカー・マーケティング部門） 通勤場所：東京都千代田区・本社オフィス 通勤時間：片道約45分（電車＋徒歩） 居住地：東京都杉並区・阿佐ヶ谷の1LDKマンション 出身地：神奈川県横浜市 身長：175cm 血液型：A型 誕生日：1997年5月12日 趣味：比較記事を書くこと、カメラ散歩、ガジェット収集、カフェ巡り、映画鑑賞（特に洋画）、料理（最近はスパイスカレー作りにハマり中） 性格：分析好き・好奇心旺盛・マイペース・几帳面だけど時々おおざっぱ・物事をとことん調べたくなるタイプ 1日（平日）のタイムスケジュール 6:30 起床。まずはコーヒーを淹れながらニュースとSNSチェック 7:00 朝食（自作のオートミールorトースト）、ブログの下書きや記事ネタ整理 8:00 出勤準備 8:30 電車で通勤（この間にポッドキャストやオーディオブックでインプット） 9:15 出社。午前は資料作成やメール返信 12:00 ランチはオフィス近くの定食屋かカフェ 13:00 午後は会議やマーケティング企画立案、データ分析 18:00 退社 19:00 帰宅途中にスーパー寄って買い物 19:30 夕食＆YouTubeやNetflixでリラックスタイム 21:00 ブログ執筆や写真編集、次の記事の構成作成 23:00 読書（比較記事のネタ探しも兼ねる） 23:45 就寝準備 24:00 就寝
ルートパスと相対パスの違いを徹底解説：初心者にも伝わる使い分けのコツ
このテーマを理解するうえで大切なのはパスとはファイルやリソースの場所を表す道しるべだという点です。ルートパスと相対パスは同じ目的を果たしますが、基準となる起点が異なります。
ルートパスはサイトの根本を起点にします。例えば /images/logo.png という表記は、あなたのサイトのルートディレクトリを起点にした道順です。
一方で 相対パス は現在のファイルの位置を起点にします。 pages/about/index.html から見れば ../images/logo.png のように書き、同じ階層構造なら images/logo.png という短い形にもなります。
ここが根本的な違いです。
この2つはHTML のリンクや画像の読み込み、CSS ファイルの読み込みなど、日常的な場面で頻繁に使われます。ルートパスを使うと「どのページからでも一貫して特定の資産を参照できる」という利点があり、相対パスを使うと「現在のファイルの位置関係を保ったまま資産を参照できる」という利点があります。
ただし現実にはサイトの構成や移動計画、公開ディレクトリの配置によって選択が変わるため、慣れるまでは混乱しがちです。初心者の方には、まず自分のサイトの根本と現在のファイル構成を紙に書き出して、いちど ルートパス と 相対パス の実例を手で追ってみることをおすすめします。
次に具体例を見て理解を深めましょう。HTML の a タグや img タグ、link タグなどではパスの使い方がそのままページの見た目と挙動を変えます。例えば現在のページが /blog/2025/update.html のとき、画像を読み込む場合に /images/header.png と書けばサイトのどこからでも同じ画像を表示できます。これが ルートパス の力です。
一方で「同じブログ内のフォルダ階層から参照したい」場合には images/header.png や ../assets/css/style.css のような 相対パス が自然です。サイトを新しく作るときには、まず「どの資源をどの場所から参照するのが最も安定して動くのか」を想定しておくと、後の修正が楽になります。
ただし base href が設定されている場合には相対パスの解釈の基準が変わる点に注意が必要です。
使い分けのコツと実践的ポイント
ルートパスと相対パスを使い分けるコツは、資産の性質とサイトの運用方針を組み合わせて考えることです。まず大前提として、サイト全体で一貫して参照したい資産はルートパスを使うのが安全です。たとえばサイト共通のロゴ画像や共通スタイルシート、JavaScript ファイルなど、どのページから開いても同じ場所を指してほしい資産にはルートパスが適しています。これにより、ページの深さが変わっても参照先がずれにくくなります。次に、現在のファイル位置に強く依存する資産、あるいは「同じディレクトリ内で完結するリンクや画像」には相対パスを使うのが自然です。特にローカルでの開発やサブディレクトリごとにファイルをまとめる場合、相対パスの方が構造の移動に強く、修正の手間を減らせます。
さらに、base タグ を使って基準を一箇所で決めている場合には相対パスの挙動が変わるため、設計時にその効果を必ず想定しておくことが大切です。
| 種類 | 例 | 意味と使い方のポイント |
|---|---|---|
| ルートパス | /assets/css/style.css | サイトの根本を起点に参照。サブディレクトリに移動しても同じ場所を参照できる確実さがある。 |
| 相対パス | assets/css/style.css | 現在のファイルの位置を起点に参照。移動しても関係が保たれやすいが、階層を深く追うと表現が複雑になることがある。 |
| 上位ディレクトリへ移動 | ../images/logo.png | 一段上のディレクトリへ出てから参照するなど、階層間の参照を組み立てる基本形。 |
実務ではこの3つのパターンを組み合わせ、資産の安定性と開発のしやすさの両方を満たす設計を心がけます。初学者は、まず手元のサイト構造を図にして、どの資産がどの起点から参照されるのかを可視化してみましょう。パスの設定を「この資産はどの起点から参照するべきか」という視点で整理すると、複雑なリンクの混乱を避けやすくなります。
ブラウザで実際にリンクをクリックしてみて、資産が正しく表示されるか確認することも大切です。
ねえねえ、相対パスの話を深掘りしよう。相対パスって、今いる場所を起点に資源を探す技術だよ。例えば今ノートが blog/2025/notes.html にあるとき、同じ folder の images/logo.png にアクセスするには ../../ じゃなくて images/logo.png になる場面もあれば、実は ../images/logo.png の方が合う場面もある。こうした距離感を体感すると、ディレクトリ構造の理解がぐんと進むんだ。移動しても動く設計を作るには、まず自分のサイトの根っこと現在地の関係を把握すること。相対パスは「今いる場所を起点に近い資産を探す旅路」みたいなコツを教えてくれる。
ITの人気記事
