塩漬けになっていた”ぬかみそCSS”を揉み揉み

今や多くのHTMLコーダーの皆さんが、新規でサイトを作る際に各ブラウザが持っているデフォルトのスタイルをリセットしたり基本的なスタイルの設定をする、いわゆる”ぬかみそCSS”的な物を用意している事だと思います。

僕も2xup.orgさんのエントリー「スタイルシートを分けて管理する方法をまとめる」を読んだのがきっかけで、随分昔に”ぬかみそCSS”を作ったのですが、改変する事無くすっかり塩漬けになっていたので久々に手を入れてみました。

ついでに新規サイト製作用のテンプレート一式も作成し直す事にし、その際、Stopn’ ListenさんやCSS HappyLifeさんが配布されているデータを参考にさせて頂きました。

…頂きましたのですが、中身を見ていると「YOU、そのまま使っちゃいなYO!」と言わんばかりに完成されていたので、ほとんどコピペになってしまったというオチだったりして（汗）。

今回、揉み揉みした主な内容

• ユニバーサルセレクタでスタイルをリセットしていたのを、YUI Reset CSSを参考に最低限のスタイルのみリセットする事に変更
• 全てのCSSファイルに日本語を入れる事で、テキストエディタがCSSファイルをShift-JISで開いてしまわないようにする
• プロパティの記載順を特に決めてなかったので、CSS2 Specificationで出てくる順に従う旨を明記
• コメントの表記方法を目次・大見出し・小見出しの３段階にし、罫線の長さ等を調整
• ヒラギノがインストールされているWindowsを考慮して、とりあえずIE7向けにメイリオを指定

ディレクトリとファイルの構成

htmlとCSS、その他諸々の階層構造は、以下のような形にしました。

index.html

テンプレートになるHTMLファイル

test.html

リセットの効き具合を確認する、テスト用HTMLファイル

common.js

サイトで共通して使うJavaScriptファイル

import.css

各CSSファイルの読み込み用スタイルシート

initialize.css

デフォルトのスタイルをリセットするスタイルシート

default.css

スタイルの基本設定を行うスタイルシート

layout.css

カラム等、サイトの大まかなレイアウト用スタイルシート

module.css

各モジュール用スタイルシート

print.css

印刷用スタイルシート

完全に自分仕様なんですが、欲しい方はどうぞ。
新規サイトテンプレート sioduke1.0（6.68KB）をzipでダウンロードする

参照元

2xup.org / スタイルシートを書く時のガイドライン

http://2xup.org/log/2006/07/11-1956

Stopn’ Listen / 新規サイト制作セット（CSSライブラリ＋基本フォルダ構造＋HTMLテンプレート）、一式zipでダウンロードできるようにしました

http://kennsu.jp/2007/09/csshtmlzip.html

CSS HappyLife / 新規でサイトを作るのに使えそうなの一式。（あの人のパクりじゃないんだからっ！）

http://css-happylife.com/log/css-template/000178.shtml

hail2u.net / CSS2 Specificationでのプロパティの出現順序

http://hail2u.net/blog/webdesign/css2-property-order.html

YUI Reset CSS

http://developer.yahoo.com/yui/reset/

Social Bookmark :
Category : CSS, HTML | Permalink |