絶対パスと相対パス

Tweet

[`yahoo` not found]

Share on Tumblr

[`evernote` not found]

Pocket

パス

ファイルを置いている場所。

パスの指定方法には、絶対パスと相対パスがある。

絶対パス

http:// から始まるサイトのアドレス（URL）を使い、ファイルの場所を指定する方法。

外部サイトにリンクする場合には、絶対パスで指定する。

例）

<a href=”http://○○.com”>○○.comへ。</a>

上の図の img を絶対パスで表わすと、

<img src=”htttp://○○.com/img/○○.jpg” alt=”” >

通常、この場合、相対パスで表わす。

<img src=”img/○○.jpg” alt=”” >

相対パス

現在地を基準にした相対的な指定ファイルの場所の指定方法。

ページ内リンクをする場合などで用いる。

外部サイトを相対パスで記述することはできない。

相対パスのメリット

相対パスなら、開発時のローカル環境でも、表示や動作の確認を行うことができる。

サーバーを引っ越しても、パスを修正する必要はない。

ポイント

自分が今、記述しているファイルの現在地を把握すること。

相対パスの記述法

同じフォルダ内

パスにはファイル名を記述する。

<a href=”○○.html”>ページ○○へ</a>

<img src=”○○.jpg” alt=””>

下層のフォルダにファイルが存在する場合

フォルダ名/ファイル名と記述する。

<a href=”folderB/○○.html”>○○ページへ</a>

<img src=”folderB/folderC/○○.jpg” alt=””>

上の階層のフォルダにファイルが存在する場合

フォルダを上がる分、[../]に続けてファイル名を記述する。

[../]　1つ上の階層を指定。

[../../]　2つ上の階層を指定。

<a href=”../../○○.html”>○○ページへ</a>

<img src=”../○○.jpg” alt=”” >

異なるフォルダにファイルが存在する場合

一度、上のフォルダに上がってから、ファイルの存在する下がる。

<img src=”../folderC/○○.jpg” alt=”” >

【参照】

[amazonjs asin=”4797383038″ locale=”JP” tmpl=”Small” title=”たった2日で楽しく身につく HTML/CSS入門教室 (Design&IDEA)”]

Tweet

[`yahoo` not found]

Share on Tumblr

[`evernote` not found]

Pocket