パスの指定方法 0:18

絶対パスと相対パス

リンク先を指定する際や画像を表示する際は、パスというもので指定する必要があります。
パスの指定方法には 絶対パス相対パスの2種類があります。
今回は、絶対パスと相対パスの違いを学習し、最終的には狙ったファイルにパスを指定できる様になりましょう。

今回のゴール

RERUN

絶対パス 1:17

絶対パスは住所を指定するのと同様で、Web上の絶対的な場所を指定します。
Web上で絶対的な場所は URLというアドレスになります。
もし、絶対パスを使ってリンクを指定する場合は、リンク先のページをブラウザで表示し、 ブラウザのアドレスバーにあるURLをコピーすることで指定できます。

なお、絶対パスは、主に"外部のWebサイト"へのリンクに利用します。

CreatorQusetのトップページにリンクする場合
<a href="https://creatorquest.jp/">CreatorQuest</a>

相対パス 2:44

相対パスは人に道を教えるのと同様で、現在居ている場所から、目的のファイルまでの道順を指定します。
その為にはまず、どのファイルがどのフォルダ入っているのかという フォルダ構成を理解しておく必要があります。

図:フォルダ構成
相対パス用フォルダ構造

上記は、シンプルなフォルダ構成を表した図です。
相対パスは まず上記の「①」〜「③」の3パターンを理解するようにしましょう。

フォルダ構成がイメージしにくい場合は、実際にこのフォルダ構成をパソコン上に作るか、リアルの部屋に置き換えるとイメージしやすくなります。

その場合は、フォルダを"部屋"、HTMLファイルを"人"だと想定して下さい。
例えば、"html" という家があって、その家の玄関に "indexさん" と、"aさん" がいて、 "B" という部屋の中には、"bさん" がいるというような感じです。

①:同じ階層のファイルへの相対パス 5:26

図:フォルダ構成
同じ階層の相対パス

例えば、上記のフォルダ構成の「①」(「index.html」から「a.html」にリンクする場合)は、同じ階層にあるファイルへのリンクです。

これは、お互いのファイルが同じ部屋が (フォルダ)にいているので、相手の名前を呼んであげれば聞こえる位置にいます。
従って、リンク先に指定したいHTMLファイルの ファイル名を記述するだけで成立します。

(「index.html」から「a.html」にリンク)の場合
<a href="a.html">a.htmlへ</a>

②:下の階層のファイルへの相対パス 6:33

図:フォルダ構成
下の階層の相対パス

上記のフォルダ構成の「②」(「index.html」から「B」フォルダ内の「b.html」にリンクする場合)は、下の階層にあるファイルへのリンクです。

この場合は、玄関にいる "indexさん" が「b さ〜ん」と呼んでも、"bさん" は「B」という部屋の中にいるので、聞こえない位置にいます。

従って "indexさん" が、 "bさん" に会いにいく必要があります。

その為には、まず "bさん" がいてる "B" という部屋に行きます。
そして "B" という部屋の扉を開けます。
扉を空けるには、" /(スラッシュ)" と記述します。
すると部屋の中に入れるので、"bさん" を呼んであげると聞こえます。

つまり、リンク先に指定したいHTMLファイルが保存されている "フォルダ名" を記述し、"/" でフォルダに入り、"ファイル名" を記述すると成立します。

(「index.html」から「B」フォルダ内の「b.html」にリンク)の場合
<a href="B/b.html">b.htmlへ</a>

③:上の階層のファイルへの相対パス 8:52

図:フォルダ構成
上の階層の相対パス

最後の「③」(「B」フォルダ内の「b.html」から「index.html」にリンクする場合)は、②」の反対で上の階層にあるファイルへのリンクです。

今度は "bさん" が "indexさん" に会いに行きます。

その為にはまず、"bさん" は、今いている部屋を出る必要があります。
部屋を出るには、" ../" と記述します。
部屋に入る時と違い、 部屋を出るときは部屋の名前は必要ありません。
部屋を出たら "indexさん" がいてるので、名前を呼びます。

つまり、 "../" でフォルダを出て、"ファイル名" を記述すると成立します。

(「B」フォルダ内のb.htmlからルート階層のindex.htmlにリンク)の場合
<a href="../index.html">index.htmlへ</a>

④:応用編の相対パス 11:30

図:フォルダ構成
フォルダを出たり入ったりする相対パス

上記の3パターンが理解できれば、後はそれらの組み合わせで様々な相対パスが記述できます。
例えば、「B」フォルダ内の「b.html」から「C」フォルダ内の「c.html」への相対パスは、 上の階層のファイルへの相対パス(③)と、下の階層のファイルへの相対パス(②)を組み合わせることで成立します。

「B」フォルダ内のb.htmlから「C」フォルダ内のc.htmlにリンクする場合
<a href="../C/c.html">c.htmlへ</a>

このように、相対パスは主に、" 自サイトの内のリンクや画像の表示"などに使います。

練習問題 13:22

「Chapter13」 -> 「quest」フォルダ内の構成を確認して、下記の問題を解いてみましょう。
なお、解けた問題は問題文の横のチェックボックスをオンにしましょう。

    • 文字列「ボブへ」
      • リンク先:bob.html
    • 文字列「ムカミへ」
      • リンク先:「mukami」フォルダ内の mukami.html
    • 文字列「メアリーへ」
      • リンク先:「mary」フォルダ内の mary.html
    • 文字列「ムカミへ」
      • リンク先:「mukami」フォルダ内の mukami.html
    • 文字列「メアリーへ」
      • リンク先:「mary」フォルダ内の mary.html
    • 文字列「僕の仲間一覧へ」
      • リンク先:index.html
    • 文字列「ボブへ」
      • リンク先:bob.html
    • 文字列「メアリーへ」
      • リンク先:「mary」フォルダ内の mary.html
    • 文字列「僕の仲間一覧へ」
      • リンク先:index.html
    • 文字列「ボブへ」
      • リンク先:bob.html
    • 文字列「ムカミへ」
      • リンク先:「mukami」フォルダ内の mukami.html
    • 文字列「僕の仲間一覧へ」
      • リンク先:index.html
完成イメージ

RERUN

解答例

まとめ 26:56

絶対パスと相対パスの指定方法はわかりましたか?

  • 主に、外部のWebサイトには絶対パス
    自サイト内は相対パスを使う
  • 絶対パスは、URLで指定する
  • 相対パスは、「/」や「../」でフォルダを移動し、
    目的のファイルを指定する