@blog.justoneplanet.info

■base.css

このCSSはファイル名の通り、基本設定となる。

サンプルソース

/********************************************************
 * body
 */
body {
	text-align: center;
}
#container {
	width: 870px;
	margin: 0 auto;
	text-align: left;
	background-color: #FFFFFF;
}
/********************************************************
 * fundamental preferences
 */
* {
	margin: 0;
	padding: 0;
}
img {
	border: none;
}
h3 {
	clear: both;
}
/********************************************************
 * class for layout
 */
.mb0em {
	margin-bottom: 0px;
}
.mb05em {
	margin-bottom: 0.5em;
}
.mb1em {
	margin-bottom: 1em;
}
.mb2em {
	margin-bottom: 2em;
}
.mb3em {
	margin-bottom: 3em;
}
.ta-center {
	text-align: center;
}
.ta-left {
	text-align: left;
}
.ta-right {
	text-align: right;
}
.fwb{
	font-weight:bold;
}
.fs08em {
	font-size: 0.8em;
}

■typeface.css

このCSSファイルはファイル名の通り、活字づら（フォント）設定を定義したファイルである。フォントに関する設定はこにファイルで一元管理する。

※但し、下記はWindows用の設定（Macは入っているフォントが違うので異なった記述が必要となる）

サンプルソース

@charset "UTF-8";/*CSSドキュメントの文字コードを記述（フォント名にはマルチバイト文字が含まれるため）*/
/********************************************************
 * color, type face, line height
 */
h1,h2,h3,h4,h5,h6,p,dt,dd,table,address {
	font-family: "メイリオ", "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
	line-height: 1.7;
	color: #444444;
}
h2 {
	font-size: 0.8em;
	line-height: 1.2;
}
h3 {
	font-size: 0.9em;
}
h4 {
	font-size: 0.8em;
	line-height: 1.2;
}
code {
	font-family: "メイリオ", "ＭＳ ゴシック", "Osaka－等幅";
}
em {
	font-weight: bold;
	padding: 3px 3px;
}
address {
	font-style: normal
}
p {
	text-align: justify;
	text-justify: inter-ideograph;
	margin-bottom: 0.5em;
}
ul {
	list-style-type: none;
}
li {
	line-height: 1.2;
	color: #666666;
}
/********************************************************
 * font-size
 */
p,dt,dd,address {
	font-size: 0.8em;
}
th,td {
	font-size: 0.8em;
}
li {
	font-size: 0.8em;
}
li li {
	font-size: 1em;/*liが複数回入れ子になってる場合フォントサイズが小さくなってしまうのを防ぐ*/
}

■mac.css（マッキントッシュ用フォント設定）

正直macは良く分からん。

/********************************************************
 * color, type face, line height
 */
h2,h3,h4,p,li,dt,dd,table,address {
　　　　font-family: "ヒラギノ角ゴ Pro W3", Helvetica, sans-serif;
}
code{
　　　　font-family: "Osaka－等幅";
}

■link.css

このファイルでリンクの設定を一元管理する。注意しなくてはいけないのは、疑似クラスを指定する順序だ。これを間違うと上手く反映されないことがある。

但し、定番といえる記述は少なくサイトに合わせたデザインに下記を変更する。

サンプルソース

/********************************************************
 * link
 */
a:link {
	color:#5aa5de;
	text-decoration:underline;
}
a:visited {
	color:#5aa5de;
	text-decoration:underline;
}
a:active {
	color:#f96400;
	text-decoration:underline;
}
a:hover {
	color:#f96400;
	text-decoration:underline;
}

■main.css

このファイルにはサイトごとに特色のあるソースコードが書きこまれる。

■ie6.css

アウトローなIE6用のCSSを記述する。

■上述の設定したファイルをまとめて読み込むCSSファイル

include1.css

CSSファイルを読み込むCSSファイルをを読み込む為のファイルである。

@importを使うとIE4には読み込まれないような処理となる。

サンプルソース

@import "include2.css";

include2.css

このCSSファイルはmac用以外を除く、上記CSSファイルを読み込む為のファイルである。

@import url(“/*ファイルのパス*/”);を使うとIE4.5には読み込まれないような処理となる。

サンプルソース

@import url("base.css");
@import url("typeface.css");
@import url("link.css");
@import url("base.css");

■読み込み経路について

以下のような順序で、HTMLファイルからCSSが読み込まれる。

1. →include1.css
2. →include2.css
   • →base.css
   • →typeface.css
   • →link.css
   • →main.css

HTMLファイル内での記述

<link href="css/part1.css" rel="stylesheet" type="text/css" media="all" /><!--外部CSSファイルの適用（NN4xをはじく）-->
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="css/ie6.css" />
<![endif]-->
<script type="text/javascript">
//macの場合はlinkタグが書き出される
if(navigator.userAgent.indexOf("Mac") >= 0){
    document.write('<link href="css/mac.css" rel="stylesheet" type="text/css" media="all" />');
}
</script>