サイトのディレクトリ構成について質問です。
よく「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ベストアンサー
- 回答日時:
「チーム内の」ポリシーならば止めないのですが、個人的なものでしたら変えた方がいいかもしれません。
大規模なサイトなのでしたらどこかに置いたサーバに大勢でアクセスして編集している状況ですよね?
たとえば
index.html
┣━axel.html
┗━black.html
┗━┳charge.html
┗dragon.html
こんな構成だとします(名前は適当です)。
補足から推察するにおそらくcssもaxel.cssやblack.cssになっているようですし、やはりまとまっているほうが分かりやすいのではないでしょうか。
すべての画像がひとまとめなのが嫌でしたら(まあ私もそれは落ち着きませんが)
images/axel/
/black/
のようにディレクトリを用意すればいいと思います。
極端な話、将来的に「イメージ担当」「CSS担当」なんていうポジションができる可能性もあるわけで、その時担当者としてはやはり一か所にまとまってほしいと考えると思います。せっかくの大規模な運営(うらやましい)なのですから、今のうちに苦労して後の利便を買ってみては?
#3さんの言うとおり「common」というのがおさまりが悪ければ別な名前でも何も問題はありませんし。
hiro_gtさん、ありがとうございます。
>大規模なサイトなのでしたらどこかに置いた
>サーバに大勢でアクセスして編集している状況ですよね?
その通りです。常に複数人がつついている状態です。
>補足から推察するにおそらくcssもaxel.cssやblack.cssに
>なっているようですし、やはりまとまっているほうが
>分かりやすいのではないでしょうか。
ページ毎にcssを用意している訳ではありません。
下記のような感じです。
reset.css ※初期化用
layout.css ※全体のレイアウト
page.css ※トップ、アクセス、、、
>せっかくの大規模な運営(うらやましい)なのですから、
>今のうちに苦労して後の利便を買ってみては?
仰る通りだと思います。
自分は末端オペレーターなので、
限界があるのかもしれませんが、
できる限りのことをしてみます。
そのためにはまずは勉強ですね。
また色々と質問させていただくと思います。
宜しくお願いします。
No.3
- 回答日時:
ふつうに、階層が深くなるとめんどうくさいので
単純に一階層で分けているだけです。
えぇ、Aタグも全部手書きでやってきたので(苦笑)
実質cssファイルもひとつしか使っていない状態ですし
分類する程、使い分けしやすくなり…管理しやすい場合もあります。
逆に、使い分けの必要がないファイルを、振り分ける必要はありません。
commonという名前に違和感があるなら
そのディレクトリ名を適切に改めれば済むことだと思います。
個人の場合は。
かりに、企業/団体のサイト作成であれば
その分類ルールを明文化したうえで
管理者が変わっても混乱がおきないよう配慮すべきだとは思います。
この回答への補足
お礼に入れ忘れてしまいましたが。。。
>commonという名前に違和感があるなら
>そのディレクトリ名を適切に改めれば済むことだと思います。
これもかなり参考になりました。
vaiduryaさん、ありがとうございます。
サイトによって、構成を使い分ける感じですね。
外注先にはかなりcssを分類してこられるところがあります。
font.css format.css list.css...等。
どこに記述してあるか迷子になる、と同時に読み込みに時間がかかるような気がします。
大規模サイトの場合はまず、ルール作り、ですね。
(vaiduryaさんがおっしゃる「明文化」ですね。)
No.2
- 回答日時:
#1さんと同じく、画像、cssはそれぞれ別々のフォルダに区切っているのが一般的だと思う。
特にさほど大きくないサイトならなお更で。
ただし、図1のような仕分けの案件も携わったことはあるけど、各ページごとに画像を分けるなんて聞いたことがない。
どこからその知識を仕入れてきたのか知りたいですな。
もちろん絶対ないってこともないだろうけど。
各ページごとのcssっていうのもいかがなものかと。
main.cssから
common.css
header.css
footer.css
tagu.css
block.css
print.css
を読み込むような感じが今の主流じゃないでしょうか。
あとはブラウザーで読み込むcssファイルをちょっと変えるってとこくらいで。
この回答への補足
armstrong-usさんありがとうございます。
前後してしまいましたが、各ページごとに画像を分けているのは、#1さんへの補足の通りです。
各ページ毎に個別CSSを読み込ませるを読み込ませるということでしょうか。
css/
common.css
header.css
.
.
.
top.css
access.css...(←ルートにあるcssディレクトリ、もしくは各ページに格納してページ毎にリンク)
No.1
- 回答日時:
個人的にはなぜ画像をページごとに分けたいのかとても不思議に感じます。
「すっきりと分かりやすい構成」ならばまとめて置いておく方がいいと私は思うのですが、もしよければその点補足していただけませんか?私は画像とcssはルートに「img」「css」ディレクトリを置いてすべて格納していますので「common」は使用していません。というか使っているサイトを(少なくともソースを見たことがある中では)一度も見たことがないのですが…
この回答への補足
hiro_gtさん、回答ありがとうございます。
「images」を各ディレクトリ毎に分けるという条件を加えたのは、下記の通りです。
■大規模のサイトで様々なコンテンツを抱えている。
■大勢の人数がサイト編集に関わっている。
誰もがすぐに画像の所在がわかるように、各ページのディレクト内に画像を置く、というポリシーになってしまっています。
全体を整備することから始めなくてはいけないのはわかっているのですが、ページが枝分かれしすぎて追いつかないのが実情です。
大規模サイトになると、すべての画像をルートに置くのは難しく・・・。
そんな理由で「できれば・・・条件」をつけた次第です。
個人のサイトであれば、
恐らくhiro_gtさんがおっしゃっておられるように下記のような感じでimagesをルートにまとめたいところです。
(違って解釈していたらすみません。)
images
/common/
/top/
/access/
/recruit/
...
質問自体は特に大規模サイト、小規模サイト、オフィシャル、プライベート、特にどちらを意識したものではないので、ややこしければ、「条件」の箇所を無視してください。
自分はこんな理由で、こんな構成にしてるよ、みたいなのを教えいただけると嬉しく思います。
「common」ディレクトリ、ですが、「正しいコーディング」を売りにしている制作会社さんの制作実例を見ると、使用されていることが多かったりします。そんなところにどんなポリシーで、どんなメリットがあって「common」を使用しているかを聞いてみたくなったのです。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS CSSでサイトの背景に画像を組み込みたいのですが反映されません 2 2022/11/22 16:21
- HTML・CSS 【HTML】【CSS】【Swiper】 元の画像は横1200×縦600なのですが、実際のサイト上に反 5 2022/07/16 13:57
- HTML・CSS Dreamweaver のテンプレートでの相対パスの設定について 2 2023/06/13 17:28
- ホームページ作成・プログラミング ホームページ作成について。「ワードプレスではありません」。 3 2023/08/13 14:44
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS HTMLとCSSコードを教えてください 1 2022/04/27 09:47
- HTML・CSS HTMLとCSSによるWebページ生成について。この絵で「ochawan」の文字を枠全体の上から10 4 2023/02/28 23:17
- フリーソフト サイトで使用していない画像ファイルの削除ソフトを探しています。 3 2023/04/05 10:49
- HTML・CSS htmltとcssの連携をして画像縮小について 1 2022/11/15 20:32
- HTML・CSS HTMLを正しく表示させるには 2 2023/06/18 09:12
このQ&Aを見た人はこんなQ&Aも見ています
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
html とcssのリンクがうまくい...
-
cssで、ボタンのテキスト部分を...
-
[Dreamweaver8]テンプレートに...
-
cssファイルを階層の異なるHTML...
-
ブラウザによる表示の違いについて
-
マイクロ(μ)の文字を半角で出...
-
教えてください。
-
outlook 文字を揃えたい。tab...
-
「MS Pゴシック」と同じ幅の...
-
EXCEL VBA 印刷プレビューダイ...
-
CSSを一部無効にしたい
-
ワードでゴシックの文字を太く...
-
エクセルVBAが中国のPCでは動か...
-
縦書きテキストボックスの表示"...
-
英語版OSでの遊明朝、游ゴシック
-
【スタイルシート】 半角と全角...
-
ペイント3Dのテキストサイズ変更
-
font-family の記載方法
-
MsgBoxについて
-
ASP VBscript でメッセージボッ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
cssファイルの名称付け
-
jspにcssを反映させるには
-
ディレクトリ構成【「common」...
-
サイトを作る時のcssファイルは...
-
HTMLの CSSのファイルというの...
-
cssで、ボタンのテキスト部分を...
-
複数のhtmlで同じcssファイルを...
-
cssファイルを階層の異なるHTML...
-
cssが反映されません
-
一部のページにデフォルトCSSを...
-
WindowsとMacで違うCSSを読み込...
-
エクセルファイルにCSSを読み込...
-
定数の定義とかはできますか?
-
ブラウザでプレビューでCSSが反...
-
範囲指定印刷での位置(css)
-
ドキュメントルートより上の階...
-
スタイルシート(CSSスタイル)...
-
Dreamweaver のテンプレートで...
-
【CSS】スタイルやクラスがどの...
-
cssでiPhone SEで文字が小さす...
おすすめ情報