絶対パスと相対パス

ホームページを作成するときには、リンクや画像を貼ったりすることがあると思います。

そんなときに必要なのがパスという知識です。

パスとはリンク先のページや、表示したい画像が何処にあるかを示すものです。

そして、パスには「絶対パスと相対パス」という二つがあります。

・絶対パス

絶対パスとはhttp://ではじまるURLでリンク先や画像を指定する方法です。

ようはアドレスということです。

他の人のサイトへのリンクなどにはこの絶対パスを使います。


・相対パス

相対パスは初めての人には、かなりやっかいで分かりにくいので覚悟してください。

相対パスは自分のサイト内でリンクを貼ったり、自分のサーバーにある画像を表示したりするときに使います。

相対パスとは、あるファイルから見てリンク先のページや画像が何処にあるかを指定するものです。

例をあげながら解説していきますので、まずはここを見てください。

このページの太字で書かれたmakingやhtmlなどはフォルダだと思ってください。

つまりデスクトップ上にMySiteというフォルダがあって、その中にさらにmakingやhtmlという名前のフォルダが入っているということです。

htmlフォルダの中にはさらにbasisやfontというフォルダが入っています。

まずトップページのファイルはMySiteというフォルダの中に入っています。

ホームページ作成の基礎を解説するファイルはMySiteフォルダのmakingフォルダの中に入っています。

そしてhtmlに関することを解説するファイルはMySiteフォルダのhtmlフォルダに入っています。

そしてここでようやく相対パスの話になるのですが

トップページから見て、MySiteというフォルダに入っているseo.html(検索エンジン対策(SEO)と表示されているファイル)というファイルはどのような位置関係にあるでしょう？

同じフォルダに入っているわけですから、関係もなにも同じ場所にあります。

ということでトップページからseo.htmlにリンクするには

<a href="seo.html">検索エンジン対策</a>とするだけでOKです。

ちなみに<a>はリンクを貼るためのタグのことですが、今は分からなくても大丈夫です。後々出てきます。

ではトップページから見てhtmlフォルダのbasisフォルダのabout.html(HTMLとは？と表示されているファイル)というファイルはどのような位置関係でしょうか？

トップページから見るとhtmlというフォルダ内のbasisというフォルダ内のabout.htmlということになります。

ということでトップページからabout.htmlにリンクするには

<a href="html/basis/about.html">HTMLとは？</a>

というふうにリンク先のファイル名を指定する必要があります。

では逆にabout.htmlからトップページへリンクするにはどうすればいいのでしょうか？

about.htmlから見てトップページは二つ上のフォルダにあります。

この上というのを表すのが ../ という記号です。

そしてabout.htmlからトップページ(index.html)にリンクするには

<a href="../../index.html">ホームページ作成とHTMLtop</a>

のようにリンク先のファイルを指定します。

まとめると

・一つ下の階層のフォルダの中のファイルにリンクする

<a href="フォルダ名/ファイル名">

・二つ下の階層のフォルダの中のファイルにリンクする

<a href="フォルダ名/フォルダ名/ファイル名">

・一つ上の階層のフォルダの中のファイルにリンクする

<a href="../ファイル名">

・二つ上の階層のフォルダの中のファイルにリンクする

<a href="../../ファイル名">


まあ、説明を聞いたくらいじゃ絶対に分からないと思います。

まずホームページ作成でつまずくのがこのパスという概念ですから。

なので自分で色々やってみて徐々に理解してください。

一度理解すると後は楽勝ですので、そこまではがんばってください。