パスの表し方

サイトを作るとなるとたくさんのファイルを扱うことになります。
html。
CSS。
画像。
javascriptファイル。
他。

超小規模なサイトならともかくとして、そこそこの規模のものを複数人で作ろうと思ったら整理整頓は必要です。
事前にチームで話し合うなりなんなりして、何をどこに置くのかなど決めておきましょう。

え?
個人作業だからチームじゃない?
整理しとかないとそれを引き継ぐ後輩が泣くよ。

というわけで整理整頓をするわけですが、その道具はフォルダです。あなたのパソコンのドキュメントフォルダ、きれいですか?
まさかデスクトップに大量のファイルを未整理で置くなんてことはしてませんよね?ちゃんとフォルダに分類してきれいに見やすくしていますよね?

フォルダにファイルを入れると画像・リンク・CSSを設置する時に一手間いるので、ここの話はしっかり頭に入れておきましょう。
まずその前に、サーバのディレクトリ構造から説明しましょう。

サーバのディレクトリ構造

ディレクトリとは 【 directory 】 〔 ディレクトリー 〕 - 意味/解説/説明/定義 : IT用語辞典
……えー、要するに、ディレクトリというのはフォルダです。フォルダ、わかりますよね?あなたのパソコンのこいつです。

フォルダ画像:
FolderOpened_Yellow icons, free icons in Base Software, (Icon Search Engine)
(提供Metro Icons, Seven/Vista Icons, XAML Icons, Stock Icons and Custom Icon Design Service)
macフォルダアイコンも探しましたが1分で見つかりませんでした。根性のない私をお許しくださいませ

サーバもパソコンのはしくれなので、フォルd……ディレクトリを使ってファイルを整理整頓できます。できますっていうかします。しなければならないです。
とはいってもある程度置くところは決まっているので、確認しましょう。

どんなサーバを借りているかにもよるのですが……
レンタルサーバなら、借りている人達1人1人に与えられた専用スペースがあります。もちろん管理している側が、「自分のところしか覗いちゃだめ!」と制限しています。なので、作ったファイルを置くのは当然自分のスペースの中です。
たぶん、abcという名前で借りていれば/home/abc/が与えられた専用スペースになっていると思います。homeディレクトリの中にabcという自分専用のディレクトリがある感じです。
見づらくてゴメンネ!
当サイトの専用スペース「terminal-end」ディレクトリが「home」ディレクトリの中に入っているのがお分かりでしょうか。群青色で隠している部分は、同じサーバを借りている見ず知らずの人達です。多分この広いインターネットのどこかで同じくサイトを運営している方々でしょう。ディレクトリ名はわかってしまいますが、中身は覗けません。
とんでもなく重たい物を置くなどの迷惑行為をしない限りは、この与えられたディレクトリの中で自由にやりくりできるわけです(借りてるサーバの約束事はちゃんと確認しておきましょう。責任は取りません。)

じゃあ、この/home/abcの中にindex.htmlを置いたら皆は見てくれるのかというと、見れません。
/home/abcの中には、外から見ることが出来る部分と見れない部分があります。見てほしいものはたぶん/home/abc/www、つまり「www」ディレクトリに置くと良いはずです。(借りてるサーバの仕様をご確認ください。public_htmlという名前になっている場合もあります)
見れないもの、というか、見てほしくないものをwwwじゃない所に置きます。ちなみに見てほしくないものというのはBASIC認証のパスワードとかです。BASIC認証については……気が向いたら説明しようかな。簡単なサイトを作っているうちはそこまでお世話にならないと思います。
見づらくてゴメンネ!第2弾
プライバシー保護のため伏せますが、私はwww(一番下に見える……かな?)の外にメール関連のものであるとか、パスワードであるとか、なんかそういう、外からブラウザで覗くものではないものをちゃんと整理整頓して置いています。

見てもらいたいもの、htmlにcssに画像は全部wwwの中に置く、という理解で大丈夫だと思います。

パスの指定

いよいよ、本題、パスの指定です。
サイトを作るというとやはりメインでいじるのはhtmlファイルです。ですがこれ1つでちゃんとしたサイトはできません。ページ1つ新しく作るのにはhtmlファイルを新規作成しなければなりませんし、リンクをクリックしてそのページに飛ばす、というのはそのhtmlファイルに飛ばす、という意味です。CSSファイルとリンクさせたり、画像を表示させるにもどの画像を使うのか指定したりしないといけません。

例として次のディレクトリ構成を考えてみます。実際はこんな置き方をしないと思いますが……
メモ帳w
「www」ディレクトリの中に「aa1」ディレクトリと「hoge0.html」ファイルと「hoge.css」ファイルが、
「aa1」ディレクトリの中に「aa2」ディレクトリと「hoge1.html」ファイルと「hoge.png」ファイルが、
「aa2」ディレクトリの中に「aa3」ディレクトリと「hoge2.html」ファイルと「hoge.js」ファイルが、
「aa3」ディレクトリの中に「hoge3.html」ファイルと「hoge.css」ファイルが入っています。

なお、当terminal-end.netのwwwディレクトリに上のように置いた場合、次のようなURLになります。
http://terminal-end.net/hoge0.html
http://terminal-end.net/hoge.css
http://terminal-end.net/aa1/hoge1.html
http://terminal-end.net/aa1/hoge.png
http://terminal-end.net/aa1/aa2/hoge2.html
http://terminal-end.net/aa1/aa2/hoge.js
http://terminal-end.net/aa1/aa2/aa3/hoge3.html
http://terminal-end.net/aa1/aa2/aa3/hoge.png
ええと、要するに、ディレクトリ構成がURLに反映されるということです!
URLはなるべく短いもの、読んで何となく意味が分かるものがいいですよね。実際にサイトを作るときはどういったページにどんなURLを割り当てるか、しっかり考える必要がありますね。

では、aa1ディレクトリの中にいるhoge1.htmlくんを主人公に考えてみましょう。

hoge1.htmlくんが同じ「aa1」ディレクトリの中にいるファイルhoge.pngを表示させたい場合は、単純にファイル名を指定すればOKです。aa1の中にいるよ、と言ってあげる必要はありません。



/*背景画像の指定*/
.box{
	background:url(hoge.png);
}

これは、「www」ディレクトリの中のhoge0.htmlがhoge.cssを指名するときも、「aa2」ディレクトリの中のhoge2.htmlがhoge.jsを指名するときも同じです。
同じディレクトリ内のファイルを指すときはファイル名だけを書くのです。

では、hoge1.htmlくんが「aa2」ディレクトリや「aa3」ディレクトリの中のファイルを指名したいときはどうすればよいでしょうか。
htmlファイルにリンクをはりたいとか、js・cssファイルを読み込みたいとか……
その時は、hoge1.htmlくんから見たファイルの位置を書きます。


リンクだよ


hoge1.htmlくんから見て、hoge2.html・hoge.jsたちは「aa2」ディレクトリを開けた中にいるので、aa2の中にいるファイルだよ!という意味を込めて「aa2/」をファイル名の前につけています。
「aa3」ディレクトリの中のファイル達を指したい場合は、もう1つディレクトリを開けないとhoge1.htmlくんからは到達できないので、そのように書きます。


リンクだよ


「aa2」ディレクトリの中のさらに「aa3」ディレクトリの中のファイルだよ!という意味で「aa2/aa3/」とファイル名につけます。
ディレクトリの中にあるファイルを指したいときは、自分自身から辿っていってどのディレクトリを開ければ目的のファイルにたどり着くかを書けばよいのです。

逆に、hoge1.htmlくんが、「www」ディレクトリにいるhoge0.htmlやhoge.cssを指したい場合はどうすればよいでしょうか。今自分のいる「aa1」ディレクトリを脱出しないといけませんね。
1つディレクトリを戻ればよい、上に上がればよいので、「戻ってくれ!」の合図を1つつけます。


リンクだよ


hoge2.htmlくんが「www」ディレクトリのhoge0.html・hoge.cssを指名するときは「../../hoge0.html」「../../hoge.css」になります。「aa2」ディレクトリとさらに「aa1」ディレクトリの計2つのディレクトリを脱出しないと目的のファイルのあるところにたどり着けないので「../」が2つ必要です。
上の階層にいるファイルを指すときは、ディレクトリを戻った数だけ「../」をつけなければなりません。

実際のディレクトリ構造(例)

他の人のディレクトリ構成を覗いたことはあまりないので一般論と言っていいのかはわかりませんが……

たぶん、たぶん、ファイルの種類別に分かれることになると思います。
htmlファイルはhtmlファイルで。(URLのつけかたで更にディレクトリで分類します)
cssファイルはcssファイルで。(数が少なければ「www」ディレクトリのすぐ下でいいと思います)
JavascriptファイルはJavascriptファイルで。
画像ファイルは画像ファイルで。

さて問題です。「aa3」ディレクトリにいるaa3.htmlくんは、main.cssやjquery.jsやlogo.pngやbackground.pngが欲しいなあと考えました。
どうやってパスを書けばいいでしょうか。

こたえ。
aa3.htmlくんから目的のファイルに到達するには、
「aa3」ディレクトリを脱出し、
「aa2」ディレクトリを脱出し、
「aa1」ディレクトリを脱出し、
「css」「js」「img」ディレクトリを開ければよいですね。







.box{
	background:url(../../../img/background.png);
}

必要なだけ戻って、必要なディレクトリを必要なだけ開ける感じでパスを書いてください。

で。ついでに。
見てのとおり、やけにindex.htmlが置いてありますね。種類別とか言っておきながらindex.htmlはcssにもjsにもimgにも紛れ込んでいます。
結論から言うと、すべてのディレクトリにindexファイルを置きましょう
htmlファイルをまとめている「aa1」「bb1」だけでなく、「css」「js」「img」ディレクトリにも置かなければなりません。
拡張子はhtmlでなくてもいいですが、何でもいいわけでもありません。サーバの設定にもよるので調べてください。どのサーバでもindex.htmlなら使えると思うのでとりあえずコイツを置いておきましょう。中身はまっさら、何も書いていない状態でよいです。まあ、htmlファイルを置いているディレクトリなら何かしらのコンテンツのページとしてindex.htmlは使っておくべきだと思いますけど。

たとえばwww/aa1/aa2にindexファイルが何もなかったとしましょう。
http://あなたのサイト/aa1/aa2/にアクセスしたとき、「aa2」ディレクトリの中身が丸見えになってしまいます。しかもそこには「階層を一つ戻る(parent directory)」というリンクがあって、「aa1」ディレクトリにアクセスすることができ、ここにもindex.htmlがないとやっぱりディレクトリの中身が丸見えです。indexファイルを置いてさえいれば、ディレクトリにアクセスしたときに一覧ではなくそのindexファイルが表示されます。

ナイショのファイルとかが黙って置いてあっても、一覧があっては辿れちゃいますよね。セキュリティ上の都合でヤバイってことです。
サーバの中身は外の人には内緒にしておきましょうネ。

まあ、フツーのひとだったら、「http://あなたのサイト/aa1/aa2/」という「aa2」ディレクトリへのURLは、リンクがなければアクセスしないんですけどね。
たとえば、「http://あなたのサイト/aa1/aa2/aa2.html」というURLを見ると「http://あなたのサイト/aa1/aa2/」とURL欄に直打ちしてまでディレクトリにアクセスしたくなる病気の人がいるんです、世の中には。たとえば私です。
いや、あの、嫌がらせじゃないんです……特に古いサイトだとちゃんとリンクが貼ってなくて、「このサイトのトップページはどこだろう」「この記事の目次があるページはどこだろう」と言ってURLのおしりをちょっと削って別ページにたどり着こうと試みるんです……で、たまにディレクトリの中身が丸見えなサイトさんを発見しちゃう、と。

新しくディレクトリを作ったら即座にindex.htmlを置く、というのを心がけてくださいね!
さくらサーバだと、
コントロールパネル>ファイルマネージャー
でファイルマネージャーを開き、設定したいディレクトリの場所で
表示アドレスへの操作>アクセス設定>indexファイル
でindexファイルの名前(拡張子)を設定したり、indexファイルがない時にディレクトリ内のファイル一覧を表示するかしないかを設定したりできます。手っ取り早いしまとめて設定できるしindexファイルを置き忘れても大丈夫だしオススメ。