CSS関連ルール │ 牧野工房　ガイドライン

HOME　>　CSS関連ルール

CSS関連ルール

CSSファイルのインポート

CSSファイルはモジュール化し一枚のCSSファイルから全てを読み込む。

理由

第4世代ブラウザ（NN4やIE4）やそれ以前のブラウザにモダンブラウザ向けのCSSを適用すると、ブラウザクラッシュなどの大きな問題が起こる可能性があるので、これらに対しCSSを適用させないため。
モジュール化することで複数人での作業効率・管理面の向上するため。
HTMLから読み込むファイルをひとつにすることで管理しやすくなるため。

記入例

CSS作成するHTMLの<head>内に次のように記述する。

example.html

<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
<head>

・・・中略

<link href="css/import.css" rel="stylesheet" type="text/css" media="all" />

import.css

@charset "shift_jis";

/* Base
========================================== */
@import "base/reset.css";
@import "base/structure.css";
@import "base/header.css";
@import "base/footer.css";
@import "base/navigation.css";
@import "base/textdecorations.css";


/* Parts
========================================== */
@import "parts/table.css";
@import "parts/form.css";


/* Individual
========================================== */
@import "individual/home.css";

ブラウザスタイルのリセット

IE、Firefox、Safari等、それぞれのブラウザには、デフォルトで設定されているスタイルがあり、その設定は各ブラウザによって異なる。
デザインにあわせてCSSを設定する際、これらの設定があることで作業工数が増えてしまう。
はじめにCSSが全く効いていないゼロの状態にすることで、その後の工数を減らすとともに編集をしやすくする。

reset.css

@charset "shift_jis";

body,div,dl,dt,dd,ul,ol,li,
h1,h2,h3,h4,h5,h6,
pre,code,form,fieldset,legend,
p,blockquote,table,th,td {margin: 0; padding: 0;}

html {background: #FFF; color: #000;}

body {font:13px/1 "メイリオ","Meiryo","ＭＳ Ｐゴシック","Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3",sans-serif;}
* html body {font-size: small; font: x-small;}
*:first-child+html body {font-size: small; font: x-small;}

img {border: 0; vertical-align: bottom;}

h1,h2,h3,h4,h5,h6 {clear: both; font-size: 100%; font-weight: normal;}

ul,dl,ol {text-indent: 0;}
li {list-style: none;}

address,caption,cite,code,dfn,em,strong,th,var {font-style: normal; font-weight: normal;}

sup {vertical-align: text-top;}
sub {vertical-align: text-bottom;}

input,textarea,select {font-family: inherit; font-size: inherit; font-weight:inherit;}
* html input,* html textarea,* html select {font-size: 100%;}
*:first-child+html+input,*:first-child html+textarea,*:first-child+html select {font-size: 100%;}

table {border-collapse: collapse; border-spacing: 0; font-size: inherit; font: 100%;}
th,td {text-align: left; vertical-align: top;}
caption {text-align: left;}

pre,code,kbd,samp,tt {font-family: monospace;}
* html pre,* html code,* html kbd,* html samp,* html tt {font-size: 108%; line-height: 100%;}
*:first-child+html pre,*:first-child html+code,*:first-child html+kbd,*:first-child+html+samp,*:first-child+html tt {font-size: 108%; line-height: 100%;}

input,select,textarea {font-size: 100%; font-family: Verdana, Helvetica, sans-serif;}

CSSのidとclassについて

全体を囲むBOX	#wrapper, #document
ページ上部	#header
サイトタイトル(h1)	h1#siteTitle
各ディレクトリを移動するナビゲーション	#globalnavi
現在地を表すパンくずリスト	#topicpath
各ディレクトリ内を移動するナビゲーション	#localnavi
本文掲載エリア	#contents
ページ下部	#footer
コピーライト	#copyright

body要素にはid（ページ名）、class（ディレクトリ名）を付け、それがサイト内のどのページであるかを明示する。
単語間は続く単語の一文字目を大文字にする。判りやすさを考慮し、場合によってはハイフンやアンダースコアなども使用する。

コメントの記述

パーツひとまとまり毎に大見出しをつけ、その中は更にひとまとまり毎に中見出しをつけインデントをとる。
それぞれの見出しには連番をつけ、CSS内のはじめに目次を記述する。

記述例

example.css

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

	Example CSS

 -----------------------------------------
	INDEX
 -----------------------------------------
	1.Base Structure
	
	2.Header
		2-1.Site Title
		2-2.Header Navi
	
	3.Globalnavi
	
	4.Footer

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

/* 2.Header
========================================== */
#header {
}

	/* 2-1.Site Title
	---------------------------------------- */
	h1#site-title {
		font-size: 180%;
	}
	
	/* 2-2.Header Navi
	---------------------------------------- */

CSSファイルの構成

css/・・・CSSファイルの格納場所

import.css・・・インポート用CSS

base/・・・サイト全体の基礎となるCSSを格納: structure.css・・・基礎構造用CSS; textdecorations.css・・・テキスト関連の基本設定CSS; reset.css・・・ブラウザリセット用CSS(※1)

parts/・・・パーツ毎のCSSを格納: form.css・・・フォーム設定用CSS; table.css・・・テーブル設定用CSS; common.css・・・各ディレクトリ共通CSS; 各パーツ名.css・・・各ページ共通パーツ用CSS

individual/・・・各ページ固有のCSSを格納: home.css・・・インデックス用CSS; 各ページ名.css・・・各ページ固有CSS

※1　各ブラウザのデフォルトスタイルシートをリセットする事により、
その後の工数を減らすとともに編集をしやすくする。

フォントについて

基本フォントは、
font-family: "メイリオ","Meiryo","ＭＳＰゴシック","Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3",sans-serif;
と指定。
コピーライトなど英数フォントは、
font-family: Verdana, Helvetica, sans-serif;
と指定。
文字サイズは可変するよう、Yahoo UI Fonts CSSの一部を利用。
13pxを基本に%指定。
行間は、各ブラウザのずれを最小限に抑えるため独自に算出した数値を設定。
基本的にデザインファイルに準ずるが、Webページの特性を考慮した上である程度調整。

ページの先頭へ戻る

牧野工房 ガイドライン