XHTMLやCSSで参考・利用しているサイト

質問

WEB制作会社の方にお伺いしたいのですが
会社設立後や新しい担当者（転職者含む）でのサイト制作の際に
XHTMLやCSSの基本部分のテンプレートを作ったと思うのですが
それは何を参考にしたのでしょうか？
制作会社の作品のCSSソースを見ると
.maT10{margin-top:10px;}でclass指定するタイプとかあります
（特にこの記述が掲載されているものを探している訳ではないです。）

以前ネット上のものを参考にしてはだめなのかと質問するとひどく叱られた事もあり
お金を出して技術を買うという意味で書籍を購入するのですが
牧野工房さんやCSS Niteさんの本も参考にしたのですがネット上にあるものとは
違うような気がします（別の本ではCSSを分けるのは非効率になるので分けないとか）
ネット上のものは・・・なんていうかファイル名やコメントの書き方まで同じなので
明らかにどこかを参考にしていると思うのですが、
もしかして何かに入会するとダウンロードできるとか素材として購入するとか
されているのでしょうか？

もちろんW３Cの仕様を見て全部理解して１から作ればいいのですが、
我流っぽくなって一般的ではないし、業界の人が参考にしているサイトを知らない
とか努力が裏目となる評価になると思っています。
自分で検索するのでもいいのですが、出所が知りたいので・・・

もしよろしければデザイン部分ではなくソース部分などを参考にされている
サイトを教えていただければと思います。
（今回は質問と関係のない発言はご遠慮下さい。）

回答No.1

ORUKA1951 · ベストアンサー

単なる偶然のような気がしないでもないです。
.maT10なんてクラス名は、どう見てもウエブ音痴のclass名ですしね。margin-top:0などに将来デザインを変えたくなったらclass名も変えるのでしょうかね。(^^)
　『id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』も読んでない連中・・。div.header,div.sectionとかつけるのが本来のclass名ですよね。

＞以前ネット上のものを参考にしてはだめなのかと質問するとひどく叱られた事もあり
　参考にすべきは、仕様書ですよ。「ネット上のものを参考にしてはだめ」は、そのまんま書籍にも当てはまりますよ。
　スタイルシートの解説書でしたら、こんなデザインが出来る、あんなデザインが出来るというプロパティの説明が目的ですから、HTMLの文書構造には立ち入りません。

　私が作業者に言っているのは、デザインは盗め・・しかしHTMLは仕様書に従え!!・・
　徹底的にデザインは一切無視してHTMLを作らせます。作ります。その後、スタイルシートでデザインに取り掛かりますが、HTMLさえきちんと出来ていれば、基本的にHTMLに手を加えることはありません。何種類かのスタイルシートを用意して、それを切り替えてどのデザインが良いかの評価に移ります。
・スタイルシートを切り替えることでサイト全体のデザインを一新できる。
　と言うのが文書構造とプレゼンテーションの分離の一番の目的ですから。たとえば、
「1カラムのリキッドレイアウトについて。( http://okwave.jp/qa/q7292209.html#a3 )で示したHTML、あなたなら、どうデザインしますか？

＞（別の本ではCSSを分けるのは非効率になるので分けないとか）
　複雑なデザインのサイトの場合は基本的に分けます。
・永続的スタイルシート
・メディア別スタイルシート
　・media=screen
　　・外骨格のみ
　　・色の指定
　　　この二つは分けることが多いです。
　要は作業効率・メンテナンス効率・データ量で判断します。
　何種類かに分類できるサイト
　　・トップページ
　　・各分野のトップページ
　　・商品説明
　　・会社案内
　では、サイト全体に適用させる永続的スタイルシートでfont-familyとかsizeとかを、骨格は、４種類、色は２種類に分けておけば、スタイルシートは小さくて済みますね。

　HTMLのソース部分は、ユーザーさんの意向もありますが基本的に読み解ける範囲で文書構造をマークアップするので参考になるサイトは要らないでしょう。スタイルシートは、デザインのみネット上や、たまに書籍も見ますが、あくまで外見だけなのでソースを見ることはありません。

　他社は知りませんが、DreamWeberなどのテンプレートを使用しているところが多いかと思います。
Dreamweaver テンプレートとサンプル | Dreamweaverデベロッパーセンター ( http://www.adobe.com/jp/devnet/dreamweaver/samples.html )
dreamweaver テンプレート ダウンロード - Google 検索 ( http://www.google.co.jp/search?q=.maT10%7Bmargin-top%3A10px%3B%7D&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:ja:official&hl=ja&client=firefox-a#hl=ja&safe=off&client=firefox-a&pwst=1&rls=org.mozilla:ja:official&q=dreamweaver+%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88+%E3%83%80%E3%82%A6%E3%83%B3%E3%83%AD%E3%83%BC%E3%83%89&revid=709066851&sa=X&psj=1&ei=iVgyT5WyNdHymAXhn7HOBQ&ved=0CBsQ4QIoAQ&bav=on.2,or.r_gc.r_pw.,cf.osb&fp=8580f7708ea5d494&biw=1015&bih=585 )

お礼

いつも回答ありがとうございます。

＞将来デザインを変えたくなったらclass名も変える
たぶんクラス名を置換するんだと思います。
style属性を短くしただけなので、なんか違和感はあります

HTMLの文書構造については
歴史背景を考慮して構造やデザイン分離はしていますが
学生の頃の「試験対策」と「教科書をまるごと覚える」との比較のように、どうしても仕様書よりテクニック探しでその場しのぎになっているのは反省します。

＞1カラムのリキッドレイアウトについて
質問文だけざっと見て背景に意味があるならimg要素かなとか、
メニューをdivのところはulにしたほうがいいかなとか、
ボタンの画像はCSSで背景指定でいいかなとか思いました。

デベロッパーセンター はチェックしてませんでした（汗）

ORUKA1951さんの下で仕事されてる方がうらやましいです
リンク先をよく見ておきます。