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@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">©</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の中の人風味という感じです。
ぱ、パクった訳じゃないんだけどなぁ。。。
しかし、思ったよりディレクトリ構成は似てるかもです。
- 各種SBMに追加
-
Track Back [2]
みくみく菌にご用心♪
新規に間単、短時間にサイト作ろう思ったとき使ってみよう...
by 蛇口をひねるとニュースが出てkita｜2007年11月02日（金）
塩漬けになっていた”ぬかみそCSS”を揉み揉み
今や多くのHTMLコーダーの皆さんが、新規でサイトを作る際に各ブラウザが持っているデフォルトのスタイルをリセットしたり基本的なスタイルの設定をする、いわゆ...
by 悩んデルタール人の部屋｜2008年05月18日（日）
comment [21]
1 - kennsu さん
エ、エントリーの中で紹介されてもうれしくなんてないんだからっ////
URL｜2007年11月 2日 09:35
2 - hirasawa さん
> kennsu さん
しょ、紹介したつもりなんて無いんだからっ！
2007年11月 2日 09:54
3 - 3panda さん
こんにちは、いつも拝見させていただいてます。
3pandaと申します。
すこし記事内容と外れるのですが
以前より悩んでいたものが偶然記事に
ありましたのでご意見をいただければ
と思います。
/*------この部分です。---*/
#guideNav
#gNav
/*----------------------*/
上記のID名についてです。
「guideNav」は「guide」と「Nav」を
見やすくする為に「Nav」が大文字にされている
と思うのですが、これはXhtmlのルール上
問題にならないのでしょうか？
私も読みやすくなるので上記のようにしたいと
思いつつ半角英数字をルール付けられているように
思うので（あさはかな知識ですいません）全部
半角英数字にしています。
「CSS HappyLife」さんではルールとしてそれを
無視してるのでしょうか？
それともXhtmlでもその表記は問題ないのでしょか？
本題とそれてしまいますがご意見をいただけたら幸いでございます。
URL｜2007年11月 2日 15:33
4 - hirasawa さん
> 3pandaさん
XHTMLはタグを全て小文字で表記するようになってますが、id名やらclass名を大文字で表記することは問題ないです。
ただ、HTMLからXHTMLに移行したばかりだと、その辺りで混乱してしまう可能性があるから、サイトによってはとりあえず全部小文字で書いておくべきとかってあるかも知れません。
この辺りとか参考になるかと思います。
http://www.kanzaki.com/docs/html/xhtml1.html
2007年11月 2日 15:49
5 - 3pand さん
>平澤 隆 さん
ご意見、ありがとうございます。
浅はかな知識で非常に申し訳ありませんでした。
ここしばらくの悩みが解決されました。
（＾＾）
そしてもっと勉強しようと思います！！
ありがとうございます。
URL｜2007年11月 2日 17:35
6 - ゆーいち さん
img,embedなどにvertical-alignを指定しておく所とかも、意外とテンプレートは似たような感じに落ち着くんだなぁ…と改めて感心しました。それぞれの思考や個性が出たりするのが面白いですね。
ところで“本文へジャンプ”のリンクをspan要素で囲っているのは何か意図があるのでしょうか？こういうのは内容によってはパラグラフとかリストとかでも良いのかなー…？と思ったんですけれども…それは変ですかね？
個人的にspan要素を使う機会がない物で…
URL｜2007年11月 2日 21:45
7 - hirasawa さん
>ゆーいちさん
似つつも、過去の経験などから自分なりの答えを出していくから違ってくるんでしょうね。
まぁ理想としては、そういうのの基準がビシッと有るべきなんでしょうけど。。。
本文へジャンプのspan要素に関しては、必要な人にとっては必要な機能を与え、不要な人にとっては意味を与えないように。
といったトコロでspanっていう要素としても弱い（だろう）要素にしてます。
pとかulとかでも良いかと思いますが、意味として強すぎるかなと思ってます。
他の理由としては、検索でも「本文へジャンプ」の位置ってかなり良い位置なので、ガンガン引っかかってしまうっていうのを少しでも弱めるためにspan要素やimg要素にしてます。
2007年11月 3日 01:37
8 - たくや さん
僕自身、HappyLifeさんの記事も、STOPN' LISTENさんの記事も初めて拝見させていただきましたが、自分の仕様にも非常に似ていたので驚きました。
WEB技術に限っては我流の部分が多いと思うのですが、「効率化」を求めていくと、行き着くところは似てくるのですね。
2007年11月 3日 02:14
9 - hoka さん
こんにちは。
一つ疑問に思ったのですが、id/classのふり方で、「p.pageTop」と「p.copy」のところだけidでなくclassなのはなぜですか？
ページに一つだけしかでてこないものはidを、複数でてくるものにはclassを、という考え方であればp.copyはidになるんではないか思います。
また、idは要素に一意な名前をつけるもの、classは要素を分類する為のもの、という考え方であれば他のidになっている要素もclassなるべきではないかと思いました。
これは人それぞれの考え方があると思うので、一貫した考えでマークアップしてればどちらでもいいと思っているですが、平澤さんはどういう考え方でid、classを使い分けてますか？ぜひ教えてください。
URL｜2007年11月 3日 14:56
10 - hirasawa さん
>たくやさん
なるほどー、それは中々面白いですね。
ただ、この細かい違いが結構仕事の場合厄介だったりするんですよね。
大枠は良くっても、構造が複雑になればなるほど、個々でばらけてしまうので、、、
>hokaさん
微妙なラインなんですが、一意＝idという考えではつけてないです。
ナビ関係と大枠部分のみボクはidを振っていくのがここ最近多く、今回のような2カラムの場合、他は全てclassで振っていきます。（アンカーなどが必要な場合はidも使いますが）
ただ、copyrightに関しては、ページ内で必ず一意といえますし、idでも問題ないので、今回のセットを作るにあたって最後まで悩んでいた部分ではあります。
基本的に日々悩んでるので、ブレの可能性もあるかも、、、
idに変更するならcopyからcopyrightにしてやると思います。
このあたり、実務経験から来る効率性重視な部分が強いかも。
（それなら全部classで振ったほうがいいかも・・・）
2007年11月 4日 22:50
11 - hoka さん
>平澤さん
回答ありがとうございました。
僕も最近はこの問題で日々悩んでるんですよ。すごく参考になりました。
いろいろと議論を交わしたいところですが、コメント欄であまりエントリーと関係ない話をするのも何なのでまた別の機会にでも。
URL｜2007年11月 5日 14:26
12 - ゆーいち さん
＞平澤さん
レスありがとうございます。
なるほどー、そういう解釈も出来るわけですね。
span要素は、（多分 正しく使えば便利だろうけれども）装飾目的に使う人も多く、意味も曖昧なので自分は今まで使うことがありませんでした。（自分の解釈が間違っているのかもしれませんが…）
なので、意味が弱い（だろう）とされる要素の特徴を“あえて使う”という発想は全くなかったのです。
class id属性の話もそうですが、いろいろと考えられているのですね。大変参考になりました。
URL｜2007年11月 5日 16:08
13 - けんた さん
いつも参考にさせていただいています。
contents.cssを見ていて気付いたのでご連絡しました。
#coantents {
width: 860px;
}
（誤）#coantents
（正）#contents
でしょうか？
2007年11月 7日 17:11
14 - hirasawa さん
> けんたさん
あぁあっぁあ。。。すみません！
完全にミスです。
修正いたしました。
ありがとうございます。
2007年11月 7日 17:52
15 - ナカネ さん
はじめまして。ナカネと申します。
ページ作成はご無沙汰だったのですが、またやってみようと思い情報収集していたところ、こちらに辿り着きました。
そこで、この非常にありがたいセットに出会ったのですが、一つ「？」な現象が起こりまして、コメントにてお伺いする次第です。
「ページの先頭へするするっと飛ぶ機能」なのですが、どうもエラーが出てしまうのです。
最初は自分がいじったからかと思ったのですが、解凍しただけのものでも同様にエラーが出るのです。
IEでのエラー内容は、
ライン:１
文字：１
エラー：オブジェクトでサポートされていないプロパティまたはメソッドです。
コード：０
というものなのですが、これはこちらの環境等のせいで出るのでしょうか。
ちなみに、IE6及び7、FF2のいずれでもエラーが出てしまいました。
どなたか、片手間にでもご教授頂けましたら幸いです。
2007年11月13日 03:58
16 - hirasawa さん
>ナカネさま
はじめまして。
ご連絡ありがとうございます。
えっと、恐らくjQueryのバージョンが新しすぎた為にエラーが発生していた模様です。
現在は正常に動作するバージョンになっておりますので、お手数ですが、再度ダウンロードしていただければと思います。
（昨日、当ブログをリニューアル時に気づいたので、対応が遅れてしまいすみません）
もしくは、
http://docs.jquery.com/Downloading_jQuery
こちらの、Past Releases 1.1.4をダウンロードしていただき、jsファイル内のjquery.jsを上書きして頂いても同様になります。
2007年11月13日 07:16
17 - ナカネ さん
＞平澤様
ありがとうございます。
早速試してみたところ、無事に正常動作が確認できました。
これでスッキリしました。また色々試してみたいと思います。
今後も、こちらで勉強させて頂きたいと思いますので、よろしくお願いします！
2007年11月13日 15:41
18 - No Name さん
こんにちわ。いつも参考にさせてもらってます。
javascriptが詳しくないので、そういう仕様なのかバグなのか分かりませんが、動作で不思議な点があったので質問させてください。
おそらくyuga.js だとは思うのですが、メール送信リンクを書くと、それより後ろの幾つかのjsアクションが実行されないんです。
例えばテンプレをそのまま流用して引用させてもらいますと
<div id="main">
<p style="height:1000px;">縦伸ばし用の1000pxのブロックです。これだと問題なく下の「ページトップへ」も効きます。</p>
<!-- / #main --></div>
～～～sub省略～～～
<p class="pageTop"><a href="#page" title="このページの先頭へ">ページトップへ</a></p>
これだと問題なく「するするとページトップへ飛ぶ」も効くのですが、
<div id="main">
<p style="height:1000px;">縦伸ばし用の1000pxのブロックです。これだと問題なく下の「ページトップへ」も効きます。<br />
ここにメアドへのリンクを付けると<a href="mailto:hoge@hoge.com">hoge@hoge.com</a>を付けると効かなくなります。</p>
<!-- / #main --></div>
～～～sub省略～～～
<p class="pageTop"><a href="#page" title="このページの先頭へ">ページトップへ</a></p>
と、すると「するするとページトップへ飛ぶ」が効かなくなってしまいます。
例では「するするとページトップへ飛ぶ」を提示しましたが、他にも後ろにあると「class="imgLink"でロールオーバーを設定」や「現在のページへのリンク～」関連などのアクションも効かなかったです。
メール送信リンクより上に記述されたものは問題なくアクションが効くので不思議な現象なんですが、こういう仕様なんでしょうか。僕の知識足らずで何らか当たり前の現象なのかもしれませんが><
何か解消方法ありましたらご教授お願いします。
2007年11月29日 11:19
19 - hirasawa さん
>18 No Nameさん
ご丁寧なご連絡ありがとう御座います。
しかしながら、ボクがjavascriptに関して全然詳しくないので、わかり次第お伝え出来ればと思います。
お力になれずすみませんorz
2007年11月29日 11:55
20 - ametyoko さん
>平澤様
ご返答ありがとうございます。
一度送信エラーを起こしたせいで、匿名になっていました>
>18 のametyokoです。
しかも、タグの部分が表示されなかったせいで本文めちゃくちゃですね。。。orz
要約するとメール送信のリンクタグを書くと、その後のjsアクションが効かないと言うことです。。。すいませんでした。
もし何か分かりましたら教えてください。失礼しました>
2007年11月29日 13:26
21 - 初心者 さん
はじめまして。いつも拝見させて頂いております。
以前書込みのあった3pand さんに便乗して是非お聞きしたい事があります！
CSSの中にコメントアウトで記述した時のことなのですが
何故かそれが原因でそのすぐ後ろに書いたIDが
効かなくなってしまいました・・・
(大文字記述でした・・)
何かやってはいけないルールなど
ありましたらご教授くださいませんでしょうか。
宜しくお願い致します。
URL｜2008年3月31日 10:46