Chapter1：ディレクトリ構造とパスネーム

■管理しやすくする為に

ファイルを作ったり装飾したり画像をのせたりリンクをしたり。。。
ここまで進んできたという事は細かい部分を除けば普通にデータを扱う事に関してもうそれほど大きな問題はないでしょう。そこで今回は今まで学んできた方法でこれから作っていくことになるたくさんのホームページ用データを解りやすく管理する為の方法について覚えてみましょう。

みなさんがお使いになっているコンピュータにはディレクトリ（フォルダ）がたくさんありますよね。最初から順に進んでこられた方は少なくとも"www"というディレクトリがあるはずです（解りやすいようにと入れ物を作りましたものね）。

同じようにこの"www"ディレクトリの中に更にディレクトリを作って「テキストはここ・壁紙はここ」といったふうに分ける事もできます。こうして内容ごとに分けるとファイルがたくさんになった時にも何がどこにあるか判別しやすく管理も楽になりますね。ただこうしたディレクトリを作ると今まで学んできた事とは別に新しいお約束を覚えなければいけません。

■実際に試してみましょう

ではまずおいしい紅茶とクッキーを用意してください。ついでにBGMを流すのも良いかもしれませんね。うんうん。今回は今までより少し長くなると思いますので紅茶でも飲みながらのんびりとまいりましょう。
 
準備。。。できました？
 
準備ができたらいよいよお話に移りたいと思います。

画像の表示（Chapter4）で"sample001.jpeg"という画像を表示させる為の "artworks.html" を作りましたね。まずはこの時のファイルを使って話を進めたいと思います。では早速ですが他のファイルも一緒に入っている "www" ディレクトリの中に新しいディレクトリを作ってみましょう。名前はとりあえず "duron" とします。この新しい "duron" ディレクトリの中に以前保存して使った "sample001.jpeg" だけを移動させてください。

できましたか？できたらこの画像を表示させていた "artworks.html" をブラウザで開いてみてください。絵は表示されましたか？ 絵は表示されませんよね。表示されている人は間違ってますので先程の手順を確認した後で改めて実行して下さい。

■画像の表示 - Immediatery Explosion -
ファイア(F)　爆発(E)　消失(V)　ヘブン(H)　>>

画像表示の練習です

絵をクリックすると移動します

このように対象が同一ディレクトリに無い為にファイルが繋がらない事を一般的に「パスが間違っている」と表現します。同じ場所から違う場所に画像が移動した為に画像がどこにあるか解らないんですね。今からこの「間違ったパス」を「正しいパス」に直す事を学びます。

■下位ディレクトリへのパス

さて。今表示されていない"artworks.html"から呼び出す画像ファイルはどこに行きましたか？別のディレクトリに移動させましたよね。そ。"duron"ディレクトリの中です。じゃあどうするかというと"artworks.html"の画像を呼び出す記述の中に移動した画像の位置を書いてあげればいいんです。簡単ですから早速編集してみましょう。いつものように赤い文字の部分を書き加えてみてください。編集できたら保存して再読み込みしてみて下さい。

■artworks.html - 偽テキストエディタ
ファイル(F)　編集(E)　書式(O)　ヘルプ(H)　
<html>
<head>
<title>画像の表示</title>
</head>
<body>
<p>画像表示の練習です</p>
<a href="contents.html"><img src="duron/sample001.jpeg"></a>
<p>絵をクリックすると移動します</p>
</body>
</html>

きちんと表示できたでしょうか。できない時はどこか間違っていると思いますので間違っているところを直してくださいね。まだこの次もこのファイルを使いますのでがんばって下さい。書き方は簡単なのでもうなんとなくおわかりいただけているのではないかと思います。書式は以下のとおりです。

<img src="ディレクトリ/ファイル">

ファイルの名前の前にディレクトリ名をつけてあげれば良いだけです。簡単ですね。ただ注意しなければならないのはディレクトリ名とファイル名との間に"/"を入れてあげる事です。忘れないようにしてくださいね。

＊メモ：サブディレクトリって何のこと？
今回作った"duron"ディレクトリのようなものを「サブディレクトリ」と言います。元々ある"www"ディレクトリはそれより上にディレクトリがありませんから「トップディレクトリ」や「ルートディレクトリ」とよく表現されます。FC2WEBでは"index.html"や"i"ディレクトリが置かれている所がルートディレクトリになります。これに対して"i"ディレクトリはサブディレクトリになります。こういった物は「階層構造」とも言われていてコンピュータやWEBサイトを管理する上で多用される表現ですので覚えておくと良いかもしれません。

■次に進む下準備をしましょう

それでは次に"www"ディレクトリの中にまた新しいディレクトリを作ります。今度は"athlon"と言うディレクトリを作って下さい。それができたら今作った"athlon"ディレクトリの中に先程作った"duron"ディレクトリをそのまま移動してください。更に先程編集した"artworks.html"も"athlon"ディレクトリの中に入れてください。できましたか？

ここまで出来たら現状を頭の中で一度きちんと整理しておきましょう。
 
まず"www"ディレクトリ(ルートディレクトリ)の中に
"index.html"と"contents.html"と"athlon"ディレクトリがあります。
 
次にこの"athlon"ディレクトリの中に
"artworks.html"と"duron"ディレクトリがあります。
 
そして"duron"ディレクトリの中に
"sample001.jpeg"があります。
 
現状を文字で書くと思わずこんがらがっちゃいそうな雰囲気ですがイメージにすると下のような感じで実際は割と単純な構造です。

wwwディレクトリ(ルートディレクトリ)
index.html
contents.html
athlonディレクトリ
artworks.html
duronディレクトリ
sample001.jpeg

なんとなく解りました？最初はイメージが湧き辛いかもしれませんが少し慣れてくるとこういったイメージが自然に沸いてくる（頭の中で自然に理解できる）ようになります。今解り辛いからと言って悲観する事はありません。

頭の中が少し整理できたらいよいよ本題に進みます。もし疲れていたらさっきいれた紅茶を一口飲んで深呼吸をすると良いでしょう。もしくは無理せず次の機会にしてもいいと思います。無理してると解るものも解らなくなってしまい後日「パス」と聞くだけで拒否反応が出るようになってしまいますから。そうなってはせっかくの講座も意味がなくなってしまいますもの。

どうするかはあなた次第です。無理せずのんびりという事で。ひとつ。

■上位ディレクトリへのパス

さあ。準備はOK？
では話を進めますね。
まずathlonディレクトリに移した"artworks.html"をブラウザで開いてください。きちんと文字と画像が表示されている事と思います。これは画像へのパスがあっているという事ですね。表示できない場合はファイルの移動を間違っている事が考えられますからもう一度確認してください。表示できたら画像をクリックして下さい。以前のように"contents.html"に移動できますか？できませんね。先程お話しましたがこれはファイルを移動した事によって先程の画像同様にパスが狂ってしまったからです。

では修正してみましょう。といってもこれは先程よりも更に簡単です。では下記を参照しながら編集してみてください。いつもどおり赤い文字の部分を修正して下さい。急がなくてもいいので慌てず正確に。

■artworks.html - 偽テキストエディタ
ファイル(F)　編集(E)　書式(O)　ヘルプ(H)　
<html>
<head>
<title>画像の表示</title>
</head>
<body>
<p>画像表示の練習です</p>
<a href="../contents.html"><img src="duron/sample001.jpeg"></a>
<p>絵をクリックすると移動します</p>
</body>
</html>

ってこれだけなの。。。？
ええ。これだけです。今回のように一つ上のディレクトリに移動したい場合はたった三文字付け加えるだけで良いんです。 この"../"を1組を入れると「一つ上の部屋に行きなさいよ」というのと同じ役割をしてくれます。

さて編集できたら保存して再読み込みして試してください。うまくリンクできていましたか？うまくできればひとまず合格です。では簡単に書式を。

<a href="../ファイル">クリックする文字列や画像</a>

はい。簡単ですね。とっても。

ここで気が楽になるお話を少し。 このパスというのはリンクの場合も画像の場合も同じように記述するようになります。 ですからこれで通常であれば画像・リンクを問わず自由にディレクトリ間を移動する手段を覚えた事になります。 一度基本がわかれば後は楽チンです。これを元に応用していくだけなのですから。

■応用を含めて練習してみよう

それでは応用に挑戦してみましょう。
"www"ディレクトリの中に"opteron"ディレクトリを作成してください。その中に"index.html"以外を全て移動させてください。そして各ファイルをそれぞれリンクでつないでみて下さい。下にディレクトリ構造のイメージとそれぞれの参考になるパスをいくつか書いておきます。いろいろ試して少しでも理解してくださいね。

wwwディレクトリ(ルートディレクトリ)
index.html
opteronディレクトリ
contents.html
athlonディレクトリ
artworks.html
duronディレクトリ
sample001.jpeg

いくつかのパスの例

index.htmlにsample001.jpegを表示する（下位3階層）

<img src="opteron/athlon/duron/sample001.jpeg">

contents.htmlにsample001.jpegを表示する（下位2階層）

<img src="athlon/duron/sample001.jpeg">

index.htmlからcontents.htmlへリンクする（下位1階層）

<a href="opteron/contents.html">文字列・画像</a>

artworks.htmlからindex.htmlへリンクする（上位2階層）

<a href="../../index.html">文字列・画像</a>

これで全てではありませんので今までの事やこれらの例を参考にしながらいろいろ試してみて下さい。他に自分でファイルを追加して試してみるのも良いでしょう。うまく出来はじめた時に「やったね」って嬉しくなると思います。そう思え始めたならあなたのゴールはきっと間近です。
なおFC2WEB（無料版）ではディレクトリは3階層までしか許可されていませんので今回までのパスを扱えるようになれば必要十分です。

■お疲れ様でした

今回はパスについて学びましたがいかがでしたか？ 今までに比べるとちょっと大変だったかもしれませんね。 こちらで紹介した方法は「相対パス」と言われるものを基準に解説しています。 これは「あるファイルから見たもう一方のファイルに対するパス」です。 例えば同じsample001.jpegを表示させたい場合でもindex.htmlに表示させる時とcontents.htmlに表示させる時ではパスの記述が違いますよね。要するに中心になるファイルのある位置によってパスの見方が変わってくるのが相対パスという事です。

これに対して「絶対パス」という物も存在します。 おそらくよくご存知の例えで言うと他のサイトへのリンクなどがこれに相当します。 例えばFC2WEBのTOPページにリンクする為のパスはindex.htmlに書いてもcontents.htmlに書いても全く同じ"http://www.fc2web.com/"となります。要するに場所や位置による変化が無いものが絶対パスという事です。

多少の語弊はあるかもしれませんがだいたいこういった感じです。 最初からここまでの事を覚えてしまえば実用的なコンテンツを作っていく事も十分可能ですね。 あとはあなたのアイディアとがんばり次第です。 これからもあきらめないでがんばって。

表紙へ
SEO [PR] 爆速!無料ブログ 無料ホームページ開設 無料ライブ放送