実例

それでは、ここまで解説したことをサンプルを使って解説させていただきます

まず最初に完成目標を出させて頂きますが、こんな感じになります

まずは、デフォルトのシートの作成です。デフォルト設定の部品となるsite_default.cssというファイルを作成して、そこからブラウザごとの表時差を殺すhtml_default.cssを読み込みます

それを読み込んだら、サイトに必要なように、色の設定、背景画像、フォントの指定などを行います

後々の事を考えて、色の設定は、出来るだけたくさんの要素にあらかじめ設定しておくのが望ましいです

実際の所はこんな感じに作っています

/* site_default.css */
@charset "Shift_JIS";

/* デフォルトの設定 */
@import url("css/html_default.css");

/* サイト用の色の設定、書くことが多いので別シートに移動 */
@import url("css/html_color_base.css");

/* 背景画像の設定 */
body {
	background-image:url("css/img/background_nor.png");
}

/* フォントの設定 */
h1 , h2, h3, h5, h6 {
	font-family:"Times New Roman", "New York", "ＤＦ平成明朝体W3", "細明朝体" , "ＭＳ 明朝", serif;
}

次はあらかじめ作って置いたテンプレートを当てていきます

何も設定しない場合はこの様な感じになるので、デザインを追加するための準備として、example.cssを用意して読み込ませます(サンプルの方ではexmaple_sample数字.cssになっています)

このexample.cssかから、部品となるシートを読み込みむのですが、まずはデフォルトのシートを読み込ませて

/* example.css内 */
@charset "Shift_JIS";
@import url("site_default.css");

このときの表示はこのようになります

これに、次々と、テンプレートを、読み込ませます

@charset "Shift_JIS";

/* さっき作った、サイト全体の基本設定 */
@import url("site_default.css");

@import url("../css/banner_title.css");	/* 画面上のぴったりくっついているタイトル */
@import url("../css/link_bar.css");	/* 巡回先リンク */
@import url("../css/blog.css");	/* 長い文章関係に使用する、設定集 */

これでテンプレートの読み込みは終了です、次で最後の微調整に入ります

ここまでで、色や背景画像の設定を終わらせます

さてここで問題です、テンプレートを読み込んで色の設定と背景画像等の設定が終わっています、そして最後に、パーツの位置決めを行います

ここからの意味はテーブルデザイン不要論で理解していただくとして、とりあえずパーツの移動を行いましょう

/* example.css内 */
@charset "Shift_JIS";

@import url("site_default.css");
@import url("../css/banner_title.css");
@import url("../css/link_bar.css");
@import url("../css/blog.css");

/* テーブルデザイン不要論:標準blog型から */
div.blogRoot {
	/* リンク柱を埋め込む隙間を作成 */
	margin-left:13em;
}

div.link_bar {
	/* リンク柱を移動 */
	position:absolute;
	top:4em;
	left:0.3em;
}

これで完成です。新たに追加したデザインのソースは@importの終了位置から、わずかに９行…、上手く設計すればこれだけ縮める事が出来ます

もちろんその裏側には、部品化されたシートにある、多くの設定が動いているのですが…