パス

解説
1. 学習の準備
2. パスとは
3. 相対パスとは
4. 相対パスの書き方
5. 絶対パスとは
6. 絶対パスの書き方

問題に挑戦！

進捗を変更する

このページは無料で始められるオンラインプログラミング学習サービス「DigSkill」の一般公開ページです。
この前後のページを見たい方や学習内容に興味を持たれた方は、こちらをクリックしてコース一覧をご覧ください！

解説

1. 学習の準備

(1)	VSCodeを起動し、ヘッダーメニューの「ファイル」から、「workspace_html_css」フォルダーを開いてください。
(2)	「workspace_html_css」フォルダー内の、「html_basic」フォルダー内に、「path」フォルダーを新規作成してください。
(3)	「path」フォルダー内に、「sub_folder」フォルダーと、「index.html」を新規作成してください。「index.html」に下記コードをペーストしてください。
(4)	「sub_folder」フォルダー内に、「absolute.html」、「relative.html」、「sub.html」を新規作成し、下記コードをペーストしてください。
(5)	「html_basic」>「path」フォルダー内の「index.html」ファイルをクリックで選択した状態で、フッターメニューの「Go Live」ボタンをクリックし、ブラウザで表示してください。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>パス</title>
</head>
<body>
    <h1>メインページ</h1>
    <p>
        <!-- 解説 - 相対パス1 -->
        <a href="sub_folder/relative.html">「相対パスのテスト」ページへ</a>
    </p>
    <p>
        <!-- 解説 - 絶対パス1 -->
        <a href="/html_basic/path/sub_folder/absolute.html">「絶対パスのテスト」ページへ</a>
    </p>
</body>
</html>

absolute.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>絶対パス</title>
</head>
<body>
    <h1>絶対パスのテスト</h1>
    <p>
        <!-- 解説 - 絶対パス2 -->
        <a href="/html_basic/path/sub_folder/sub.html">同一階層の「sub.html」へ</a>
    </p>
    <p>
        <!-- 解説 - 絶対パス3 -->
        <a href="/html_basic/path/index.html">上位階層の「index.html」へ</a>
    </p>
</body>
</html>

relative.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>相対パス</title>
</head>
<body>
    <h1>相対パスのテスト</h1>
    <p>
        <!-- 解説 - 相対パス2 -->
        <a href="sub.html">同一階層の「sub.html」へ</a>
    </p>
    <p>
        <!-- 解説 - 相対パス3 -->
        <a href="../index.html">上位階層の「index.html」へ</a>
    </p>
</body>
</html>

sub.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>サブページ</title>
</head>
<body>
    <h1>サブページ</h1>
</body>
</html>

前のページでは、外部サイトへのリンクの設定方法を学習しました。

このページでは、自分のサイト内のリンクの設定について学びます。自分のサイト内のリンクは、aタグのhref属性にパスを記述します。

2. パスとは

パスとは、フォルダー階層を表した文字列のことです。普段目にしているURLもパスを表しており、表示するWebページのファイルの場所を表しています。

例）html_basic/path/index.html

「html_basic」フォルダー内の、「path」フォルダー内の、「index.html」ファイルが表示されている

※アドレスバーのURLは、「http://」が省略されて表示されます。「http://」を確認するには、URLをコピー＆ペーストしてください。

パスの記述方式には、相対パスと絶対パスの2パターンがあります。

3. 相対パスとは

相対パスは自分の位置が基準となる

相対パスとは、そのファイルが配置されている場所を基準として、パスを記述する方式です。

「html_basic/path/index.html」の「解説 - 相対パス1」下のコードに注目してください。
aタグのhref属性に設定されている値が相対パスで記述したリンク先となります。

<!-- 解説 - 相対パス1 -->
<a href="sub_folder/relative.html">「相対パスのテスト」ページへ</a>

4. 相対パスの書き方

「解説 - 相対パス1」のhref属性の値を、「/（スラッシュ）」区切りで分解して解説します。

sub_folder/

(1)

「index.html」（相対パスの基準）と同一階層にある、「sub_folder」フォルダーを指定しています。

sub_folder/relative.html

(2)

「sub_folder」フォルダー内にある、「relative.html」を指定しています。

以上で「index.html」から「relative.html」へのパスを、相対パスで記述することができました。

ブラウザから 「相対パスのテスト」ページへ リンクをクリックすると、「relative.html」が表示されます。

同一階層のファイルを指定する

同一階層（同一フォルダー内）のファイルへのパスは、単にファイル名を記述します。

「html_basic/path/sub_folder/relative.html」の「解説 - 相対パス2」下のコードに注目してください。

<!-- 解説 - 相対パス2 -->
<a href="sub.html">同一階層の「sub.html」へ</a>

これで「relative.html」と同一階層の「sub.html」へアクセスすることができます。

なお、相対パスによるパスの指定では、同一階層のファイルもしくはフォルダー名の前に「./（ドット + スラッシュ）」を記述することができます。

例）「./」付きで同一階層のファイルのパスを指定

<a href="./sub.html">同一階層の「sub.html」へ</a>

※「./」の記述は省略することができます。

ブラウザから 同一階層の「sub.html」へ リンクをクリックして、「sub.html」が表示されることを確認してください。

※元のページに戻るには、ブラウザの「戻る」ボタンをクリックしてください。

このように相対パスでは、パスを記述するファイルの位置を基準に、パスを指定します。

上位階層のフォルダーを指定する「../」

「relative.html」から「path」フォルダー（上位階層のフォルダー）を指定するには、パスを「../」とします。

「html_basic/path/sub_folder/relative.html」の「解説 - 相対パス3」下のコードに注目してください。

<!-- 解説 - 相対パス3 -->
<a href="../index.html">上位階層の「index.html」へ</a>

「解説 - 相対パス3」のhref属性の値を、「/（スラッシュ）」区切りで分解して解説します。

../

(1)

「..（ドット2つ）」で「relative.html」（相対パスの基準）の上位階層のフォルダー（今回のケースでは「path」フォルダー）を示すことができます。

../index.html

(2)

「path」フォルダー内にある、「index.html」を指定しています。

以上で「relative.html」から「index.html」へのパスを、相対パスで記述することができました。

ブラウザから 上位階層の「index.html」へ リンクをクリックすると、「index.html」が表示されます。

5. 絶対パスとは

絶対パスはドキュメントルートが基準となる

相対パスでは自分の位置を基準にパスを指定しましたが、絶対パスは固定の基準となる地点からパスを指定します。
固定の基準となる地点のことを、ドキュメントルートといいます。

なお、ドキュメントルートはアプリケーションごとに異なりますが、本コースでは「workspace_html_css」フォルダーがドキュメントルートとなります。

「html_basic/path/index.html」の「解説 - 絶対パス1」下のコードに注目してください。
aタグのhref属性に設定されている値が絶対パスで記述したリンク先となります。

<!-- 解説 - 絶対パス1 -->
<a href="/html_basic/path/sub_folder/absolute.html">「絶対パスのテスト」ページへ</a>

6. 絶対パスの書き方

「解説 - 絶対パス1」のhref属性の値を解説します。

(1)

パスの先頭に「/（スラッシュ）」を記述することで、ドキュメントルート（今回のケースでは「workspace_html_css」フォルダー）を示すことができます。

/html_basic/path/sub_folder/absolute.html

(2)

ドキュメントルートから順を追って、目的のファイルである「absolute.html」までのパスを指定しています。

以上で「index.html」から「absolute.html」へのパスを、絶対パスで記述することができました。

ブラウザから 「絶対パスのテスト」ページへ リンクをクリックすると、「absolute.html」が表示されます。

続けて「html_basic/path/sub_folder/absolute.html」の各href属性の値を確認してみましょう。

<!-- 解説 - 絶対パス2 -->
<a href="/html_basic/path/sub_folder/sub.html">同一階層の「sub.html」へ</a>

<!-- 解説 - 絶対パス3 -->
<a href="/html_basic/path/index.html">上位階層の「index.html」へ</a>

絶対パスでは、どの階層のファイルでも、ドキュメントルートを基準に順を追ってパスを記述します。

Tips

基本は相対パスでパスを指定する

パスの指定は、相対パスと絶対パス、どちらの方式でも実現できますが、絶対パスはドキュメントルートから順を追ってパスを記述していくため、コードが冗長になりがちです。
特に理由がない限りは相対パスでパスを指定するのが良いでしょう。

問題

実践問題

該当ファイルを下記コードに置き換えて、各問に答えてください。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>サブページ</title>
</head>
<body>
    <h1>サブページ</h1>
    <!--
    （問1）13行目のaタグのhref属性に、「relative.html」へのパスを、相対パスで指定してください。 -->
    <p>
        <a href="">同一階層の「relative.html」へ</a>（相対パス）
    </p>

    <!--
    （問2）19行目のaタグのhref属性に、「absolute.html」へのパスを、絶対パスで指定してください。 -->
    <p>
        <a href="">同一階層の「absolute.html」へ</a>（絶対パス）
    </p>

    <!--
    （問3）26行目のaタグのhref属性に、「path」フォルダー内の「index.html」へのパスを、
    相対パスで指定してください。 -->
    <p>
        <a href="">上位階層の「index.html」へ</a>（相対パス）
    </p>

    <!--
    （問4）33行目のaタグのhref属性に、「path」フォルダー内の「index.html」へのパスを、
    絶対パスで指定してください。 -->
    <p>
        <a href="">上位階層の「index.html」へ</a>（絶対パス）
    </p>
</body>
</html>

想定結果を表示

解答

（問1）解答を表示

<p>
    <a href="relative.html">同一階層の「relative.html」へ</a>（相対パス）
</p>

（問2）解答を表示

<p>
    <a href="/html_basic/path/sub_folder/absolute.html">同一階層の「absolute.html」へ</a>（絶対パス）
</p>

（問3）解答を表示

<p>
    <a href="../index.html">上位階層の「index.html」へ</a>（相対パス）
</p>

（問4）解答を表示

<p>
    <a href="/html_basic/path/index.html">上位階層の「index.html」へ</a>（絶対パス）
</p>

ソース全文を表示

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>サブページ</title>
</head>
<body>
    <h1>サブページ</h1>
    <!--
    （問1）13行目のaタグのhref属性に、「relative.html」へのパスを、相対パスで指定してください。 -->
    <p>
        <a href="relative.html">同一階層の「relative.html」へ</a>（相対パス）
    </p>

    <!--
    （問2）19行目のaタグのhref属性に、「absolute.html」へのパスを、絶対パスで指定してください。 -->
    <p>
        <a href="/html_basic/path/sub_folder/absolute.html">同一階層の「absolute.html」へ</a>（絶対パス）
    </p>

    <!--
    （問3）26行目のaタグのhref属性に、「path」フォルダー内の「index.html」へのパスを、
    相対パスで指定してください。 -->
    <p>
        <a href="../index.html">上位階層の「index.html」へ</a>（相対パス）
    </p>

    <!--
    （問4）33行目のaタグのhref属性に、「path」フォルダー内の「index.html」へのパスを、
    絶対パスで指定してください。 -->
    <p>
        <a href="/html_basic/path/index.html">上位階層の「index.html」へ</a>（絶対パス）
    </p>
</body>
</html>