Q&Aやメニュー以外のプログラムについて
ここでは、いろいろご質問をいただいたプログラムについての回答や、メニューにはないプログラム関連の情報について掲載していきます。
実際、お問い合わせいただいたそのままを掲載しています。何かご質問があればお気軽にお問い合わせください。
Q&A
■ディレクトリ構造について
（Q.）「画像を表示させるときに、『Img src="../pic/～』という感じで「pic」をつけないと画像がでないんですがなぜですか?
（A.）この質問については、まず、「ディレクトリ構造」と呼ばれる理屈をしってもらう必要があります。
ディレクトリ構造とは、WEBだけでなく、WindowsにしてもLinuxにしてもWEBにしても、概ねこのディレクトリを連ねた構造を
とっています。
今回はWEB上での質問なので、FTPで見たような形式で例示をしながら説明していきます。
例えば、各サイトにはメインサイトが存在しますね。大体は、「index.html」というファイルがトップページとして設定され
ていると思います。
このディレクトリ構造を簡単に図示します。
URLは、「http://www.[ドメイン名]/index.html」となります。
[ディレクトリ構造-1]
WWW
|
+index.html
これは、「WWWというディレクトリの中に、index.htmlというファイルが格納された状態」であるといえます。
※ちなみにですが、「ドメイン名」はWWWの上の階層にあるディレクトリ、もしくはドメインサーバー上に配置されており、
外からのセッションがあった場合、指定されたドメインのWWWにリンクされるように設定されています。
また、サイトのトップページはindex.htmlですが、「.htaccess」などをつかってindex.html以外のものも利用することが
できます（これは必要があれば聞いてください）。
次に、「http://www.[ドメイン名]/test.gif」を表示させてみます。
[ディレクトリ構造-2]
WWW
|
+ - index.html
|
+ - test.gif
これはindex.htmlとtest.gifのファイルが並列関係にありますので、「http://www.[ドメイン名]/○○」の○○の箇所を変更
することで表示が切り替わります。
では、次に「http://www.[ドメイン名]/image/test.gif」を表示させてみます。
[ディレクトリ構造-3]
WWW
|
+ - index.html
|
+ - image
|
+ - test.gif
これは、index.htmlと並列に配置された「image」という名称のディレクトリ（フォルダ）内にtest.gifが格納されている
パターンです。
ディレクトリの基礎知識はここまでです。
なんとなく、ディレクトリの構造については理解してもらえたのではないかなぁ～と思います。
分からなければまた質問してください。
では、ここから今回の質問について解説していきます。
「『Img src="../pic/～』という感じで「pic」をつけないと画像がでないんですがなぜですか?」ということですが、恐らく、
下記のディレクトリ構造に近いかたちなっていると考えられます。
※以下、「ディレクトリ」のことを「dir」と記載します。
[ディレクトリ構造-4]
WWW（dir）
|
+ - index.html
|
+ - pic（dir）
|
+ - test.gif
|
+ - pic_next（dir）
|
+ - test_2.gif
質問のURLを見る限りでは、イメージ（画像）ファイルは「pic」という名前のディレクトリの下に配置されているから
「pic」という指定が必要になっているといえます。
仮に、上記例のtest.gifをindex.htmlと同じところ（階層）に配置すると、picは不要になります。
※test_2.gifというのを表示させる場合は、「src="./pic/pic_next/test_2.gif"」となります。
ついでですが、ちょうど「src="../～」という記載がありますので、「絶対パス（フルパス）」と「相対パス」について
少し触れておきます。
絶対パス（フルパス）とは、「http://www.[ドメイン名]/test.gif」のようなものをいいます。これは「URL指定」のため、
前述のディレクトリ構造が変わると画像が「Not Found」になります。
相対パスというのは、「掲載するサイトを基点として、上下のディレクトリを指定する方法」ということになります。
下記に例示します。
[ディレクトリ構造-5]
WWW（dir）
|
+ - index.html<基点>
|
+ - pic_A（dir）
|
+ - test_1.gif
|
+ - pic_B（dir）
|
+ - test_2.gif
|
+ - pic_C（dir）
|
+ - test_3.gif
|
+ - pic_D（dir）
|
+ - TEST_SITE.html（WEBページ）
①index.htmlを基点とした場合、index.htmlに表示させるための記載は以下のとおりになります。
・「test_1.gif」は、「src="./pic_A/test_1.gif"」になります。
・「test_2.gif」は、「src="./pic_A/pic_B/test_2.gif"」になります。
・「test_3.gif」は、「src="./pic_A/pic_B/pic_C/test_3.gif"」になります。
同じ階層にあるディレクトリは「./」で指定します。このサンプルでは、「index.html」と「pic_A」が同じ階層にあるので
「./」で書き始めます。
②では、一番下の階層（ディレクトリ）にあるTEST_SITE.htmlに画像（gif）を相対パスで表示させてみましょう。
・TEST_SITE.htmlのURLは「http://www.[ドメイン名]/pic_A/pic_B/pic_C/pic_D/TEST_SITE.html」です。
・TEST_SITE.htmlを基点にして、各imgファイルを表示させていきます。
<「test_3.gif」の場合>
test_3.gifはTEST_SITE.htmlより「1階層上のディレクトリ」に配置してありますので、「../」を使って指定します。
結果、「img src="../test_3.gif"」となります。
<「test_2.gif」の場合>
test_2.gifはTEST_SITE.htmlより「2階層上のディレクトリ」に配置してありますので、「../../」を使って指定します。
結果、「img src="../../test_2.gif"」となります。
<「test_1.gif」の場合>
test_1.gifはTEST_SITE.htmlより「3階層上のディレクトリ」に配置してありますので、「../../../」を使って指定します。
結果、「img src="../../../test_1.gif"」となります。
どうでしょう???お分かりいただけましたか???
このディレクトリ構造を知って、相対パスを理解していると、例えばサーバー（ドメイン）を変えたとしてもフォルダを全て
移動させるだけで作業がおわっちゃいます。
絶対パスを指定すると、サーバーが変わったらパスの全てを変更しなければならない事態になりかねません。
サイトを運営するだけでなく、PCソフトウェア構造も理解する上で基本となる重要な概念ですので、これを機に憶えてしまい
ましょう!!!
ここからJavascriptやCSSなどの外部ファイルの扱いや、PHP、CGI、Perl、C++まで幅広く派生していきます。
掲示板
