絶対パスと相対パス

ホームページを作成するときに、自分のサイト内での移動、他のサイトにリンク、画像を表示する

といったことをすると思います。

そんなときに必要な知識がパスです。このパスは非常に重要なのでよく読んでください。

また下の例でリンクや画像のタグがでてきますが、その細かい説明は後で出てきますので

今わからなくても心配いりません。


１、パスとは？

パスとは移動先のページや表示する画像が何処にあるのかを指定する方法です。

それには「絶対パス」と「相対パス」という２つの指定方法があります。


２、絶対パス

絶対パスは「http://ではじまるアドレス」で場所を指定する方法です。

この方法は主に他のホームページへのリンクで使います。例えば私のホームページのトップページにリンクするには、

<a href="http://www.homepagecreation.net/index.html">ホームページ作成・HTML</a>

と書きます。(トップページの場合ファイル名index.htmlは普通省略)

もちろん自分のサイト内でのリンクにも使えます。


３、相対パス

相対パスは「そのファイルから見てリンク先のファイルが何処にあるか」で場所を指定する方法です。

フォルダを作るのところで説明したことを思い出してください。

例えばサイトすべてのファイルを入れているフォルダ(ディレクトリ)がMySiteとします。

MySiteフォルダ内にはindex.html、link.htmlというHTMLファイル２つとfriendというフォルダがあるとします。

index.htmlから同じフォルダ内にあるlink.htmlにリンクするときは

<a href="link.html">リンク集</a>のようにファイル名だけでリンクができます。

ですがfriendフォルダの中にあるtomodati1.htmlというHTMLファイルにリンクするには

<a href="friend/tomodati1.html">友達１</a>のように<a href="フォルダ名/ファイル名">のように書く必要があります。


４、相対パスでの他フォルダ内のファイルの指定方法

・１つ下のフォルダの中のファイル

リンク：<a href="フォルダ名/ファイル名">

画像：<img src="フォルダ名/ファイル名">

・２つ下のフォルダの中のファイル

リンク：<a href="フォルダ名/フォルダ名/ファイル名">

画像：<img src="フォルダ名/フォルダ名/ファイル名>

例　index.htmlからfriendフォルダ内のschoolフォルダ内のbsan.htmlにリンク

<a href="friend/school/bsan.html">Bさん</a>

index.htmlにgazouフォルダ内のimageフォルダ内のhouse.gifを表示

<img src="gazou/image/house.gif">

・上のフォルダの中のファイル

上のフォルダに上がるという../をつける。１つ上なら../ 、２つ上なら../../ 。

例　さっきのbsan.htmlからindex.htmlへのリンク

<a href="../../index.html">トップページへ</a>


＜＜　「HTMLの書き方」へ　　　　　「注意点」へ　＞＞



ホームページ作成とHTML＞＞HTML書き方講座＞＞絶対パスと相対パス