画像やファイルがうまく読み込めない場合、パスの記述の仕方にミスがあることが多いです。
この記事では、HTML,CSSで画像やファイルの読み込みに記述する「パス」について説明します。
- パスの役割
- 絶対パス・相対パスの指定方法
目次
パスとは：読み込みたいファイルまでの道のり
パス とは、読み込みたいファイルまでの道のりのことです。
道筋や経路の意味を持つ「Path」という英単語が由来となっています。
画像やその他のファイルを読み込んでブラウザ上に表示させるときには、コンピューターに対して、読み込みたいファイルがどこにあるかを教えてあげる必要があります。
「/（スラッシュ）」は「~の中にある」というように訳すとわかりやすいです。
上記のパスを日本語に訳してみると、
「imgフォルダの中にあるsample.pngを読み込む」というようになります。
パスの使いどころ
ファイルの読み込み
パスは、画像をはじめとしたあらゆるファイルを読み込む際に使用します。
HTMLにスタイルを追加する「cssファイル」、動きを追加する「jsファイル」などもパスを使って読み込みます。
リンク先の指定
- サイト内のページにアクセスするリンク
- 外部のサイトへ移動するためのリンク
など、リンク先を指定する際にもパスを使用します。
パスの種類
パスの指定の方法は「相対パス」と「絶対パス」の2種類があります。
相対パスは、「読み込むファイル」をスタート地点とし、「読み込みたいファイル」までの道のりを記述する方法です。
絶対パスは、ファイルの場所関係なく「スタート地点」から「読み込みたいファイル」までの道のりを全て記述する方法です。
相対パスの例
これらの例は、パスを記述するファイルを起点にして、 読み込みたいファイルまでの道のりを指定しているため、相対パスでの指定となっています。
絶対パスの例
インターネット上にある外部のサイトやファイルなどを参照する場合は、絶対パスとしてURLを記載します。URLはどのファイル上で記述しても変わることがありません。
相対パスの指定のやり方
まずは「相対パス」の記述方法について説明していきます。
相対パスの使い方
相対パスは、「読み込むファイル」をスタート地点とし、「読み込みたいファイル」までの道のりを記述する方法です。
相対パスを記述する際には、
- ファイルの階層構造を確認する
- 「どこのファイルで読み込むのか」「何を読み込みたいのか」確認する
- パスを記述する
というステップがあります。
それでは、実際に例を見ていきましょう。
相対パスの例１
この例では、画像ファイルを読み込む際のパスについて説明します。
<img src="img/sample.png">htmlファイルに画像を読み込むときは、imgタグの「src属性」に読み込みたい画像ファイルまでのパスを記述することで画像を読み込みます。
ファイルの階層構造を確認する
まずは、「ファイルの階層構造」を確認します。ファイルの階層構造は画像の通りです。
「どこのファイルで読み込むのか」「何を読み込みたいのか」確認する
次に、「どこのファイルで読み込むのか」「何を読み込みたいのか」を考えましょう。
今回の例では、「index.html」に「sample.png」を読み込みます。
パスを記述する
ここまでの確認が済んだら、「index.html」をスタート地点とし、「sample.png」までのパスを記述していきます。
相対パスを記述する際に使用する記号を、表にまとめました。
| 記号 | 意味 |
| / | 一つ下の階層 |
| ./ | 同じ階層（記述を省略できます） |
| ../ | 一つ上の階層 |
| ../../ | 二つ上の階層 |
紹介した記号を用いて相対パスを記述していきます。
今回、「index.html」と「imgフォルダ」は同じ階層にあります。
「index.html」から同じ階層にある「imgフォルダの中にあるsample.png」までのパスを記述すると、
img/sample.png
となります。
相対パスの例２
次の例では、cssファイルを読み込む際のパスについて説明します。
<link rel="stylesheet" href="css/style.css">htmlファイルにスタイルを読み込むときは、linkタグの「href属性」に読み込みたいcssファイルまでのパスを記述することでスタイルを読み込みます。
ファイルの階層構造を確認する
まずは、「ファイルの階層構造」を確認します。ファイルの階層構造は先ほどの画像の通りです。
「どこのファイルで読み込むのか」「何を読み込みたいのか」確認する
今回の例では、「index.html」に「style.css」を読み込みます。
パスを記述する
それでは、「index.html」をスタート地点とし「style.css」までの道のりを記述してみましょう。
今回の例でも、「index.html」と「cssフォルダ」は同じ階層にあります。
「index.html」から同じ階層にある「cssフォルダの中にあるstyle.css」までのパスを記述すると、
css/style.css
となります。
相対パスの例３
次に、少し変わった相対パスの指定の例を見ていきましょう。
次の例では、cssファイルから、背景画像を読み込む際のパスについて説明します。
background-image: url(../img/sample.png);cssファイルから背景画像を読み込むときは、「background-imageプロパティの値」に読み込みたい背景画像までのパスを記述します。
ファイルの階層構造を確認する
まずは、「ファイルの階層構造」を確認します。ファイルの階層構造は画像の通りです。
「どこのファイルで読み込むのか」「何を読み込みたいのか」確認する
今回の例では、「style.css」に「sample.png」を読み込みます。
パスを記述する
今回の例では先ほどまでの例とは異なり、「style.css」をスタート地点とし「sample.png」までの道のりを記述します。
しかし、この例では「imgフォルダ」は１つ前の階層にあります。
なので、「style.css」から「imgフォルダ」までにたどり着くためには、階層を１つ戻る必要があります。
パスを記述する際に、１つ前の階層に戻るためには「../」を使います。
「style.css」から１つ前の階層の「imgフォルダの中にあるsample.png」までのパスを記述すると
「../img/sample.png」
となります。
「../」は、日本語で「１つ前の階層の」と訳すとわかりやすいです。
今回のパスは、「style.cssから、１つ前の階層のimgフォルダの中にあるsample.pngを読み込む」と訳すことができます。
絶対パスについて学ぶ
相対パスが記述できるようになったところで、もう１つの「絶対パス」という記述の方法についても学んでいきましょう。
絶対パスの使い方
絶対パスは、ファイルの場所関係なく「スタート地点」から「読み込みたいファイル」までの道のりを全て記述する方法です。
絶対パスは、サーバー上にアップロードされているファイルを読み込む際に記述されます。
基本的に、外部のサイトのリンクの指定は絶対パスで記述されます。
絶対パスの例
この例では、外部サイトのリンクの指定について説明します。
今回は、外部のページである「ZeroPlusの公式サイトのリンク」を指定しています。
<a href="https://zero-plus.io/">htmlファイルにリンクを指定するときは、aタグの「href属性」に移動したいページまでのパスを記述することでリンクを指定できます。
リンクさせたい場所のURLをそのまま貼れば問題ありません。
絶対パスの階層構造
実は、絶対パスの書き方の中にも、「/ (スラッシュ)」を使用した階層指定を確認することができます。
「ZeroPlusの公式サイトの中にある、お役立ち情報の記事のリンク」を指定してみましょう。
<a href="https://zero-plus.io/column/zeroplus-commitment/">スタート地点が全て「https://zero-plus.io/」となっていることに注目してみましょう。
ページのURLを見ると一目瞭然ですが、記事のページまでの道のりが全て記述されています。
ZeroPlusのサーバー上のファイルは「zero-plus.io」がスタート地点となっており、その中にある「colum」というフォルダの中にお役立ち情報のページが存在していることがわかりました。
ZeroPlusの他のどのページにアクセスしたとしても、URLは「https://zero-plus.io〜」から始まります。
このように、ファイルの場所関係なく「あるスタート地点」から「読み込みたいファイル」までの道のりを全て記述する方法を「絶対パス」といいます。
まとめ：相対パスと絶対パスの違いを理解しよう
今回は、読み込むファイルの指定を行うために、パスの考え方とその例を学びました。
- パスとは：読み込みたいファイルまでの道のり
- 相対パスとは：「読み込むファイル」をスタート地点とし、「読み込みたいファイル」までの道のりを記述する方法
- 絶対パスとは：ファイルの場所関係なく「スタート地点」から「読み込みたいファイル」までの道のりを全て記述する方法
以上３つが確認できていれば大丈夫です！
Webサイト制作ではパスを必ず記述することになります。
ファイルがうまく読み込めない場面に出会ったらパスについて復習してみてください！
