トップページ > 初心者向けホームページ作成講座 > フォルダや上層フォルダのファイル指定方法
フォルダや上層フォルダのファイル指定方法
- フォルダの階層について
- フォルダ内のファイルを指定
- 現在の階層より上のフォルダのファイル指定
- フォルダの上階層にあるフォルダ内の画像を指定
- 他のホームページのアドレスを指定して表示
- 絶対パスと相対パスの違い
spacer
フォルダの階層について
パソコンのフォルダは階層方式になっており、フォルダにアクセスした場合、下の階層に移動したことになります。
逆に「上へ」
で戻ったときは、上の階層に移動します。−フォルダの階層−
htmlファイルと画像ファイルが同一の階層(フォルダ)にある場合は
ファイル名指定だけで表示されますが、下や上の階層にある
ファイルを指定するには、以下の方法で指定する必要があります。
なお、./image.jpg のように ./ が付く場合は
同一フォルダ内のファイルを参照していることを
意味しており、 単に image.jpg としているのと同じです。
spacer
フォルダ内のファイルを指定
imagesフォルダ内に画像ファイルまたはHTMLファイルがあったとします。
フォルダにアクセスし、ファイルを指定するには
以下の方法があります。
画像タグ<IMG>の場合
<IMG src="images/image01.jpg">
リンクタグ<A>の場合
<A href="images/photo.html">
<BODY>の場合
<body background="images/wall01.jpg">
images/ は「images」フォルダを示しており、この記述を行うことにより
フォルダ内の画像やHTMLファイルを指定できるようになります。
「images」フォルダ内に、さらに「photo」フォルダが
あるとする場合、このように記述します。
images/photo/ファイル名
spacer
現在の階層より上のフォルダのファイル指定
現在の階層が「diary」フォルダだったとします。
「diary」フォルダより上の「homepage」フォルダにある
ファイルを参照するには以下のように記述します。
画像タグ<IMG>の場合
<IMG src="../image01.jpg">
リンクタグ<A>の場合
<A href="../photo.html">
<BODY>の場合
<body background="../wall01.jpg">
../は、一つ上の階層にあるファイルを参照するという意味で、diary階層の上にあるファイルを指定することができます。
２つ上の階層を指定するには、以下のように記述します。
../../ファイル名
それ以降は../の数を増やせばいいです。
フォルダの上階層にあるフォルダ内の画像を指定
現在の階層が「diary」で、その上の階層にある別のフォルダを参照する
には、以下のように記述します。
画像タグ<IMG>の場合
<IMG src="../images/image01.jpg">
リンクタグ<A>の場合
<A href="../images/photo.html">
<BODY>の場合
<body background="../images/wall01.jpg">
../で一度上の階層に上がり、images/で画像が入っているフォルダを
参照しています。
spacer
他のホームページのアドレスを指定して表示
他のホームページの指定するには以下のように記述します。画像タグ<IMG>の場合
<IMG src="http://www.xxxxxx195747.co.jp/image/panda.jpg">
リンクタグ<A>の場合
<A href="http://www.xxxxxx195747.co.jp/panda.html">
このアドレスは架空のため、何も表示されません。
spacer
絶対パスと相対パスの違い
相対パスとは、現在自分のいるフォルダ(ディレクトリ)を起点として、そこからの相対的な位置を示しています。
images/photo/img.jpg
./diary/2007_07.html
material/parts01.gif
photo.jpg
絶対パスとは、パスの指定が/(ルート)で始まる
フォルダ(ディレクトリ)の指定方法です。
自分がどのディレクトリにいても、一番上の/rootを
起点にディレクトリを指定します。
同一ディレクトリ指定の ./ と間違いやすいので要注意です。
/root/images/photo/img.jpg
/root/page/diary/2007_07.html
/root/material/parts01.gif
これは、ホームページhttp://から始まるアドレスでも同じことが言えます。
http://www.xxxxxx195747.co.jp/image/