目次
1はじめに
2パスとは
3相対パスと絶対パスについて
4相対パスと絶対パスの使い分け
5おわりに
1はじめに
なぜこの記事を書いているかというと、模写コーデイングをした時にCSSファイルの読み込みができず、解決するまでに5時間ほどかかってしまい、一度知識を整理しときたいと思ったからです。また、相対パスと絶対パスについて分からない人のために記事を書きたいと思います。
2パスとは
パスとは簡単にいうと経路のことで目的のファイルがどのフォルダに保存されているかを示すものです。パスは実行しているファイルから他の場所にあるファイルを実行する場合に目的のファイルを指定するために使われます。
下記の場合だと、bootstrap-garalley.htmlファイルからgallery.cssファイルを指定したい時に『パス』を使うイメージ
3相対パスと絶対パスについて
まず、相対パスと絶対パスについてネットで調べると下記のような説明がされているかと思いますがイメージは下記の画像となります。
①絶対パス
ディレクトリの階層構造の頂点から目的のファイルまでの道筋を、全て省略せずに表記します。
②相対パス
相対パスは、現在作業しているファイルの場所から見た、目的のファイルへの行き方を表記します。
※1絶対パス bootstrap/css/gallery.css
※2相対パス css/garllery.css
4相対パスと絶対パスの使い分け
相対パスと絶対パスのどちらを使用するかはファイルの位置関係や利用目的によります。以下に同じフォルダ内と別のフォルダにある場合で場合分けしていきます。
I、同じフォルダ内の場合
相対パスを使うべき理由
- シンプルで直感的
- 同じフォルダ内であればそのままファイル名を書くことで動作します。
- ローカル環境とサーバー環境のどちらでも問題なく機能する。
/project
├── index.html
└── style.css
<link rel="stylesheet" href="./style.css">
※./は省略可 ./は同じ階層を意味する
絶対パスを使うべき場面
*一般的に同じフォルダ内では絶対パスを使用しない。
ただし、サーバールートからの完全なパスを記載する必要がある場合は例外です。
II、別のフォルダにある場合
ケースA サブフォルダにある場合
相対パスを使うべき理由
- ファイルの位置を基準に分かりやすく書ける
- サーバーやローカル環境を問わず動作する。
/project
├── index.html
└── css
└── style.css
<link rel="stylesheet" href="css/styles.css">
絶対パスを使うべき場面
- サーバー環境で、ルートディレクトリから一貫してパスを記述する場合
- 絶対パスにすることでどのHTMLファイルからも同じパスでアクセス可能
/project
├── index.html
└── assets
└── css
└── style.css
<link rel="stylesheet" href="/assets/css/style.css">
ケースB:上位ファルダにある場合
相対パスを使うべき理由
- フォルダ階層を遡るパスを記述可能
- HTMLからCSSまでの距離が短くファイルの位置関係がはっきりしている場合は相対パスが適している
/project
├── css
│ └── index.html
└── style.css
<link rel="stylesheet" href="../style.css">
絶対パスを使うべき場面
- サーバー環境でプロジェクト全体を通じて統一的にルートからのパスを使用する場合
<link rel="stylesheet" href="/project/style.css">
5おわりに
いかがだったでしょうか？パスの理解はプログラミングを勉強していく上では避けては通れないのでこの機会にマスターしておきましょう。