hp-design.Net :: geoCities

First Update : 02/05/2003
Last Update : 03/13/2003

HTML基礎講座 :: ディレクトリ

ディレクトリって何?

ディレクトリ=フォルダ

フォルダサンプル

ディレクトリってのは、パソコン上で使うフォルダと全く同じものだぜ。
「フォルダは、インターネット上で使うときにはディレクトリと呼ばれる」ってこと。

第1回で、フォルダの作り方は紹介したじゃん。で、そんとき作ったフォルダの中に、また別なフォルダを作ってみよう。そうすると、右の画像みたいになってるはず。
こんな風に、フォルダの中にあるフォルダをサブフォルダって呼ぶ。インターネット上では、“サブディレクトリ”って呼ばれる。

ディレクトリサンプル

右の画像の「home directoty」ってのは、自分のサイトの一番最上位のディレクトリのこと。「sub directory」ってのは、その中にあるディレクトリ(フォルダ)で、「subsub directory」は、サブディレクトリの中にあるディレクトリのこと。


ディレクトリってのを理解するときに、多分分かりやすい例は、「自分のサイト=家」「その中のディレクトリ=部屋」だと思うことかも。
ディレクトリが違えば、違う部屋ってコトだから、そこにあるものが必要なら、当然、その部屋まで取りに行かなきゃなんない。包丁が欲しかったら台所に行くし、本が読みたいなら本棚がある部屋まで行く、そういうこと。

準備オッケー? じゃあ、これからディレクトリの使い方を紹介するぜ。

ディレクトリの指定

サブディレクトリを指定する

サブディレクトリ名/

下のディレクトリ(部屋)に行くには、その名前を指定して、スラッシュ(/) をつけてやればいい。例えば、サブディレクトリの名前が subdir なら、「subdir/」ってなる。このスラッシュ(/) は、ディレクトリだと示すマークだから、覚えておこう。

上のディレクトリを指定する

../

ひとつ上のディレクトリに戻る場合、「../」って記号を使う。二つ上に戻る場合は、「../../」と、../ を2回書けばイイ。だから、さっき紹介したディレクトリサンプルの画像で、サブサブディレクトリ AA から、home directory に戻るには、「../../」ってするぜ。

同じディレクトリを指定する

./

いま、自分がいるのと同じディレクトリ(部屋)を指定するには、「./」って記号を使う。これは、HTMLだと使われる機会は少ないけど、Perlなんかのプログラム言語ではよく使われるぞ。

リンクや画像でディレクトリを指定するには?

リンクを指定する場合も、画像を指定する場合も、どこの部屋にあるなんてモノなのかを指定するって意味では全く同じだぞ。ただ、モノが .html ファイルだったり、.gif なんかの画像だったりするのだけが違う。

図表

例1:home directory から、サブサブディレクトリ BB にある ****.html ってファイルにジャンプしたいなら、“サブディレクトリ B を通って、サブサブディレクトリ BB に入り、その中の ****.html を手に取る”ってする。だから、下みたいになるぜ

<a href="B/BB/****.html"> リンク </a>


図表

例2:サブサブディレクトリ AA から、サブサブディレクトリ BB にある ****.gif ってファイルを表示したいなら、“サブディレクトリ A に戻って、home directory に戻って、そこからサブディレクトリ B を通って、サブサブディレクトリ BB に入り、その中の ****.gif を手に取る”って流れになる。だから、下みたいになるぞ。

<img src="../../B/BB/****.gif">

別のサイトやルートを指定する

別のサイトを指定する

他のサイトにリンクを貼ったり、そこにある画像とかを自分のページに表示させる場合は、今までとはちょっと違った指定をするぜ。なんでかっていうと、他の人のサイトは自分の家じゃねぇじゃん? だから、そのサイトがある住所まで移動しないと、そのヒトの家の中には入れないぞ。

んで、この住所まで指定したものを、「絶対指定」っていう。今まで紹介してきた指定方法は、「相対指定」って呼ばれてるぜ。 この“絶対指定”をして、住所を指定するには、まず「http://」からはじめる。
例えば、オレのGeocitiesにある別館は、URLが http://www.geocities.co.jp/SiliconValley/4466/ だから、他のサイトからそこにリンクしたり、画像を表示したりするには、下みたいにする。

<a href="http://www.geocities.co.jp/SiliconValley/4466/****.html"> ジオ別館のページにリンク </a>
<img src="http://www.geocities.co.jp/SiliconValley/4466/****.gif" alt="">

ルートを指定する

『ルートってなんだよ』ってカンジかな。“ルート'(root)”ってのは、木の根っこって意味で、インターネットでは“そのサイトがあるドメイン”を意味してる。例えば、http://hp-design.net/ とか http://www.geocities.co.jp/ とか。
このルートを指定するには、「/」だけを書けばイイ。だから、下みたいになるぞ。

http://www.geocities.co.jp/SiliconValley/4466/ から
<a href="/"> http://www.geocities.co.jp/ にリンク </a>
http://hp-design.net/beginning/lecture/ から
<img src="/title.gif"> http://hp-design.net/title.gif を表示する

[ back ] [ page top ]