Lancersで現役エンジニアに相談してみよう!

【CSS】相対パスで「上の階層」を指定する方法

CSSファイルより上の階層にあるファイルを相対パスで指定したいんだけど、書き方が分からん・・・

↑↑この記事では、こんな疑問に答えます。

【CSS】相対パスで「上の階層」を指定する方法

css 相対パス 上の階層

例えば、上記の画像のようなディレクトリ構成で、style.css内に記述するコードから「main.jpg」を指定したいなら、このように書きます。

../img/main.jpg

さらに具体的に書くと、こんな感じ↓↓

.body{
  background-image: url(../img/main.jpg);
  width: 100%;
  height: 300px;
}

bodyの背景画像に「main.jpg」を指定してます(widthとheightは適当)。

上の階層を指定するには「..」が必要なんですね。

2つ上の階層の場合の書き方

css 相対パス 上の階層

今度は「2つ上の階層」を指定してみましょう。

と言っても、書き方は非常にシンプルです^^

../../img/main.jpg

具体例は以下の通り↓↓

.body{
  background-image: url(../../img/main.jpg);
  width: 100%;
  height: 300px;
}

「../」が増えただけですね。

さらに上の階層を指定する場合も同じ考え方でOKです。

絶対パス・相対パス・ルートパスについておさらい

css 相対パス 上の階層

上の階層を相対パスで指定する方法がわかったところで、「絶対パス」「相対パス」「ルートパス」それぞれの基本・書き方をおさらいしましょう^^

絶対パスとは

「http(s)://〇〇.com~」のようなパス指定方法です。分かりやすいですね。

先ほどの例でいうと、こんな感じ↓↓

.body{
  body: url(https://pegaro.site/〇〇/〇〇.jpg);
  width: 100%;
  height: 300px;
}

その画像がネット上(サーバー)にアップロードされていないと使えない点に注意。

相対パスとは

これは説明の必要はないですね^^

.body{
  background-image: url(../img/main.jpg);
  width: 100%;
  height: 300px;
}

「起点となるファイル→パスを通したいファイルまでの流れ」イメージして書けばOK。

ルートパスとは

相対パスと似ていますが、「起点となるファイル=常にTOPページで固定」という書き方になります。

.body{
  body: url(/img/main.jpg);
  width: 100%;
  height: 300px;
}

TOPページは「/」で表されるので、ルートパスで記述する際は常に「/」から始まるということですね。

まとめ:サイト制作なら「相対パス」がおすすめ

css 相対パス 上の階層

個人的な意見ですが、サイト制作をする際は「相対パス」で記述することをおすすめします。

「絶対パス」はサーバー上にファイルをアップロードしないと使えないですし、「ルートパス」は常に「/」から始まるため、分かりにくくて長いコードになりがちだからです。

初心者のうちは特に気にしなくても良いですが、少しだけ心に留めておいてください^^