画像やファイルがうまく読み込めない場合、パスの記述の仕方にミスがあることが多いです。
この記事では、HTML,CSSで画像やファイルの読み込みに記述する「パス」について説明します。
- パスの役割
- 絶対パス・相対パスの指定方法
プログラミング学習でこのような経験はありませんか？
- 目標に向けて何を学べば良いかわからない
- 調べても解決策が見つからない
- 現場レベルのスキルが身につくのか不安
これらの悩みは、学習環境を整えることで全て解決することができます。
ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。
- なんでも相談できる専属メンター
- いつでも技術相談ができるプロ講師
- 元IT企業CTO監修のカリキュラム
条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。
少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。
目次
パスとは：読み込みたいファイルまでの道のり
パス とは、読み込みたいファイルまでの道のりのことです。
道筋や経路の意味を持つ「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を読み込む」と訳すことができます。
絶対パスの指定のやり方
「絶対パス」という記述の方法についても見ていきましょう。
絶対パスの使い方
絶対パスは、ファイルの場所関係なく「スタート地点」から「読み込みたいファイル」までの道のりを全て記述する方法です。
ほとんどの場合、絶対パスはインターネット上のサイトやファイルなどを読み込む際に使用するため、URLをそのままコピー＆ペーストすればOKです。
絶対パスの例
インターネット上にある外部のページ、「ZeroPlusの公式サイト」へのリンクを作ってみましょう。
<a href="https://zero-plus.io/">
htmlファイルにリンクを指定するときは、aタグの「href属性」に移動したいページのURLを記述することでリンクを指定できます。URLはどのファイル上で記述したとしてもインターネット上で対象のファイルの位置を示してくれるため、絶対パスとして使用することができます。
まとめ：相対パスと絶対パスの違いを理解しよう
今回は、読み込むファイルの指定を行うために、パスの考え方とその例を学びました。
- パスとは：読み込みたいファイルまでの道のり
- 相対パスとは：「読み込むファイル」をスタート地点とし、「読み込みたいファイル」までの道のりを記述する方法
- 絶対パスとは：ファイルの場所関係なく「スタート地点」から「読み込みたいファイル」までの道のりを全て記述する方法
以上３つが確認できていれば大丈夫です！
Webサイト制作ではパスを必ず記述することになります。
ファイルがうまく読み込めない場面に出会ったらパスについて復習してみてください！
プログラミング学習でこのような経験はありませんか？
- 目標に向けて何を学べば良いかわからない
- 調べても解決策が見つからない
- 現場レベルのスキルが身につくのか不安
これらの悩みは、学習環境を整えることで全て解決することができます。
ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。
- なんでも相談できる専属メンター
- いつでも技術相談ができるプロ講師
- 元IT企業CTO監修のカリキュラム
条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。
少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。
