[`yahoo` not found]
Delicious にシェア
Digg にシェア
[`evernote` not found]
LINEで送る
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)”]

 

この記事を読んだ人はこんな記事にもご興味があるかも

(Visited 554 times, 1 visits today)
[`yahoo` not found]
Delicious にシェア
Digg にシェア
[`evernote` not found]
LINEで送る
Pocket

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください