元気な女の子

HTML/CSS/JavaScriptなどのWeb制作ガイドライン。

あくまで基本的なガイドラインであって、案件ごとに変更します。

また、随時更新していきます。

目次
  1. 全体的なスタイルルール
  2. HTMLのルール
  3. CSSのルール
  4. 命名規則について
  5. 検証について
  6. その他気をつける細かいとこ

全体的なスタイルルール

エンコード

エンコードは、UTF-8(BOM無し)を使う。

<meta charset="utf-8">

大文字,小文字

小文字のみ使用する。alt属性などの場合は除く。

<!-- NG -->
<img SRC="../img/sample.jpeg" alt="Sample">

<!-- OK -->
<img src="../img/sample.jpeg" alt="Sample">

インデント

半角スペース2つ分でインデントする。
タブとスペースの混在はNG。

<ul>
  <li>リスト</li>
  <li>リスト</li>
</ul>

文末のスペース

文末のスペースを削除する。

HTMLのルール

ドキュメントタイプ

HTML5を使う。

<!DOCTYPE html>

セマンティックな記述

目的に応じたHTMLを書く。

見出しはhx、段落はp、リンクはaなど。
onclickのようなJavaScriptの振る舞いを入れない。

<!-- NG -->
<div onclick="sample();">Sample</div>

<!-- OK -->
<a href="sample/">Sample</a>

構成要素の分離

見た目に関するものはCSSに、動きに関するものはJavaScriptへ移して記述する。

type属性

HTML5ではデフォルトの言語として解釈されるため、CSSとJavaScriptのtype属性は省略する。

CSS
<!-- NG -->
<link rel="stylesheet" href="style.css" type="text/css">

<!-- OK -->
<link rel="stylesheet" href="style.css">
JavaScript
<!-- NG -->
<script src="main.js" type="text/javascript"></script>

<!-- OK -->
<script src="main.js"></script>

CSSのルール

タイプセレクタは記述しない

IDとクラス名にタイプセレクタは記述しない。

/* NG */
ul#sample {}
div.sample {}

/* OK */
#sample {}
.sample {}

ショートハンドプロパティ

可能な限りショートハンドプロパティを使う

/* NG */
.sample {
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 10px;
}

/* OK */
.sample {
  padding: 10px 10px 0 10px;
}

値が「0」の場合の単位省略

値が0の場合は単位を省略する。

/* NG */
.sample {
  margin: 0px;
}

/* OK */
.sample {
  margin: 0;
}

小数点の頭の「0」を省略

小数点の頭が0の場合は省略する。

/* NG */
.sample {
  font-size: 0.5em;
}

/* OK */
.sample {
  font-size: .5em;
}

URI値の引用符

url()の指定でダブルクォーテーション(””)やシングルクォーテーション(”)は省略する。

.sample {
  background: url(../img/sample.png);
}

カラーコードの省略

HEX形式のカラーコードで3文字で表記できるものは3文字で記述する。

/* NG */
.sample {
  color: #333333;
}

/* OK */
.sample {
  color: #333;
}

プロパティの記述順序

mozilla.org Base Stylesを踏襲。外から内のイメージ。

  1. 要素について(display, content, list-style)
  2. 位置情報系(position, top, right, z-index, float)
  3. サイズ系(width, height, padding, margin)
  4. 背景、枠(background, background-image, border)
  5. 文字系(font, line-height, letter-spacing, color, text-align, vertical-align)
  6. その他(animation, transition, transform)

プロパティ名の終わりにスペースを

プロパティ名の終わりにあるコロンの後はスペースを入れる。

/* NG */
.sample {
  color:red;
}

/* OK */
.sample {
  color: red;
}

命名規則について

画像ファイル名

  1. 種類:必須
  2. 詳細
  3. 状態
1.種類 [必須]

「ボタン」や「背景」など、どこに使われるか分かるもの。

例)btn_, bg_, bnr_, icon_

2.詳細

用途などが分かるもの。

例)submit_, close_,

3.状態

ボタンのon / off状態で使うアイコンなど。

例)on, off,

CSSのclass, id名

class, id名はデザインからではなく、「どこ」で「何を表現するか」で考える。

  • 位置や色、大きさなどを表す名前は使わない(left, right, red, blue, large, small…)
  • 単語の区切りはハイフン(-)を使う
  • JavaScriptで使うclassにはjsプレフィックス(js-)をつける
class, id名例
要素 名称例
部分 header, footer, main, nav, article
順位的なもの main, sub, primary, secondary
container, wrap, inner
子要素系 box, area, unit, block
項目系 item, list
タイトル ttl
ボタン btn
画像系 img, figure
現在地や状態 current, active, close, show

検証について

HTML

検証ツール

Nu Html Checker

適切なHTMLが書かれているかどうか、エラーを探す。

CSS

W3C CSS validator

適切なCSSが書かれているかどうか、エラーを探す。

パフォーマンス

PageSpeed Insights

ページスピードの目安に使う。

その他気をつける細かいとこ

HTML

  • システムで変わる部分を考慮したHTMLのタグ構成。
    開発ではdivやspanをよく追加するので影響を受けやすい点などを考慮。

CSS

  • フォントファミリーの指定
    必ず最後に sans-serif か serif を指定。ゴシック系ならsans-serif、明朝系ならserif。
  • webkit-text-size-adjust: 100%;を指定。
    スマホを横向きにした時にフォントサイズが変わらないように。
  • positionは必ずtopやleftを指定する。
    一見問題なさそうに見えてもスマホのバージョンによってずれることがある。
  • 動的な部分か、静的な部分かを考慮
    例えば上下中央揃えのとき、静的な部分だけはline-heightのテクニックを使うなど。
  • マージンの方向を一定に
    要素間のマージンをmargin-topやmartin-bottomなどごちゃ混ぜにしない。
  • 要素が消えた時、スタイルが保たれるか。