ページの作り始めは HTMLファイルやイメージファイルなどの数も少なくファイルの収納は1つのフォルダでも困りませんが、 ページが増えてくると、1つのフォルダ内にいろいろなファイルが散らばってどれがどれだが分からなくなります。ファイルを手直したり、イメージを差し替える時たくさんのファイルから一つ一つ確かめないと作業はできなくなり、効率が非常に悪くなります。そこでファイルの整理が必要になります。新しいフォルダを作ってその中に関係するファイルを一まとめに収めます。フォルダの中にサブフォルダを作りサブフォルダの中にまたフォルダ・・・とフォルダ名も入っている内容に合う名前を付け、自分がわかりやすいように整理します。ファイルのフォルダ分けをするとファイルの位置が変わります。そこで階層という考え方が必要になります。
ファイルの位置を指定するのには、二種類の方法があります。
-
相対的パス
ファイルどうしの位置を、基準とするファイルから見てどこにあるかを指定する方法です。 - 絶対的パス ファイルの位置をインターネット上の一番もとになる位置から順番にたどって指定する方法です。「http://」から記述します。どこから指定しても位置は変わりません。
自分のサイト内でのページ(HTMLファイル)からページにリンクさせる場合やイメージ（画像や曲などのファイル）などを表示させるときは、基本的には相対パスを使います。
自分のサイト内ではなく、インターネット上にあるサイトやページ、イメージにリンクする場合は絶対的パスを使います。
http://www.d3.dion.ne.jp/~tiyoko01/（絶対パス）
インターネット上のサーバーにある↑のアドレスにリンクを張ると、私のトップページが表示されます。
自分のサイト内でのファイルの指定（相対パス）
フォルダ分けをすると、階層構造が生まれます。 ページにイメージを表示させたり、他のページにリンクさせる場合にファイルの位置関係であるこの階層という考え方が大切になってきます。ファイルの位置指定を間違うとページや画像が表示されなくなります。
● 階層構造になっているファイルの位置を指定する
例としてホームページの構造を図にしてみました。
「Aフォルダ」をトップに階層構造ができあがります。
- トップにはホ−ムペ−ジ用の「フォルダA」があります。
- 「フォルダA」の中に2つのフォルダ「フォルダB」と「フォルダC」と1つの index.htmlファイルとイメージファイルがあります。
- 「フォルダB」の中には1つのフォルダ「フォルダD」と2つの .htmlファイルがあります。
- 「フォルダC」の中には .htmlファイルとイメージファイルが1ずつあります。
- 「フォルダD」の中にも「フォルダE」と .htmlファイルとイメージファイルが１つずつあります。
● 図にある「sun.html」ファイル（赤い枠）の位置を基準にして、リンクしたいファイルを指定してみます。
- 上の階層のファイルを指定する
-
トップページ index.htmlファイルにリンクを張る
<a href="../index.html">トップページへ</a>と「sun.htmlファイル」のソースに記述し、表示された「トップページへ」の文字をクリックするとindex.htmlのページが表示されることになります。
「../index.html」の指定は1つ上位にあるフォルダの中のindex.htmlファイルを指しています。
「Bフォルダ」のsun.htmlファイルから1つ上位にある「Aフォルダ」の index.html へのリンク指定はピリオド2つとフラッシュを使って、 ../ + ファイル名と指定します。 ../ は1つ上のフォルダと言う意味になります。2つ上位にある場合は ../../ + ファイル名と指定します。
-
トップページ index.htmlファイルにリンクを張る
- 下の階層のファイルを指定する
- 「Dフォルダ」にある sun3.htmlファイルにリンクを張る
<a href="D/sun3.html">sun3へ</a> となります。
「D/sun3.html」の指定は、同じ「Bフォルダ」の中にある「フォルダD」の中のsun3.htmlを指しています。
「Dフォルダ」の中にある sun3.htmlファイルは「Bフォルダ」より1つ下位になります。上位から下位を指定する場合はフォルダ名 + / +ファイル名と指定します。
- 「Dフォルダ」にある sun3.htmlファイルにリンクを張る
- 同じ階層（同じフォルダ内）のファイルを指定する
- 同じ「Bフォルダ」にある sun1.htmlファイルにリンクを張る
<a href="sun1.html">sun1へ</a> となります。 ファイル名のみ指定します。
- 同じ「Bフォルダ」にある sun1.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フォルダ」に一度戻ってそこから位置を指定します。
ホームページを作成し始めて、最初に挫折しそうになるのがリンクでのファイルの位置指定だと思います。 同じフォルダ内にあるファイルならそのままファイル名を指定すればいいのですが、フォルダ分けをするとファイルの位置も変わりわかりにくくなってきます。上記で長々と説明しましたが、何度かファイルの位置指定をやっていくうち感覚的に分かってくると思います。フォルダを移動するたびに / を入れ、上のフォルダに上がるたびに ../ を加えることを頭においてファイル指定方法を実行してください。
●ディレクトリって？
ディレクトリっていうのは、パソコンのフォルダと同じものです。ファイル収納する場所です。
フォルダをインターネット上で使うときはディレクトリという言葉を使います。