スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
公開: --年--月--日, カテゴリ: スポンサー広告

Webサイト制作におけるディレクトリ構成について考えてみた

最近Webサイト制作に興味をもち始めて、それに関する情報を集めたり実際にいろいろなサイトを見たりしています。まだローカルでですが、いろいろと公開されているJavaScriptを試したり、CSSの書き方を勉強したりしています(CSSはこのブログでもけっこう頻繁に変更をして試していますが)。

今はページを作ることそのものに面白さを見出しているので、実際にWebサイトを作るか(公開するか)どうかは良く分かりませんが、仮に公開するとしてローカルでページを作っているときにあれこれと悩んでいることがあります。それがディレクトリの構成についてです。

現在のディレクトリ構成

今作っているものの階層構成を書出すと下記のとおりになります。


_root/
├ index.html
├ sitemap.html
├ Sitemap.xml
├ error-404.html
├ robots.txt
├ .htaccess
├ image/
│  ├ stracture/
│  │  └ header.jpg
│  └ entry/
├ css/
│  ├ common/
│  │  └ reset.css
│  └ entry/
├ script/
│  ├ library/
│  │  └ jquery-142.js
│  ├ common/
│  └ entry/
└ content/
  ├ web/
  │  └ demo/
  └ psp/
    ├ ctf-news/
    ├ rcofile/
    └ rcomage/

image

画像ファイルは全てこのディレクトリ以下に保存します。structure以下には主にページを構成するパーツや装飾(ヘッダーやフッターなど)に関連する画像を、entryには各ページ固有の画像を保存しておく。その他は適宜ディレクトリを追加していきます。

css

スタイルシートを一括して保存しておきます。commonには共通するスタイル(リセットやベースとなるもの)を、entryには各ページ固有のものを。これは色々試してみて他に管理しやすい方法があれば変更します。

script

JavaScriptファイルを一括して保存しておきます。それ以下のディレクトリは無しにして一括にするかもしれません。

content

これ以下にコンテンツとなるページを保存していきます。メインカテゴリ/サブカテゴリという順に2階層下までをディレクトリとしそれ以下にhtmlファイルを保存します。この構成はいろんなサイトの構成を見たりディレクトリに関する解説を読んだりして、部分的に真似しながら自分で使いやすいように変更したものです。

階層を浅くしてごちゃ混ぜにしてしまうと後々のメンテナンスが非常にやりにくくなると思います。必要になったときに追加・変更するやり方だとデッドリンクを増やすことにも繋がるので、できるだけしっかりした構成を考えておいた方がいいのではないでしょうか。ですがあまりに細分化して階層を深くすると迷路のようになってしまうので、階層の深さは大体これくらいが丁度いいかなと感じています。

今悩んでいるのは画像やCSS, JavaScriptなどを今のようにルート直下で一括管理するか、各階層ごとに同名のディレクトリを作成して分散させるかというところで、ルート直下での管理はファイルが増えてくるとごちゃごちゃして分かりにくくなるのでしょうか。cssやjsファイルはそうでもないでしょうが、画像はページが増えるにつれ点数が非常に多くなることが考えられるのでimageフォルダのみ複数配置するかどうか。

頭の中で考えるだけではまとまらなかったので書出してみましたが、こうして書出してみてもやっぱりまとまりませんね。もう少し内容を増やしてみて実感するしかなさそうです。しかし、ローカルでやるのは、こういうのを気兼ねなく試せるのでいいですね。

ではでは、また。

公開: 2010年10月20日, カテゴリ: Web