08年6月4日追記：
コレの新しいの作りました。

11月7日追記：
contens.cssの56行と60行目の#contents部分でスペルミスしておました。
ごめんなさい...

現在は修正版になっております。
修正後のcontents.css
---

SO905iがやば過ぎる件。JOGですよ！じょぐ！！！すげー待ってた。アナタを心から待っていた。

さて、一行駄文はお終い。本題です。
毎回新規サイトを作成する場合は、以前組んだのからコピって来て使うケースが多くて何かと面倒だと思っていたわけです。

んで、自分仕様のが欲しいと思ったので、仕事そっちのけで作ってみました。

以前からソレっぽいのは公開したり、なんやかんやだったんですが、11月2日Verって事で。
どうせ新規サイト作成の際にちょっとずつ見直しが入っていくので、すぐに古くなってしまう可能性が大きいです。はい。

コレはかなり社内向けというか、仕事で最初に使うのに使えそうな感じにしているので、incとかあったりもしますが、SSIとか使わない場合は不要です。

まぁ何はともあれ、以下よりDL出来ます。

ライセンスに関しては、そもそもHTMLやCSSには著作権が発生しないとかって読んだんで、煮るなり焼くなり自由に使っていただいて構いません。
商用ももちろん可。これでお金儲け出来るならむしろ教えて下さい。是非！

当たり前ですが、JavaScriptに関してはそれぞれのライセンスにしたがって下さい。
すべてMITとPublic Domainなので、大抵の使用に関しては問題ない筈ですが、念のため確認はして下さい。

んでは、構成とか説明っぽいことを。

ディレクトリ構成

図：ディレクトリ構成ディレクトリ構成はこんな感じになっております。はい。

気に入らない方は好きに変えて下さい。

ボクの場合での説明をしますと、仕事の場合、特別指定されない限りは常にこの構成でやってます。

imgディレクトリに関しては、ページに応じて増やしていきます。「top」「product」「company」とかっていう感じで。

「share」は、共通で使用する画像とかを突っ込んでます。ボクは使わないけど、「common」とかってのも多いかも。

あとは、CSS、JS、インクルードがそれぞれある感じです。
フラッシュがいっぱいある場合は、swfディレクトリを作成したり。
トップ一つだったらルートにそのまま置いたり、imgディレクトリに入れたりと状況によって若干違います。

XHTMLテンプレート

  • XML宣言無し
  • 文字コード：utf-8
  • DOCTYPE：XHTML 1.0 Strict

ざっとこんな感じです。もちろん気に入らないヶ所は自由に変えて下さい。
ソースまるっと載せると長いので、部分部分のみ。

head要素内

<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>SiteTitle</title>
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="content-script-type" content="text/javascript" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="mailto:hoge&#64;example.com" rev="made" />
<link href="/index.html" rel="index" />
<link href="/img/share/favicon.png" rel="icon" type="image/png" />
<link href="/img/share/favicon.ico" rel="shortcut icon" />
<link href="./css/import.css" rel="stylesheet" type="text/css" media="all" />
<script src="./js/jquery.js" type="text/javascript"></script>
<script src="./js/interface.js" type="text/javascript"></script>
<script src="./js/thickbox.js" type="text/javascript"></script>
<script src="./js/yuga.js" type="text/javascript"></script>
<script src="./js/autoTab.js" type="text/javascript"></script>
<script src="./js/heightLine.js" type="text/javascript"></script>
<link href="/rss/index.xml" rel="alternate" type="application/rss+xml" title="RSS 2.0" />
</head>

title要素を出来るだけ上部に書くのは、気持ちの問題ですが、ボクはcharsetの直後に書いてます。
その後はmetaやらのお決まり関係をずらーっと。
faviconも指定して上げると良さ毛です。この辺りブランドイメージやら色々活用の場はあるので、デザイナーには必ず作ってもらうようにするといいっすね。

CSSは、インポート用のimport.cssだけ読み込ませて、そこから～っていう感じです。
あまりにもデザインが違う同一サイトでも無い限り、ソースを書き換えるってことはしません。

CSSの中身に関しては後ほど。

JSは、ここ最近主に使ってるのを突っ込んでます。
後から書くより、消す方が楽なので書いてありますが、JSとか使わないって人は消しちゃって下さい。

最後に、RSS。フィード配信してないサイトには当然不要です。

あと、パスの書き方に関しては、相対で書いたり絶対で書いてますが、その辺りは配布用なのでっていう理由で変えてます。
（ローカルで確認できない！ってなってもアレなので。）

body要素内

まず、body要素にidがyourDomainって感じで振られてます。
コレは、ユーザースタイルシートとかそういうので使いたいって人が使うために有るので、ご自分のドメイン名などに変えてください。ウチの場合だとしたら「happyLife-com」のように。
もち、全ページで固定のidになります。

classも「indexBody」が指定されてます。
トップページってのは、何かと特殊な場合が多いので、ソレ以降のページでは別のclassを指定して振り分ける感じです。

<body id="yourDomainName" class="indexBody">

んで、body直下はこんな感じに。

<div id="page">
　
<span id="navSkip">
<a href="#main" tabindex="1" title="本文へジャンプ">
<img src="./img/share/skip.gif" alt="本文へジャンプ" width="1" height="1" />
</a>
</span>

全体を囲っているdiv要素と、スクリーンリーダー用のナビゲーションスキップなんかが有ります。
idは、#pageと#navSkipが指定されてます。

ヘッダー部分

ヘッダーで使っているidは、以下の3つ。

  • #header
  • #guideNav
  • #gNav

コピペしやすい用に書いてるって感じです。

<div id="header">
<h1>サイトタイトル</h1>
<ul id="guideNav">
<li><a href="/">ガイドナビ</a></li>
</ul>
<ul id="gNav">
<li><a href="/">ナビ</a></li>
</ul>
<!-- / #header --></div>

2カラムな部分

ヘッダーで使っているid、classは、以下。

  • #contents
  • #main
  • #sub
  • .pageTop

ページトップはデザイン次第なんで、必ずココとは限りませんが比較的多かったパターンからココにしてます。

<div id="contents">
 
<div id="main">
<p>メイン</p>
<!-- / #main --></div>
 
<div id="sub">
<ul>
<li>サブ</li>
</ul>
<!-- / #sub --></div>
 
<p class="pageTop"><a href="#page" title="このページの先頭へ">ページトップへ</a></p>
 
<!-- / #contents --></div>

フッター部分

使っているid及びclassは、#footerとcopyrightの.copyになります。

<div id="footer">
<ul>
<li><a href="/">フッターナビ</a></li>
</ul>
<p class="copy">&copy;</p>
<!-- / #footer --></div>

copyrightはaddress要素で昔はマークアップしておりましたが、addressとは違う気がしたので今はp要素です。
この辺り、考え方次第だと思うので、addressだろって人は変更して下さい。

CSS

有る程度察しは付く感じのファイル名だと思うので、説明は簡単に。
分割に関してはどうするか悩んだのですが、最近はこの分割方法が好きなのです。えぇ。

全てのCSSファイルには敢えて日本語を入れてます。
@charsetでutf-8とかを指定しても、日本語というか2バイト文字が無い場合、テキストエディタはShift-JISで開いてしまうのでソレを防ぐ為です。

コレが原因で後から日本語でコメントとか入れて、気づかずに@charsetで指定している文字コードとちゃうって事があったので。

import.css

全部のCSSファイルをこっから読み込んでます。
thickbox.cssやら、印刷用のprint.cssとかもここから。

default.css

これはデフォルトのスタイルをリセットしたり、リンクカラーの基本色の指定をしております。
あと、bodyの基本っぽい指定。

header.css、footer.css

#headerと#footer用です。
コレは、何も指定してないです。

こういった、一度作ってしまったら変更する可能性が殆ど無いってのを基準で分割しているんです。

contents.css

一番行数が増えるだろうファイルがコレです。
ココに、#contents、#main、#subとかをガシガシ書いて行くのです。

一応、clearfixも書いてあるので、使い回せばいい感じ。

print.css

そのまんま印刷用です。
中身は以下のようになっちょります。

@media print {
 
}

印刷用が必要な場合はココにまとめていく感じ。

thickbox.css

thickboxのCSSがそのまんまです。
JS使わない場合は不要です。

imgディレクトリ

  • skip.gifは、ナビゲーションスキップ用の画像で言うなればスペーサーです。
  • loadingAnimation.gifは、thickbox用なので、使わない場合不要です。

DL

最後に

ざっとこんな感じでございます。
最初どーしたらいいんか分からないって人は使えるかも知れません。

一つの参考資料としてもどうぞ。

そして、こんなタイトルを付けたけど全く知らない人は何の事やらかもわかりませんが、以下のサイトでダウンロード出来るのとやってることは同じで、中身がHappyLifeの中の人風味という感じです。

ぱ、パクった訳じゃないんだけどなぁ。。。
しかし、思ったよりディレクトリ構成は似てるかもです。