H2O Space. HTML Coding Rule

H2O Space.HTML/CSSコーディングルールブック

rev.001 2010.12.24

目次H2O Space.HTML/CSSコーディングルールブック目次はじめにディレクトリ・ファイル構成関連コンテンツには冒頭に「_」を付加ディレクトリ名は短く大文字は利用しない、単語間の区切りはアンダースコア同種の種類は数字をつける。その場合は3桁を基本ファイルには接頭辞を付ける

画像基本はPNG8とJPEG、必要に応じてGIFを利用

HTMLHTML5を利用する。ただし、XHTMLに準拠JavaScriptの読み込みは、body要素の最後で適切な空行を入れ、インデントはしない閉じタグの前にコメントを入れるID、class属性はキャメルシンタックスを利用する直接スタイルを表す言葉はつけない

CSSreset.css開きカッコは1行に収め、タブでインデントする

コロンは定義にくっつけ、後ろに半角空白0には単位をつけないカラーコードは小文字で、できるだけ短く3つ以上の同一プロパティの場合はまとめる!importantは基本的に利用しないでレベルを正しく定義する

できるだけ宣言を短くする

はじめにこの文書は、次のURLで最新版を配布しています。http://bit.ly/h2o_coding_rule

ディレクトリ・ファイル構成

関連コンテンツには冒頭に「_」を付加画像やCSSなど、直接リンクには利用しないコンテンツは、見分けをつけるために冒頭に「_」を付加して「_entry_img」「_extend_css」などとしてください。

ディレクトリ名が煩雑になるため、2階層目以降は付加する必要はありません。例えば左図のように「_shared」フォルダがトップにあれば、その下階層は通常通りでかまいません。

ディレクトリ名は短く◯ img/, css/, js　× images/, stylesheet/, javascript/

ディレクトリ名は、HTMLファイル内でなんども参照されるため、できるだけ短い名前にしてデータ量を少しでも節約します。

大文字は利用しない、単語間の区切りはアンダースコア◯ my_image　× myImage, MyImage

UNIXなどで大文字と小文字は区別されるため、ファイル名・ディレクトリ名に大文字は利用しないでください。複数の単語が繋がる場合は、「_（アンダースコア）」で区切り、特別な理由がない場合は「-（ハイフン）」は用いないでください。

同種の種類は数字をつける。その場合は3桁を基本

◯ img_company001.gif, img_company012.jpg　× img_company1.gif, img_company_one.gif

例えば、写真集のようなコンテンツなどで同じような画像をいくつも理由する場合は数字で管理します。この時、ソートが崩れるのを防ぐために連番の際に桁数を3桁であわせ、「001」「002」などとします。

ファイルには接頭辞を付ける◯ ttl_main.png、ico_arrow.gif　× main_title.gif、company_image.jpg

ファイルには、はじめにその画像がどのような種類を表すかを接頭辞で表します。例えばそれがタイトル画像であれば「ttl_」、アイコンであれば「ico_」などとします。次の表を参照してください。もし、ここにない接頭辞が必要な場合は3文字から5文字程度で適当な接頭辞を付加します。

接頭辞意味

ttl_ タイトル

bg_ 背景

line_ 線

ico_ アイコン

img_ 一般画像（挿絵、写真など）

画像

基本はPNG8とJPEG、必要に応じてGIFを利用画像ファイルは基本的に、イラストなどはファイル容量が軽いためPNG8、写真はJPEGファイルを利用します。ただし、IE6以前で透過PNGが利用できないため、必要に応じてGIFを使い分けます。

HTML<!DOCTYPE HTML><html><head><meta charset="UTF-8" /><meta name="keywords" content="ホームページ制作,東京" />

<meta name="description" content="東京世田谷のホームページ制作会社。「声」をテーマに、御社の顧客満足向上に貢献するWebサイト制作をお手伝いします。" />

<title>エイチツーオー・スペース[H2O Space.] | ちゃんとWebなホームページ制作会社（東京・世田谷）</title>

<link rel=”stylesheet” href=”base.css” /></head>

<body><header><h1>タイトル</h1></header>

<div id=”area1”><p>内容のサンプルです</p></div>

<footer class="clearfix">…</footer>

<script type=”text/javascript” src=”index.js”></script>

</body></html>

HTML5を利用する。ただし、XHTMLに準拠HTMLの制作にはHTML5を利用します。IEなどで正常に表示されないため、html5.jsを読み込みます。この時、コンディショナルコメントで囲みます。

また、HTML5では「閉じタグが不要」「属性の囲み記号も不要」などHTML4を踏襲したルールがありますが、このあたりはXHTMLに準拠します。唯一、次のルールだけはHTML5に準拠します。

JavaScriptの読み込みは、body要素の最後で

外部JavaScriptは、特別な理由がなければ高速化のため、body要素の最後で読み込みます。

適切な空行を入れ、インデントはしないHTML内には、ブロックごとに適当に空行を入れて視認性を良くします。場合によっては、ブロックの先頭にコメントを入れる場合もあります。

また、関係性を保つのが困難なため、行の先頭にタブを入れるいわゆる「インデント」は行いません。Dreamweaverを利用している場合、自動的にインデントが入ることがあるため、次の操作でインデントをなくします。

● Cmd(Ctrl) + Aで文書を全体選択します● Shift+Tab を何度か押してインデントをなくします

閉じタグの前にコメントを入れる<div>要素が複数入れ子になっている場合などは、閉じタグの前に次のようなコメントを付加します。

</div>

この時、次のことに注意します。

● Dreamweaverでタグを選択しやすくするため、閉じタグの「前」に入れます● IDとclassは相互に変更されることがあるため、特定する記号は入れません

× 、

ID、class属性はキャメルシンタックスを利用する◯ id="areaMain"、class="boxColumn"　× id="area_main"、class="box_column"

ID属性やclass属性にはキャメルシンタックス（単語の2文字目以降を大文字にする）を採用し、アンダースコアなどは利用しません。

直接スタイルを表す言葉はつけない◯ id="caution"、class="marginWide"　× id="fontRed"、class="margin50px"

スタイルシートはあとから変更される可能性があるため、直接それを表すような言葉で命

名しないようにします。ただし、次のようなものは例外とします。

● Left, Right, Center（これを後から変えることは考えにくいため）● Top, Bottom（同上）● noMargin（マージンを取らないなどで「no」などを付加する）

CSS@charset "UTF8";

/*** * ページレイアウト */#wrap {

width: 950px;margin: 10px 0;padding: 0 10px;color: #333;

}

/*** * 汎用クラス */.noMargin {

margin: 0;}.center {

text-align: center;}

reset.cssブラウザのデフォルトスタイルを打ち消すため、Yahoo! UI Libraryの reset.cssを利用します。http://developer.yahoo.com/yui/reset/

開きカッコは1行に収め、タブでインデントする◯.class1 {

...

×.class1

{...

CSSの開きカッコは、定義と同行にし、半角空白を一つ入れます。また、内部はタグ記号を1ついれてインデントします。

コロンは定義にくっつけ、後ろに半角空白◯ float: left　× float:left、float : left

プロパティの宣言では「プロパティ:[半角空白]内容」とします。

0には単位をつけない◯ margin: 0　× margin: 0px

定義する値が「0」の場合は単位をつけません

カラーコードは小文字で、できるだけ短く◯ color: #f00　× color: #FF0000

カラーコードを指定する場合、基本的に小文字で記述をし、また「000000」「ff0000」など短く記述できる場合は「000」「f00」など、短く記述をします。

3つ以上の同一プロパティの場合はまとめる◯ margin: 0 20px 20px;　× margin-top: 0; margin-left: 20px; margin-right: 20px...

margin, paddingなど個別に定義できるプロパティで3つ以上、個別定義が続く場合はまとめて定義します。また、次のようにまとめて定義した後で例外を作っても構いません。

例）margin: 0;margin-bottom: 10px;

!importantは基本的に利用しないでレベルを正しく定義する!importantは基本的に利用せず、ID属性を正しく指定したり、レベルを正しく設定するなどして、Webブラウザが自然に解釈できるように記述します。

できるだけ宣言を短くする

◯ #column1 {　× .box .colum .right #column1

宣言はできるだけ短く記述して、ファイルの容量を節約します。例えば上記の例の場合、ID属性はその文書内で唯一であるはずのため、その前にclass属性を並べてレベルを定義する必要はないはずであり、ID属性は基本的に唯一の宣言になるはずです。

Technology

H2O Space. HTML Coding Rule