HTMLにおけるパスの指定法

2013年4月10日：HTML

HTMLを記述する際に、URLを指定する場合が多くあります。

例えば、リンクや画像がそうでしょう。

ファイルを指定する方法に「絶対パス」と「相対パス」があります。

ここでは、これらのパスの指定法について解説します。

絶対パス

一番簡単なパスの設定法に絶対パスがあります。

絶対パスによる指定法は直接URLを記述するだけです。

例えば、このブログのトップページなら

http://www.jprogramer.com/index.php

になります。「www.jprogramer.com」はサーバーの名前を示しています。

JProgramerのwwwサーバーとなります。

そして、index.phpはPHPのファイルになります。

http://www.jprogramer.com/

とindex.phpを省略することもできます。PHPファイルでなくHTMLファイルの場合は、index.htmlとなります。

相対パス

相対パスは、現在いるファイルを基準としてファイルを指定する方法です。

例えば、以下のような場所のHTMLファイルにいるとしましょう。

相対パスの説明図

この場合、Cフォルダの下にいることになります。

同一フォルダ内のファイルやフォルダを指定する

同一フォルダ内のファイルを指定する場合は、直接ファイルやフォルダ名を指定すればOKです。

例えば、c.pngを指定するなら

c.png

とすればいいです。また、d.pngを指定するなら

D/d.png

となります。

 

相対パスの良い点は、

  • 長々とURLを書く必要がない
  • ホームページのURLに依存しないで記述できる

です。

一つ上のファイルを指定する

一つ上のb.pngファイルを指定する場合は

../b.png

というように「../ファイル名」とします。

さらに上のフォルダAの中のa.pngを指定するには

../../A/a.png

とすればいいです。

最後に

以上でパスの指定方法についての解説を終わります。

相対パスはホームページを作る際多用するので、頭に入れておくといいでしょう。

忘れた場合は、このページを見るか参考書を見れば大丈夫です。

著者：安井 真人(やすい　まさと)

TOP