2007年2月13日

• 
• 
• 
• 
• 

新規でサイトを作る際に僕がいつも使ってるCSSのセットを公開するよ

こないだcatboy様からコメントで要望があったり直でgmailの方に要望を頂いたりしているCSSのライブラリの件ですが、
実はライブラリというほど偉そうなものはできておらんのです。でも結構な件数の要望を頂いてしまった手前、せめて一刻も早く皆様にお役に立とうと思いまして僕がいつも使っている新規サイト制作の際に使っているCSSのセットを公開したいと思います。

あと、逆にですが正直自分はまだまだ修行中ですんで、公開することによってこれがきっかけで情報交換や好ましくない点の推敲や意見交換ができればという狙いもあります。そんなわけで諸兄方よろしくお願いします。

世間は～を～する際～しておくと便利な～というようなHow Toが流行っているようですが、
細かい説明が面倒だったのでまずはファイルを公開します。

不精な方は下のファイルを「リンク先を保存」で軒並み保存してしまってください。

• set.css
• default.css
• layout.css
• base.css
• module.css

次に各ファイルの説明ですが、

set.css

set.cssは全てのファイルをインポートするためのファイルです。
これを作っておくとHTML側で書くソースが一行になって便利ですし、CSSを新たに追加する際にset.cssのみの書き換えで済むメリットもあります。

default.css

default.cssは所謂クロスブラウザ対策で、デフォルトの差異をなくします。

layout.css

layout.cssはサイト全体に渡るベース要素のレイアウトのスタイルを定義します。

base.css

bese.cssはベース要素に関するスタイル全般を定義します。

module.css

module.cssはサイト内で繰り返しでてくる要素（同じスタイルの見出しとか特定の文字装飾とか）を定義します。
初期ではclearfixというclassを定義していますが、これはclearfixの見本ですのでそのまま使わない方が無難です（物理構造を表す名前をつけると結構怒られちゃうので）。

また、CSSの最上部には以下のような署名があります

/*
	Site Name: 
	Description: style import
	Version: 
	Author: 
*/

これは署名ですので適宜項目を追加して使ってほしいのですが、バージョン管理を手動で行う際やCSSに管理者を明記する際に結構便利ですよ。

最後に各ファイルの中身と注意点を記しておきます、かなり冗長になるので読まなくても大丈夫だと思います。

set.css

/* Set Base Style
----------------------------------------- */

@import url("default.css"); /* initial setting */

@import "layout.css";/* layout style */
@import "module.css";/* common module style */

@import "base.css";/* base template style */


/* Style for MacIE 5.x 
------------------------------------------*/
/*for MacIE5*/
/*\*//*/
  @import "ie5m.css";
/**/

set.cssではある程度のブラウザの振り分けをしています、
要件によって取捨選択するのですが今回は最下部にmacIE用にhackをかけた例を記しています。

default.css

/*
===== CONTENTS ===========================================

	1: universal reset 
	2: body and base setting
		: general params
		: acronyms and abbreviations styles
	3: link setting

==========================================================
*/


/*
===== 1: universal reset =================================
*/

*{
	margin:0;
	padding:0;
}

/*
===== 2: body and base setting ===========================
*/

body {
	text-align:center;/* box centering */
	font: normal 1.4 "ヒラギノ角ゴ Pro W3", "ＭＳ Ｐゴシック", HiraKakuPro-W3, Osaka, verdana, arial, sans-serif;
	margin: 0px;
	padding: 0px;
	background: #E6E6E6 ;
	color:#191919;
}

/* general params
--------------------*/
h1, h2, h3, h4, h5, h6,
div, p, pre, ul, ol, dl, dt, dd,
address, form, blockquote{
	padding: 0;/* margin&padding reset */
	line-height: 1.4;/* base line height */
	text-align: left;
	display: block;
	margin: 0px;
	font-size:small;
}
table {margin : 0;empty-cells: show; font-size:small;}
hr,.areaAnchor,.anchor { display : none; }
img {
	border: none;/* img do not want a border */
	vertical-align: bottom;
}
li { list-style: none; }/* link do not want a dot */

/* acronyms and abbreviations styles 
-------------------------------------*/
acronym,abbr{cursor:help;}

/*
===== 3: link setting ===========================
*/
a:link{
	color: #0066CC;
	text-decoration:underline;
}
a:visited{
	color: #551A8B;
}
a:hover{
	color: #FFF;
	background:#0066CC;
	text-decoration:none;
}
a:active{
	color: #0066CC;
}

default.cssはある程度の初期設定とデフォルトスタイルの差異をつぶしているのですが、フォントカラー等が僕の好みになってたりするのでここは変更して使ってください。

layout.css

/*
===== 1: BASE LAYOUT =====================================
*/

div#container{
	margin:auto;
}
div#container{
    zoom:1;/*for IE 5.5-7*/
}
div#container:after{/*for modern browser*/
    content:".";
    display: block;
    height:0px;
    clear:both;
    visibility:hidden;
}
* html div#container{
	display:inline-table;
	/*\*/display:block;/**/
}

layout.cssはぶっちゃけ最初に書くことがわかりません。とりあえずcontainerというidを持つdivにclearfixを設定しておきました。

あとはbase.cssとmodule.cssなんですがコメントのテンプレ以外まだ何もかいてないので省略します。

CSSの分割は2xupさんを参考にしたりいろんなサイトを見てベストの形を模索してはいるもののまだまだよくわからないなーというのが正直なところです。
ないようについても最近の例ではこことか非常に勉強になるんですが（結局bodyにline-heightを指定しない方がいい理由ってなんだったんでしょ？）、 default.cssの方もまだまだ改善の余地（多分フォントサイズとか設定しない方がよかったりするのだろうけどem指定する際この設定が使いやすくてそのままなわけで・・・）があるので、願わくば皆さんのご意見ご感想、このサイトのCSS素敵ですよーなどの情報いただけると僕としても励みになりますのでよろしくお願いします。

• 個別ページ｜
• コメント(1)｜
• トラックバック(1)