ガイドライン > CSS関連ルール

牧野工房 ガイドライン

11/05/11 更新
06/11/01 策定

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","MS Pゴシック","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/・・・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","MS Pゴシック","Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3",sans-serif;
    と指定。
  • コピーライトなど英数フォントは、
    font-family: Verdana, Helvetica, sans-serif;
    と指定。
  • 文字サイズは可変するよう、Yahoo UI Fonts CSSの一部を利用。
    13pxを基本に%指定。
  • 行間は、各ブラウザのずれを最小限に抑えるため独自に算出した数値を設定。
  • 基本的にデザインファイルに準ずるが、Webページの特性を考慮した上である程度調整。
  • 納品した案件数:1,016
  • iPhone/Android搭載スマートフォン対象 スマートフォン専用サイト コーディングサービス
  • 大規模・特殊な案件コンサルティングはこちら
  • JavaScript開発 プラグインを超える規模の開発
  • CMSの改修乗り換え お使いのCMSに満足していますか?

空き状況、お得な情報はtwitterで

makinokobo