ディレクトリ構成【「common」を使いますか？】

質問

サイトのディレクトリ構成について質問です。
よく「common」ディレクトリを使用して前ページ共通のファイルを格納しているサイトをみかけますが、【図(1)】のようになっているものが多いように思います。
（色々なファイル名や整理、分割の仕方はあると思いますが、ここでは共通CSSをcommmon.css、各ページのCSSをpage.cssとしておきます。「アクセス」ページ（地図などを掲載しているページ）を加えてみました。）
しかし、page.cssは個別の設定であるため「common」の中に入っていることに違和感を覚えます。

次に「common」を使用しない場合ですが、こういった場合、ヘッダやフッタ等に使用する共通画像の置き場所に困ってしまいます。
例えば【図(2)】にすると、トップページの画像ディレクトリの中にcommon/共通画像が格納されていて気持ち悪い感じです。

皆さんどのようにディレクトリを整理しておられますか？
できるだけすっきりとわかりやすい構成にしたいのですが・・・。
（※条件：できれば各ページの画像は各ページのimagesディレクトリに入れたい。）
知恵をお貸しください！

【図(1)】
index.html ※トップページ
│
├common┬─css──┬─common.css ※サイト共通のCSS
│　　　　　│　　　　　　└─page.css
│　　　　　└─images ※サイト共通の画像
│
├images ※トップページ画像
│
│
└─ access┬─index.html
　　　　　　　　　└─images ※「アクセス」ページの画像

【図(2)】
index.html ※トップページ
│
├images　※トップページ画像
│　└─common ※サイト共通画像
│
├css ───┬─common.css ※サイト共通のCSS
│　　　　　　　└─page.css ※各ページのCSS
│
└─ access┬─index.html ※アクセスページ
　　　　　　　　└─images ※「アクセス」ページの画像

回答No.4

noname#49614 · ベストアンサー

「チーム内の」ポリシーならば止めないのですが、個人的なものでしたら変えた方がいいかもしれません。
大規模なサイトなのでしたらどこかに置いたサーバに大勢でアクセスして編集している状況ですよね？

たとえば
index.html
　┣━axel.html
　┗━black.html
　　　　┗━┳charge.html
　　　　　　┗dragon.html
こんな構成だとします(名前は適当です)。
補足から推察するにおそらくcssもaxel.cssやblack.cssになっているようですし、やはりまとまっているほうが分かりやすいのではないでしょうか。
すべての画像がひとまとめなのが嫌でしたら(まあ私もそれは落ち着きませんが)
images/axel/
/black/
のようにディレクトリを用意すればいいと思います。
極端な話、将来的に「イメージ担当」「CSS担当」なんていうポジションができる可能性もあるわけで、その時担当者としてはやはり一か所にまとまってほしいと考えると思います。せっかくの大規模な運営(うらやましい)なのですから、今のうちに苦労して後の利便を買ってみては？
＃３さんの言うとおり「common」というのがおさまりが悪ければ別な名前でも何も問題はありませんし。

お礼

hiro_gtさん、ありがとうございます。

>大規模なサイトなのでしたらどこかに置いた
>サーバに大勢でアクセスして編集している状況ですよね？
その通りです。常に複数人がつついている状態です。

＞補足から推察するにおそらくcssもaxel.cssやblack.cssに
＞なっているようですし、やはりまとまっているほうが
＞分かりやすいのではないでしょうか。
ページ毎にcssを用意している訳ではありません。

下記のような感じです。
reset.css ※初期化用
layout.css ※全体のレイアウト
page.css ※トップ、アクセス、、、

>せっかくの大規模な運営(うらやましい)なのですから、
>今のうちに苦労して後の利便を買ってみては？
仰る通りだと思います。
自分は末端オペレーターなので、
限界があるのかもしれませんが、
できる限りのことをしてみます。

そのためにはまずは勉強ですね。
また色々と質問させていただくと思います。

宜しくお願いします。

回答No.3

vaidurya

ふつうに、階層が深くなるとめんどうくさいので
単純に一階層で分けているだけです。
えぇ、Aタグも全部手書きでやってきたので(苦笑)
実質cssファイルもひとつしか使っていない状態ですし

分類する程、使い分けしやすくなり…管理しやすい場合もあります。
逆に、使い分けの必要がないファイルを、振り分ける必要はありません。

commonという名前に違和感があるなら
そのディレクトリ名を適切に改めれば済むことだと思います。

個人の場合は。

かりに、企業/団体のサイト作成であれば
その分類ルールを明文化したうえで
管理者が変わっても混乱がおきないよう配慮すべきだとは思います。

お礼

vaiduryaさん、ありがとうございます。
サイトによって、構成を使い分ける感じですね。

外注先にはかなりcssを分類してこられるところがあります。
font.css format.css list.css...等。
どこに記述してあるか迷子になる、と同時に読み込みに時間がかかるような気がします。
大規模サイトの場合はまず、ルール作り、ですね。
（vaiduryaさんがおっしゃる「明文化」ですね。）

補足

お礼に入れ忘れてしまいましたが。。。
＞commonという名前に違和感があるなら
＞そのディレクトリ名を適切に改めれば済むことだと思います。
これもかなり参考になりました。

回答No.2

armstrong-us

#1さんと同じく、画像、cssはそれぞれ別々のフォルダに区切っているのが一般的だと思う。
特にさほど大きくないサイトならなお更で。

ただし、図１のような仕分けの案件も携わったことはあるけど、各ページごとに画像を分けるなんて聞いたことがない。
どこからその知識を仕入れてきたのか知りたいですな。
もちろん絶対ないってこともないだろうけど。

各ページごとのcssっていうのもいかがなものかと。
main.cssから
　common.css
　header.css
　footer.css
　tagu.css
　block.css
　print.css
を読み込むような感じが今の主流じゃないでしょうか。
あとはブラウザーで読み込むcssファイルをちょっと変えるってとこくらいで。

補足

armstrong-usさんありがとうございます。
前後してしまいましたが、各ページごとに画像を分けているのは、＃１さんへの補足の通りです。

各ページ毎に個別CSSを読み込ませるを読み込ませるということでしょうか。
css/
common.css
header.css
.
.
.
top.css
access.css...（←ルートにあるcssディレクトリ、もしくは各ページに格納してページ毎にリンク）

回答No.1

noname#49614

個人的にはなぜ画像をページごとに分けたいのかとても不思議に感じます。「すっきりと分かりやすい構成」ならばまとめて置いておく方がいいと私は思うのですが、もしよければその点補足していただけませんか？

私は画像とcssはルートに「img」「css」ディレクトリを置いてすべて格納していますので「common」は使用していません。というか使っているサイトを(少なくともソースを見たことがある中では)一度も見たことがないのですが…

補足

hiro_gtさん、回答ありがとうございます。
「images」を各ディレクトリ毎に分けるという条件を加えたのは、下記の通りです。

■大規模のサイトで様々なコンテンツを抱えている。
■大勢の人数がサイト編集に関わっている。

誰もがすぐに画像の所在がわかるように、各ページのディレクト内に画像を置く、というポリシーになってしまっています。
全体を整備することから始めなくてはいけないのはわかっているのですが、ページが枝分かれしすぎて追いつかないのが実情です。
大規模サイトになると、すべての画像をルートに置くのは難しく・・・。
そんな理由で「できれば・・・条件」をつけた次第です。

個人のサイトであれば、
恐らくhiro_gtさんがおっしゃっておられるように下記のような感じでimagesをルートにまとめたいところです。
（違って解釈していたらすみません。）
images
/common/
/top/
/access/
/recruit/
...

質問自体は特に大規模サイト、小規模サイト、オフィシャル、プライベート、特にどちらを意識したものではないので、ややこしければ、「条件」の箇所を無視してください。
自分はこんな理由で、こんな構成にしてるよ、みたいなのを教えいただけると嬉しく思います。

「common」ディレクトリ、ですが、「正しいコーディング」を売りにしている制作会社さんの制作実例を見ると、使用されていることが多かったりします。そんなところにどんなポリシーで、どんなメリットがあって「common」を使用しているかを聞いてみたくなったのです。