ZeroPlus Media > Web制作 > HTML/CSS > 相対パスと絶対パスの違いと書き方を学ぼう

相対パスと絶対パスの違いと書き方を学ぼう

HTML/CSS

2022/07/23

2022/07/23

Webサイト制作やプログラミング初学者の方は「画像やファイルが読み込めない」経験を必ずします。

そのような場合、パスの記述の仕方にミスがあることが多いです。

この記事では、HTML,CSSで画像やファイルの読み込みにも記述する「パス」について説明していきます。

「絶対パス,相対パス」の違いを身につけ、Webサイト制作の学習に活かしましょう。

パス について学ぼう

まずは「パス」に対する理解を深めましょう。

この章では「パスとは何か」「パスの使い方」について図を使って解説します。

パス とは

パス とは、読み込みたいファイルまでの道のりのことです。

道筋や経路の意味を持つ「Path」という英単語をイメージするとわかりやすいです。

Webサイトを制作する際に、画像やその他のファイルを読み込む場面が多々あります。その際に、コンピューターに対して、読み込みたいファイルがどこにあるかを教えてあげる必要があります。

Webサイトを制作する際に、上記のような記述を見かけたことがあるかと思います。
これらの部分のコードのことを「パス」と言います。

/(スラッシュ)」は「~の中にある」というように訳すとわかりやすくなります。

なので、上記の例を日本語に訳すと、
imgフォルダの中にあるsample.pngを読み込む」というようになります。

パス の使い方とは

次に、パスがどのように使われているのか確認していきます。

他のファイルの読み込み

他のファイルを読み込むときに、パスを利用する機会が多くあります。

HTMLにスタイルを追加する「cssファイル」や、Webサイトに表示する「画像ファイル」などのファイルを読み込む際に記述します。

リンク先の指定

次に多く記述するものとして、リンク先の指定を記述するパターンです。

サイト内のページにアクセスするリンク」や、「外部のサイトへ移動するためのリンク」を指定する際に記述します。

パスの使い方として、上記の2パターンで記述することがほとんどです。

相対パスについて学ぶ

パスのイメージが膨らんだところで、パスの指定の方法を学んでいきましょう。

まずは「相対パス」という記述の方法について説明していきます。

Webサイト制作を行う際に基本的に使っていくパスの記述の方法なので、相対パスは必ずマスターしましょう。

相対パスの使い方

相対パスは、「読み込むファイル」をスタート地点とし、「読み込みたいファイル」までの道のりを記述する方法です。

相対パスの大事な考え方として

  • ファイルの階層構造を確認する
  • 「どこのファイルで読み込むのか」「何を読み込みたいのか考える」考える
  • パスを記述する

    この流れでパスを記述していきましょう。

    それでは、実際に例を見ていきましょう。

    相対パスの例1

    この例では、画像ファイルを読み込む際のパスについて説明します。

    <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」

    相対パスの例2

    次の例では、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」

    ここまでで、相対パスの書き方に慣れてきた頃合いかと思います。

    次は、少し変わった相対パスの指定の例を見ていきましょう。

    相対パスの例3

    次の例では、cssファイルから、背景画像を読み込む際のパスについて説明します。

    background-image: url(../img/sample.png);

    cssファイルから背景画像を読み込むときは、「background-imageプロパティの値」に読み込みたい背景画像までのパスを記述します。

    それでは、実際にパスを記述する考え方を確認していきます。

    ファイルの階層構造を確認する

    まずは、「ファイルの階層構造」を確認します。ファイルの階層構造は画像の通りです。

    「どこのファイルで読み込むのか」「何を読み込みたいのか考える」を考える

    今回の例では、「style.css」に「sample.png」を読み込みます。

    パスを記述する

    今回の例では先ほどまでの例とは異なり、「style.css」をスタート地点とし「sample.png」までの道のりを記述します。

    しかし、この例では「imgフォルダ」は1つ前の階層にあります。
    なので、「style.css」から「imgフォルダ」までにたどり着くためには、階層を1つ戻る必要があります。

    「style.css」から1つ前の階層の「imgフォルダの中にあるsample.png」までのパスを記述すると以下のようになります。

    「../img/sample.png」

    パスを記述する際に、1つ前の階層に戻るためには「../」という書き方をします。
    ../」は「1つ前の階層の」と日本語で訳すとわかりやすくなります。

    なので、今回のパスは、「style.cssから、1つ前の階層のimgフォルダの中にあるsample.pngを読み込む」と訳すことができます。

    絶対パスについて学ぶ

    相対パスが記述できるようになったところで、もう1つの「絶対パス」という記述の方法についても学んでいきましょう。

    絶対パスの使い方

    絶対パスは、ファイルの場所関係なく「スタート地点」から「読み込みたいファイル」までの道のりを全て記述する方法です。

    絶対パスは、サーバー上にアップロードされたファイルを読み込む際に記述されます。

    なので、外部のサイトのリンクの指定は絶対パスで記述されます。

    絶対パスの例

    この例では、外部サイトのリンクの指定について説明します。

    今回は、外部のページである「ZeroPlusの公式サイトのリンク」を指定しています。

    <a href="https://zero-plus.io/">

    htmlファイルにリンクを指定するときは、aタグの「href属性」に移動したいページまでのパスを記述することでリンクを指定できます。

    次に、「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〜」から始まります。

    このように、ファイルの場所関係なく「スタート地点」から「読み込みたいファイル」までの道のりを全て記述する方法を「絶対パス」といいます。

    パスをマスターしよう! 

    今回は、読み込むファイルの指定を行うために、パスの考え方とその例を学びました。

    • パスとは何か
    • 相対パスでの指定の方法
    • 絶対パスでの指定の方法

    以上3つが確認できていれば大丈夫です!

    Webサイト制作を行うにあたり、パスを必ず記述することになります。
    ファイルがうまく読み込めない場面に出会ったらパスについて復習してみてください!

    ZeroPlus Media読者限定! 無料質問対応!

    毎月、先着20名限定で現役エンジニアによる質問対応を行なっています。

    以下の手順に沿って質問対応を行うことができます。

    1. 下記リストから質問日時を選択
    2. メールを受け取る
    3. メールからmtgに参加

    ※質問日程が合わない場合はZeroPlus Media管理者のTwitterアカウントのDMまでご連絡ください。

    \ 学んだことをSNSでシェアしよう /

    おすすめのタグ

    この記事を書いた人

    ZeroPlusMedia変種部

    ZeroPlusMedia編集部

    ZeroPlusは、「フリーランス特化型プログラミングスクール」です。ZeroPlusMediaでは、フリーランスとして活躍する際に役立つ有益なプログラミングやWeb制作に関する情報を発信しています。

    質問について

    ZeroPlus Media読者限定で質問対応をおこなっています。以下の2つの方法で質問を受け付けています。

    選べる2つの質問方法

    1

    Google Foam(テキスト)で質問

    フォーム送信

    メールで解答

    formで質問
    2

    Google meet(オンラインmtg)で質問

    日時選択

    メールを受け取る

    メールからmtgに参加

    meetで質問
    ZeroPlus Gateバナー

    あなたの目的に合わせた2つのサービス

    あなたの目的に合わせたZeroPlusの2つのサービス
    基礎からフリーランスレベルまで本質的な学びを提供しています

    完全無料!30日間で学びきれる
    プログラミンスクールZeroPlus Gate

    • お金をかけずに、学習を進めたい
    • Webサイトを作れるようになりたい
    • メンターや講師に質問しながら学習したい

    詳しくはこちらから

    フリーランス特化型
    プログラミングスクール ZeroPlus

    • プログラミング学習で悩んでいる
    • 仲間と一緒に学習したい
    • フリーランスとしての総合的な力を養いたい

    詳しくはこちらから