パスの指定方法 0:18

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

絶対パス 1:17

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

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

<a href="https://creatorquest.jp/">CreatorQuest</a>

相対パス 2:44

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

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

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

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

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

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

これは、お互いのファイルが同じ部屋が （フォルダ）にいているので、相手の名前を呼んであげれば聞こえる位置にいます。
従って、リンク先に指定したい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ファイルが保存されている "フォルダ名" を記述し、"/" でフォルダに入り、"ファイル名" を記述すると成立します。

<a href="B/b.html">b.htmlへ</a>

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

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

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

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

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

<a href="../index.html">index.htmlへ</a>

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

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

<a href="../C/c.html">c.htmlへ</a>

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

練習問題 13:22

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