HTMLや画像ファイルの位置指定方法

ページの作り始めは HTMLファイルやイメージファイルなどの数も少なくファイルの収納は1つのフォルダでも困りませんが、 ページが増えてくると、1つのフォルダ内にいろいろなファイルが散らばってどれがどれだが分からなくなります。ファイルを手直したり、イメージを差し替える時たくさんのファイルから一つ一つ確かめないと作業はできなくなり、効率が非常に悪くなります。そこでファイルの整理が必要になります。新しいフォルダを作ってその中に関係するファイルを一まとめに収めます。フォルダの中にサブフォルダを作りサブフォルダの中にまたフォルダ・・・とフォルダ名も入っている内容に合う名前を付け、自分がわかりやすいように整理します。ファイルのフォルダ分けをするとファイルの位置が変わります。そこで階層という考え方が必要になります。

ファイルの位置を指定するのには、二種類の方法があります。

自分のサイト内でのページ(HTMLファイル)からページにリンクさせる場合やイメージ(画像や曲などのファイル)などを表示させるときは、基本的には相対パスを使います。 自分のサイト内ではなく、インターネット上にあるサイトやページ、イメージにリンクする場合は絶対的パスを使います。
http://www.d3.dion.ne.jp/~tiyoko01/(絶対パス)
インターネット上のサーバーにある↑のアドレスにリンクを張ると、私のトップページが表示されます。

自分のサイト内でのファイルの指定(相対パス)

フォルダ分けをすると、階層構造が生まれます。 ページにイメージを表示させたり、他のページにリンクさせる場合にファイルの位置関係であるこの階層という考え方が大切になってきます。ファイルの位置指定を間違うとページや画像が表示されなくなります。

● 階層構造になっているファイルの位置を指定する
例としてホームページの構造を図にしてみました。

ファイルの階層構造を示した図

「Aフォルダ」をトップに階層構造ができあがります。

● 図にある「sun.html」ファイル(赤い枠)の位置を基準にして、リンクしたいファイルを指定してみます。

違うファイルからの指定
sun3.html から index.html にリンクを張る../../index.html
sun3.html から sun2.html にリンクを張る../../C/sun2.html
sun2.html から sun3.html にリンクを張る../B/D/sun3.html
sun3.html にイメージファイル aa.gif を指定する../../aa.gif
index.html にイメージファイル bb.jpg を指定するC/bb.jpg
index.html にイメージファイル cc.png を指定するB/D/cc.png
index.html にイメージファイル aa.gif を指定するaa.gif

この場合は筋道が違うので、最上位にある「Aフォルダ」に一度戻ってそこから位置を指定します。


ホームページを作成し始めて、最初に挫折しそうになるのがリンクでのファイルの位置指定だと思います。 同じフォルダ内にあるファイルならそのままファイル名を指定すればいいのですが、フォルダ分けをするとファイルの位置も変わりわかりにくくなってきます。上記で長々と説明しましたが、何度かファイルの位置指定をやっていくうち感覚的に分かってくると思います。フォルダを移動するたびに / を入れ、上のフォルダに上がるたびに ../ を加えることを頭においてファイル指定方法を実行してください。

●ディレクトリって?
ディレクトリっていうのは、パソコンのフォルダと同じものです。ファイル収納する場所です。 フォルダをインターネット上で使うときはディレクトリという言葉を使います。

■リンク目次へ