2013/10/01

あなたのコーディング、大丈夫? コーディング規約 HTML+CSS編

あなたのコーディング、大丈夫? コーディング規約 HTML+CSS編

目次

あなたのコーディング大丈夫?

あなたのコーディング大丈夫?

他人が書いたソースコードって読みづらいですよね。

「自分が読めればそれでいい。」

という風に考える方もいますが、保守管理を他人がやる場合も多く、好き勝手にコーディングしてしまうと、インデントがされてなかったり、コメントが無かったりと、読むのに一苦労どころではありません。

下手をするとエラーを吐きかねないソースコードに出くわすこともあります。

一目見て把握できるような人はともかく、皆さんこの苦しみを味わったことがあると思います。

「でも何を基準にコーディングすればいいのか分からない。」

そんなアナタのために、Googleが提唱している各種プログラミング言語のガイドラインの中から、HTMLとCSSのガイドラインを紹介します。

※なお、この記事は下記の内容を訳・抜粋したものであり、一部正確性に欠ける場合がございます。
Google HTML/CSS Style Guide
http://google-styleguide.googlecode.com/svn/trunk/htmlcssguide.xml
Revision 2.23版
原文ライセンス

HTMLとCSSの共通ルール

スタイルに関するルール

プロトコル

埋め込みリソースから(http,https)を省略します。

<!--非推奨 -->
<script src="http://www.google.com/js/gweb/analytics/autotrack.js"></script>


<!--推奨 -->
<script src="//www.google.com/js/gweb/analytics/autotrack.js"></script>
/*非推奨*/
.example {
  background: url(http://www.google.com/images/example);
}


/*推奨*/
.example {
  background: url(//www.google.com/images/example);
}

フォーマットに関するルール

インデント

インデントは半角スペース2文字とし、タブや半角スペースを混合して使用しない。

<!--非推奨 -->
<ul>
    <li>Fantastic
    <li>Great
</ul>


<!--推奨 -->
<ul>
  <li>Fantastic
  <li>Great
</ul>
/*非推奨*/
.example {
    color: blue;
}


/*推奨*/
.example {
  color: blue;
}

小文字の使用

HTMLの各要素、属性、属性値、CSSのセレクタ、プロパティ名、プロパティ値の記述には小文字を使用する。

<!-- 非推奨 -->
<A HREF="/">Home</A>


<!-- 推奨 -->
<img src="google.png" alt="Google">
/* 非推奨 */
color: #E5E5E5;


/* 推奨 */
color: #e5e5e5;

末尾の空白

末尾の空白は削除する。

<!-- 非推奨 -->
<p>What?_


<!-- 推奨 -->
<p>Yes please.

メタ規則に関するルール

エンコード設定

ソースコードのエンコードはUTF-8(BOMなし)を使用する。

注釈

保守管理しやすいように、必要に応じてコードの機能をコメントしておく。

アクションアイテム

コードにTODOをコメントとして記述する。(@@ではなくTODOを利用する)

{# TODO(john.doe): revisit centering #}
<center>Test</center>
<!-- TODO: remove optional tags -->
<ul>
  <li>Apples</li>
  <li>Oranges</li>
</ul>

HTMLに関するルール

HTMLに関するルール

HTMLスタイルに関するルール

記述に使用するドキュメントの種類

HTML5を使用する。

HTMLのバリデート

文法に則った記述をする。
閉じタグや、ドキュメントタイプの宣言(!DOCTYPE html)等をはじめ、いくつかのタグは省略できないため、省略できるタグと省略できないタグに注意し記述する。

<!-- 非推奨 -->
<title>Test</title>
<article>This is only a test.


<!-- 推奨 -->
<!DOCTYPE html>
<meta charset="utf-8">
<title>Test</title>
<article>This is only a test.</article>

意味のあるHTML

目的や機能に応じたHTMLを使用する。

<!-- 非推奨 -->
<div onclick="goToRecommendations();">All recommendations</div>


<!-- 推奨 -->
<a href="recommendations/">All recommendations</a>

マルチメディアコンテンツ

マルチメディアの代替コンテンツの提供としてalt属性を利用する。

<!-- 非推奨 -->
<img src="spreadsheet.png">


<!-- 推奨 -->
<img src="spreadsheet.png" alt="Spreadsheet screenshot.">

各構造を分離

マークアップ、スタイリング、スクリプトの各構造ごとに分割して記述する。
HTMLにスタイルの記述をせず、なるべく一つのスタイルシートにまとめる、スクリプトの記述も同様。

<!-- 非推奨 -->
<!DOCTYPE html>
<title>HTML sucks</title>
<link rel="stylesheet" href="base.css" media="screen">
<link rel="stylesheet" href="grid.css" media="screen">
<link rel="stylesheet" href="print.css" media="print">
<h1 style="font-size: 1em;">HTML sucks</h1>
<p>I've read about this on a few sites but now I'm sure:
  <u>HTML is stupid!!1</u>
<center>I can't believe there's no way to control the styling of
  my website without doing everything all over again!</center>


<!-- 推奨 -->
<!DOCTYPE html>
<title>My first CSS-only redesign</title>
<link rel="stylesheet" href="default.css">
<h1>My first CSS-only redesign</h1>
<p>I've read about this on a few sites but today I'm actually
  doing it: separating concerns and avoiding anything in the HTML of
  my website that is presentational.
<p>It's awesome!

実体参照の禁止

HTMLでの特殊な記号を除き、実体参照の禁止。

<!-- 非推奨 -->
The currency symbol for the Euro is &ldquo;&eur;&rdquo;.


<!-- 推奨 -->
The currency symbol for the Euro is "€". 

任意のタグの省略

記述の省略が出来るタブは省略する(オプション扱いのため、省略せずに記述しても問題ない)

<!-- 非推奨 -->
<!DOCTYPE html>
<html>
  <head>
    <title>Spending money, spending bytes</title>
  </head>
  <body>
    <p>Sic.</p>
  </body>
</html>


<!-- 推奨 -->
<!DOCTYPE html>
<title>Saving money, saving bytes</title>
<p>Qed.

スタイルシートとスクリプトの属性の省略

HTML5では、デフォルトの言語として扱われるため、スタイルシートとスクリプトの属性は省略して記述する。

<!-- 非推奨 -->
<link rel="stylesheet" href="//www.google.com/css/maia.css"
  type="text/css">


<!-- 推奨 -->
<link rel="stylesheet" href="//www.google.com/css/maia.css">


<!-- 非推奨 -->
<script src="//www.google.com/js/gweb/analytics/autotrack.js"
  type="text/javascript"></script>


<!-- 推奨 -->
<script src="//www.google.com/js/gweb/analytics/autotrack.js"></script>

HTMLの書式に関するルール

一般的な書式

ブロック、リスト、テーブル要素は改行し、子要素にはインデントを挿入する。

<blockquote>
  <p><em>Space</em>, the final frontier.</p>
</blockquote>
<ul>
  <li>Moe
  <li>Larry
  <li>Curly
</ul>
<table>
  <thead>
    <tr>
      <th scope="col">Income
      <th scope="col">Taxes
  <tbody>
    <tr>
      <td>$ 5.00
      <td>$ 4.50
</table>

HTMLでの引用符

引用符は単一引用符ではなく二重引用符を使用する。

<!-- 非推奨 -->
<a class='maia-button maia-button-secondary'>Sign in</a>


<!-- 推奨 -->
<a class="maia-button maia-button-secondary">Sign in</a>

CSSに関するルール

CSSに関するルール

CSSスタイルに関するルール

CSSのバリデート

規定された文法に則り、要求された使用に対して適切なCSSを記述する

IDとCLASS名のネーミング

見た目や適当な名前を設定せず、要素の目的や機能に応じた一般的な名前を設定する。

/* 非推奨 */
#yee-1901 {}

/* 非推奨 */
.button-green {}
.clear {}


/* 推奨 */
#gallery {}
#login {}
.video {}

/* 推奨 */
.aux {}
.alt {}

IDとCLASS名のスタイル

簡潔かつ意味のわかりやすい名前を設定する。

/* 非推奨 */
#navigation {}
.atr {}


/* 推奨 */
#nav {}
.author {}

タイプセレクタ

タイプセレクタで、IDやCLASS名のスタイリングの禁止。

/* 非推奨 */
ul#example {}
div.error {}


/* 推奨 */
#example {}
.error {}

プロパティ指定の簡略化

プロパティは細かく指定せず、一括で指定する。

/* 非推奨 */
border-top-style: none;
font-family: palatino, georgia, serif;
font-size: 100%;
line-height: 1.6;
padding-bottom: 2em;
padding-left: 1em;
padding-right: 1em;
padding-top: 0;


/* 推奨 */
border-top: 0;
font: 100%/1.6 palatino, georgia, serif;
padding: 0 1em 2em;

0と単位

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

margin: 0;
padding: 0;

小数点がある場合

1以下の数値を設定する場合には、0を省略し、小数点以下の値を入力する。

font-size: .8em;

16進数の数値の設定

可能な限り、3桁での16進数による値を設定する。

/* 非推奨 */
color: #eebbcc;


/* 推奨 */
color: #ebc;

固有の接頭辞を使用する。

IDやCLASS名に固有の接頭辞をつける。(オプション扱いなので付けなくても問題ない)

.adw-help {} /* AdWords */
#maia-note {} /* Maia */

IDとCLASS名の区切り文字

ハイフン以外での単語の連結を禁止する。

/* 非推奨(demoとimagesをそのまま連結) */
.demoimage {}

/* 非推奨(ハイフンではなくアンダースコアを使用) */
.error_status {}


/* 推奨*/
#video-id {}
.ads-sample {}

ハック

ユーザーエージェント対応のためにCSSハックを利用する前にほかの手段を試し、CSSハックは極力避けること。

CSSのフォーマットに関するルール

宣言順

アルファベット順に記述する。(ベンダー固有の接頭辞は除く)

background: fuchsia;
border: 1px solid;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
color: black;
text-align: center;
text-indent: 2em;

ブロックコンテンツのインデント

ブロックの内容は全てインデントし、階層を視認しやすくする。

@media screen, projection {

  html {
    background: #fff;
    color: #444;
  }

}

宣言の終了

行末には必ずセミコロンを付ける。

/* 非推奨 */
.test {
  display: block;
  height: 100px
}


/* 推奨*/
.test {
  display: block;
  height: 100px;
}

プロパティ名の終端

プロパティ名のコロンの後にスペースを挿入する。

/* 非推奨 */
h3 {
  font-weight:bold;
}


/* 推奨*/
h3 {
  font-weight: bold;
}

宣言とブロックの分離

最後のセレクタと宣言ブロックの間にスペースを挿入し、中括弧はセレクタと同じ行に記述する。

/* 非推奨(スペースがない) */
#video{
  margin-top: 1em;
}

/* 非推奨(改行されている) */
#video
{
  margin-top: 1em;
}


/* 推奨*/
#video {
  margin-top: 1em;
}

セレクタと宣言の分離

各セレクタと宣言は改行して分離する。

/* 非推奨 */
a:focus, a:active {
  position: relative; top: 1px;
}


/* 推奨*/
h1,
h2,
h3 {
  font-weight: normal;
  line-height: 1.2;
}

宣言ごとの行間

宣言ごとに一行の行間を空ける。

html {
  background: #fff;
}

body {
  margin: auto;
  width: 50%;
}

CSSの引用符

URLの指定には引用符を使用しない。
セレクタとプロパティの値には二重引用符ではなく単一引用符を使用する。

/* 非推奨 */
@import url("//www.google.com/css/maia.css");

html {
  font-family: "open sans", arial, sans-serif;
}


/* 推奨*/
@import url(//www.google.com/css/maia.css);

html {
  font-family: 'open sans', arial, sans-serif;
}

CSSのメタ規則に関するルール

セクションごとに適宜コメントを挿入する。

/* Header */

#adw-header {}

/* Footer */

#adw-footer {}

/* Gallery */

.adw-gallery {}

まとめ

コーディング規約は守ることで初めて意味を持ちます。

たとえ語彙が豊富だったとしても、伝え方を間違えれば意味が通らなくなってしまう恐れがあります。

Googleのガイドラインという、言わばグローバルルールに沿ってコーディングすることによって、読みやすく、保守管理の容易なコードになるでしょう。

他のコーディング規約についての記事

他人にやさしいソースコードの書き方 コーディング規約 JavaScript編