個人的UIのためのHTML、CSS、JavaScriptコーディングルール(2016年保存版)

概要

UIを開発するためのHTML、CSS、画像、Javascriptに関するコーディングルール。

対象

UIに関するHTML、CSS、画像、Javascript。
Javascriptに関しては、複雑な処理を想定していないので、UIの簡単な動きに関してのルールまでしか言及しません。

目的

ルールを守ることにより、下記の効果を期待する。

• 表示事故防止
• 表示速度向上
• 作業効率向上
• メンテナンス性向上
• ユーザビリティ向上
• etc

各ルールについて、想定する効果を下記の中から記述する。

• 表示事故防止
• 表示高速化
• メンテナンス性
• SEO
• アクセシビリティ
• ユーザビリティ
• セキュリティ

ルール

全体

★各技術の新機能について、サポートブラウザ・OS・デバイスを考慮した上で導入を検討する。内容によって、クロスブラウザ、プログレッシブエンハンスメントなどを関係者に相談する。
アクセシビリティ、ユーザビリティ

★ネットで検索したサンプル、フレームワークなどを利用するときは、その機能・構造をよく理解した上でローカライズを行う。
表示高速化、表示事故防止、メンテナンス性

むやみにコピーするだけでは、無駄なコードの記述・予期せぬ表示事故などを起こす。

★デバッグやテストのためのコードをテスト完了後に削除する。
表示高速化、表示事故防止、メンテナンス性

★不要なコメント、コードは記述しない。
表示高速化、表示事故防止、メンテナンス性

後任の人が削除できない、容量が増える。もし伝えたいことがあるのであれば、メールで周知やwikiなどの文書で伝える。
HTML、CSS、JS上にコメントが残っていると外部からも見えてしまう。

エンコードは「UTF-8（BOMなし）」、改行コードは「LF（UNIX）」を使う。
表示事故防止

ベースは上記だが、サービスにより適宜変更する。

★コード、ファイル名などすべて小文字で記述する。
表示事故防止、メンテナンス性

ファイル名の単語の区切りには「_（アンダーバー）」を利用する。
HTMLの要素、属性、属性の中身、CSSのセレクタ、プロパティ名、プロパティの値など。
CSSや画像ファイル名も小文字のみを利用する。alt属性の中身など例外の場合は除きます。

★外部ファイルのURLはルート相対パスを利用する。
表示事故防止、メンテナンス性

「http:」や「https:」をつけないことで両方対応できるようにする。

例：

HTML

<img src="/css/sample.png" />

CSS

background: url(css/sample.png);

★外部サーバのファイル（CDN）を利用する場合は、国によってブロックされないか確認する。
表示事故防止

多言語化サイトの場合に注意。
中国ではGoogleのCDNなどがグレートファイアーウォールによってブロックされているため機能しません。

HTML

★文法はHTML5に準拠する。
ただし、外部へ配信したり、ブラウザの対応によって対応できない場合は除く。
違反していても、ブラウザが許容して表示される場合もあり、その実装が要件として必要であれば採用する。

★HTML文書のルールを守ってを記述する。
表示事故防止、メンテナンス性

適宜下記のようなバリデータを利用する。

• The W3C Markup Validation Service
• Firefox Add-on Html Validator

★終了タグが存在しないタグは終わりにバックスラッシュをつける。
メンテナンス性

明示的に終了を示すため。

悪い例：

<br>

良い例：

<br />

★終了タグを省略しない。
表示事故防止、メンテナンス性

一部終了タグを省略できる要素があるが、人間がどこまでが要素で囲まれているのか判断しづらいため省略して記述しない。

悪い例：

<p>サンプルサンプル

良い例：

<p>サンプルサンプル</p>

★文書構造を意識した文書設計を行う。
SEO、アクセシビリティ

正しい文書を書くことにより、サイトのコンテンツがコンピュータが再利用できる形にできる。それによって、クローラビリティ・アクセシビリティの向上につながる。

★モジュールごとなどに適宜終了コメントを記載する。
メンテナンス性

階層が多くなるとどこがどこの終了タグかわからなくなるため。

終了コメントの例：

id名

<div id="news">
ほげほげ
</div><!-- /.#news -->

class名

<div class="cnt">
ほげほげ
</div><!-- /.cnt -->

★階層を示すためのインデント、スペースをあけない。
メンテナンス性

終了コメントを記載することで、どこがどの閉じタグかは明確になっているため。
また、インデントの容量削減、インデントや半角スペースなどによる意図しない表示崩れ防止のため。

★タグをすべて小文字で記述する。
表示事故防止、メンテナンス性

統一することで見やすい、XHTMLの文法（汎用性）、ブラウザの意図しない表示崩れを防ぐ。

★属性の囲みはダブルクオーテーションで記述する。
表示事故防止、メンテナンス性

統一することで見やすい、XHTMLの文法（汎用性）
画像にaltなどを指定するときに、多言語（フランス語・スペイン語など）で「""」が入る場合のみ「''」を利用可能、ブラウザの意図しない表示崩れを防ぐ。

★見栄えを記述しない。
SEO、アクセシビリティ、メンテナンス性

見栄えを指定する要素（font、b、i）、属性（style、align、border、width、bgcolor）などを利用しない。
Web標準に従い、見栄えはHTMLではなく、CSSで記述をする。

★マルチメディア（画像、動画など）にフォールバッグを用意する。
SEO、アクセシビリティ

例：画像にalt属性を指定する
回線が遅くて画像が表示できなかった場合もalt属性の中身が表示されるのと、クローラーなどのコンピュータが情報を得ることができのでアクセシビリティ・SEOにもよい
装飾的な画像は基本的にCSSで背景画像を設定することになるが、装飾的、補足的、ほかと重複した画像の場合は空のalt属性を設定する。

悪い例：

<img src="/img/bnr_1.jpg" />
→alt属性に代替テキストが用意されていないため、画像がもしＤＬできなかった場合に何も表示されない。
クローラーなどのコンピュータもこの画像が何を表しているのかを情報を得ることができない。
もしこの画像がリンクだった場合行先が何なのかもわからない。

良い例：
<img src="/img/bnr_1.jpg" alt="Spring Collection 日本の春を楽しもう！この冬におすすめの商品を紹介！" />

★補足情報を示す場合は、title属性を使用する。
SEO、アクセシビリティ

画像やリンク先など補足情報を足したい場合に利用する。

画像のキャプション（タイトルや簡単な説明）を示したい例：

<img src="product.jpg" alt="" title="りらっくまつむつむの商品イメージ" />
※この画像上部に商品名がすでにあるため、重複した情報のためaltは空にしてあります。

★HTML特殊文字は「&hoge;」を使う。
表示事故防止

意図しない表示崩れを防ぐため。ただし、CMSや長し込みなどは例外とする。

代表的な特殊文字：
" " クォーテーション
& 　& アンパサンド
&lt; < 小なり
&gt; > 大なり
&nbsp; 空白
&copy;　c　コピーライト 

悪い例：
<h1>Q&A</h1>

良い例：
<h1>Q&amp;A</h1>

★画像などはwidth、height属性でサイズを明記する。
表示高速化

レスポンシブ対応などでサイズをCSSで制御したい場合は除く。
ブラウザのレンダリングスピードに影響を与えるため。

<img src="/img/bnr_1.jpg" alt="Spring Collection 日本の春を楽しもう！この冬におすすめの商品を紹介！" width="100" height="50" />

CSS

★CSSの文法に準拠する。
メンテナンス性

適宜下記のようなバリデータを利用する。

• W3C CSS Validation Service

★コーディングスタイルは下記のようにする。
メンテナンス性

※Sassなどで吐き出されたファイル、本番用の圧縮ファイルは例外とし、作業時のスタイルに適用

• セレクタの最後に半角スペースなど開けない
• プロパティ部分以外インデントしない
• プロパティは改行して記述する
• 一番最後のプロパティに対しても「;（セミコロン）」をつける
• 複数のセレクタに適用するときは改行する

例：

#sample{（改行）
（インデント）margin:（半角スペース）10px（半角スペース）auto;（改行）
（インデント）background:（半角スペース）#f00;（改行）
}（改行）
#sample_2,（改行）
#sample_3{（改行）
（インデント）color:（半角スペース）#333;（改行）
}（改行）

★モジュール、ページごとまたは設定の特記事項のコメントを適宜記述する。
メンテナンス性

例：

/* マイページ全体 */
.sample{
}

/* 出荷履歴ページ */
.test{
}

★CSSの中で「@import」を利用しない。
表示高速化

表示速度に影響がでるため。モジュールごとに分ける場合は、作業ファイルのみにして本番にあげるときは合体させる。

★適宜モジュールごとにid、class名で囲み、CSSでプロパティのスコープを制限する。
メンテナンス性、表示事故防止

★事情がある場合を除き、リセットCSS以外で、スコープを限定しない指定を記載しない。
メンテナンス性、表示事故防止

予期しないCSSの適用により、表示事故が発生する。

★id、class名の命名規則
メンテナンス性

• 英数字小文字を利用
• 複数単語からなる場合は単語同士を「_（アンダーバー）」でつなぐ
• 数字を後ろにつける場合も「_」でつなげる。連番を振る場合は、1つ目は「img」のように「_1」はつけない。2つ目から「img_2」のようにする。
• 分かりやすく、構造を示す名称にする
• 運用することを考慮し、見栄えに関する名称はできるだけ付与しない。leftとつけてfloat:rightを設定することになると整合性が保てない。また、見栄えを定義した汎用クラス例えば「mb-10」（margin-bottom: 10px;）などを定義も同様。HTMLが汎用クラスだらけになり、1pxずつクラスを作る必要性が発生してきます。

推奨利用命名リスト：
img（画像）、lst（リスト）、s（区切り）、txt（テキスト）
sum（サマリー）、btn（ボタン）、add（追加）、削除（del）、wr（ラッパー）、led（リード文）、ttl（タイトル）、bnr（バナー）、mor（もっと見る的な）

★ベンダープレフィックスを利用する場合は、正規のプロパティの下に記述し、意図した表示になっているか確認を行う。
メンテナンス性、表示事故防止

ブラウザのバージョンアップにより、ベンダープレフィックスが必要でないかどうか適宜確認をする。
作っているときに必要でなければ、無駄なコードが増えるだけ。

★セレクタのネストはシンプルにする。
メンテナンス性、表示高速化

どうしても上書きをする上で重要度を上げなくてはいけない場合は可能。
モジュールごとにid名などを記載し、「そのid名の中の」という記述の仕方をすることで、長い記述を避ける。読みやすさ、容量削減につながる。

悪い例：
body #content #news p{
}

良い例：
#news p{
}

★できるだけショートハンドプロパティを利用する。
メンテナンス性、表示高速化

margin、paddingなどでは、値は4つに分けて記述する。3つは理解しにくいので避ける。

悪い例：
margin-top: 10px;
margin-right: 5px;
margin-left: 10px;
paddding-right: 10px;
padding-left: 5px;

良い例：
margin: 10px 5px 0 10px;
padding: 0 10px 0 5px;

★プロパティの記述順序は下記のとおりとする。
メンテナンス性

Mozilla.org Base Stylesをベースとして微調整したもの。

(視覚整形モデル)
display
visibility
list-style
position
top
right
bottom
left
z-index
float
clear
(ボックスモデル)
box-flex
box-sizing
box-shadow
width
height
margin
padding
overflow
border
border-radius 
（背景）
background
(フォントとテキスト、色)
color
font
font-size
font-weight
line-height
text-align
text-decoretion
text-indent
text-shadow
text-transform
vertical-align
(表)
table-layout
（生成内容）
content
cursor
（そのほかはここ以降に記載）

marginやpaddingなどを個別で書く場合は、上・右・下・左の順に並べる。
よく使うと思われるであろうものを記載しましたが、迷った場合は、下記を参考にしてください。

• CSSプロパティ記述順序

★色の指定は#とHEX（16進数）を使う。
メンテナンス性、表示高速化

透明度などある場合は例外。

例：
color: #c0c0c0;

★色の指定が3桁表記可能ならば短縮する。
表示高速化

悪い例：
color: #ffffff;

良い例：
color: #fff;

★値が「0」の場合は、後ろに「px」や「em」など単位をつけない。
表示高速化

例：
margin: 0 auto;

★ユニバーサルセレクタは基本的に使わない。
メンテナンス性、表示高速化

すべてに適用できる便利なセレクタだが、どの要素に向けて設定しているものなのか明確ではなくメンテナンス性が下がるので基本的には利用しない。
例えば、HTML上にtableなどなくても、その要素に対して処理が行わなれるため、表示速度が遅くなるといわれている。

#sample *{
 margin: 50px;
}

全体に効率よく指定しなければいけない場合、リセットCSSなどは例外とする。

★できるだけCSSハックは使わない
メンテナンス性

現状レガシーブラウザの数が少なくなってきていると思われる。
ハックを使うとそのあとのメンテナンスを考えなくてはいけなくなり、サポートを切ったあとの対応も必要となる。

★ゼロ以下の小数には接頭の0を省く。
表示高速化

悪い例：
margin-bottom: 0.8em;

良い例：
margin-bottom: .8em;

★クラス指定でタイプセレクタを記述しない。
表示高速化

クラスで要素をすでに指定しているので、書く必要性がないのとファイルサイズ削減のため。
バグや上書きのためどうしても必要であればＯＫ。

悪い例：
#sample li.img{
}

良い例：
#sample .img{
}

★背景画像などのURLは「""」や「''」で囲わない。
メンテナンス性、表示高速化

人によって「"」か「'」で混ざってしまうのと、容量削減のため。

background: url(/images/sample.png);

画像

★画像の形式を下記を基準に選択する
表示高速化

画像	形式
写真・グラデーションがあるグラフィックス	jpg形式（プログレッシブ）
グラフィックスでグラデーションがあまりない	png-8形式
アニメーション	gif形式

★画像の最適化を行う。
表示高速化

容量削減、不要な情報の削除など、ただし画像のクオリティに配慮すること。
Tinypng などのツールを利用する。

★画面上に表示されるサイズに合わせて画像のサイズを決める。
表示高速化

画面上で表示されるサイズより大きいサイズにしても意味のない場合、容量が大きくなってしまうだけ。レスポンシブ、Retina Display対応の場合は例外。

★文書的に意味があるものは背景画像ではなくてHTMLの画像にする
SEO、アクセシビリティ

★できるだけスプライトを利用する。
表示高速化

同じモジュールで使ったり、1つ1つの容量が大きくなものはできるだけスプライト画像にまとめる。

★Retina Display対応は適宜実施し、ファイル名をわかりやすくする。
ユーザビリティ、メンテナンス性

ロゴやアイコンなど必要な部分を確認して対応する。
実寸大より大きい画像を作る場合は、下記のようにファイル名をつけて実寸とRetina用の画像はメンテナス性を考え一緒にスプライトはしない。

2倍の画像：
[e-mail]

Javascript

★文法エラーをなくすため、バリデータをかける。
表示事故防止

適宜バリデータを利用する。

• JSLint

★JSOFF時の対応をしない場合は、可能な限り代替要素を用意する。
アクセシビリティ、SEO

★JSファイルはbody直下で呼び出す。
表示高速化

★JSは外部ファイルにして、ブラウザキャッシュを利用する。
表示高速化、メンテナンス性

★JSを呼びだすscript要素にdefer="defer"をつける
表示高速化

JSによって表示が妨げられるのを防ぐために、DOM構築後に実行されるように指定する。
埋め込んだ時点での処理が必要な場合は、この属性を入れる必要はない。
※これを利用すれば、bodyの終了タグの前にscriptを記載する必要がないがdefer属性をサポートしていないものも存在する可能性があるので一応いれておく。

<script src="sample.js" defer="defer"></script>

★名前空間を使う。
メンテナンス性

UIをいじるための名前空間を用意し、ほかのJSと衝突しないようにする。

var hogeUi = hogeUi || {};
hogeUi.sample = '';

hogeUi.opn = function(){
 //処理を記述
}
$(window).load( function(){
hogeUi.opn();
});

★グローバル変数を避けるため、関数内での変数宣言は「var」をつける。
表示事故防止、メンテナンス性

ほかの変数を上書きするのを防ぐため。

hogeUi.opn = function(){
 var btn = hoge;
};

★文の終わりにはセミコロンをつける。
表示事故防止、メンテナンス性

セミコロンの省略は可能な文もあるが、どこがどの組み合わせなのか分かりづらかったり、デバッグが困難な場合も発生する。

悪い例：
var y = x + f

良い例：
var y = x + f;

★モジュール、ページごとまたは設定の特記事項のコメントを適宜記述する。
メンテナンス性

例：

/*
 * マイページ
 * SP表示　商品検索の開閉
 */

★セキュリティなど触れる場合は、エンジニアの方に相談する。
セキュリティ

参考文献

• ベストなコーディング規約の作り方
• こんなHTMLとCSSのコーディング規約で書きたい
• Google HTML/CSS Style Guide
• Google JavaScript Style Guide
• 他人にやさしいソースコードの書き方 コーディング規約 JavaScript編
• CSSチュートリアルhttps://developer.mozilla.org/ja/docs/Web/CSS/Getting_started
• セレクタ
• クロスブラウザ
• プログレッシブ・エンハンスメント
• 【CSS】CSSプロパティの記述順について考えてみた
• Google JavaScript Style Guide 和訳
• メンテナブルCSS -　CyberAgent
• 僕が普段使っているCSSのルールをコーディング規約にしてみた
• 画像の代わりになるテキストを指定する（html5）
• HTML5の閉じタグについて
• HTML5 で省略できるタグ
• 非推奨要素と非推奨属性