Google HTML / CSS Style Guideを翻訳してみた。

　Google HTML/CSS Style Guide (【改正】2016.2.24 )

これまで何となく認識しているルールとか、規則ってありますよね・・・。「決まりがあることは知っているけど、守らなくても成り立っているからまぁいっか・・・そのうち覚えよう…。」とか言い訳をして、宙ぶらりんになっているものをひとつずつ掴んでスッキリしていこう！ということで、今回は、「Googleの定義するHTMLとCSSのガイドライン」を確認してみようと思います。

「知っていること」と「できること」は別の話。

近頃そんなことを痛感していますが、やはりWEBデザインに携わる者としてGoogleの公表するガイドラインは無視できません。ざ〜っと目を通して「理解した気」になっていてはいけない。覚えたことを、隣の人にもわかりやすく説明できてこそ知識と呼べるんじゃないか…と、自分を鼓舞しながら知識を共有できるように努めていきたいものです。

ガイドラインを改めて確認してわかりましたが、基本的なことが多く書かれています。英語記載のため目を通すにしても時間がかかってしまうのでちょっと一苦労…。そこで日本語に翻訳してみたので、この機会に確認してみてください。

きっと、「えっ？そうだったの！？」ってことが、ひとつやふたつあるのではないでしょうか？もし認識に不安のある方は、一緒に確認してみてください。

Google HTML/CSS Style Guide

はじめに

まず、ここからの内容は「HTML」と「CSS」の書式とスタイルの規則を定義しています。
コードの品質向上とサポートするインフラストラクチャを可能にすることを目的としています。

全体的なスタイルのルール / General Style Rules

プロトコル / Protocol

埋め込まれたリソースから、画像やその他のメディアファイル・スタイルシート・スクリプトを指すURLのプロトコル部分「http:, https:」を省略します。

▼Scriptの場合

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

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

▼CSSの場合

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

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

/* Bad */

.example {

background: url(http://www.google.com/images/example);

}

/* Good */

.example {

background: url(//www.google.com/images/example);

}

全体的な書式のルール / General Formatting Rules

インデント / Indentation

半角スペース2つ分でインデントします。
タブやスペースを混在させないように注意。

<ul>
  <li>Fantastic
  <li>Great
</ul>

<ul>

<li>Fantastic

<li>Great

</ul>

.example {
  color: blue;
}

.example {

color: blue;

}

大文字・小文字 / Capitalization

属性・HTMLの要素名・CSSセレクタ・プロパティ・プロパティの値（alt属性のように値が文字列になるものは除く）のコードはすべて小文字を使用します。

<!-- Bad -->
<A HREF="/">Home</A>

<!-- Good -->
<img src="google.png" alt="Google">

/* Bad */
color: #E5E5E5;

/* Good */
color: #e5e5e5;

/* Bad */

color: #E5E5E5;

/* Good */

color: #e5e5e5;

末尾の空白 / Trailing Whitespace

末尾の空白スペースは削除します。

<!-- Bad -->
<p>What?_

<!-- Good -->
<p>Yes please.

<p>What?_

<p>Yes please.

全体的なメタルール/General Meta Rules

エンコード / Encoding

エンコードは「UTF-8（BOM無し）」をHTMLテンプレートや文書内で指定します。

<meta charset="utf-8">

1	<meta charset="utf-8">

コメント / Comments

必要に応じてコードの目的をコメントとして説明します。

TODOコメント

コード内に「TODO(担当者):内容」をコメントとして記述します。

<!-- TODO(Aさん): remove optional tags -->

1	<!-- TODO(Aさん): remove optional tags -->

HTMLスタイルルール / HTML Style Rules

ドキュメントタイプ / Document Type

HTML5を使用します。XHTMLは、アプリケーション/xhtml+xmlのように、両方のブラウザとインフラストラクチャのサポートを欠いています。

<!DOCTYPE html>

1	<!DOCTYPE html>

HTMLバリデート / HTML Validity

適切なHTMLで記述すること。
W3CのHTMLバリデータなどのツールを使用して必ずテスト。

W3C HTML validator

<!-- Bad -->
<title>Test</title>
<article>This is only a test.

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

<article>This is only a test.

<!DOCTYPE html>

セマンティック / Semantics

見出しは見出し要素、段落は段落要素などとします。適切なタグを使用することで、アクセシビリティ、再利用、作業効率に有効です。

<!-- Bad -->
<div onclick="goToRecommendations();">All recommendations</div>

<!-- Good -->
<a href="recommendations/">All recommendations</a>

<div onclick="goToRecommendations();">All recommendations</div>

<a href="recommendations/">All recommendations</a>

マルチメディアの代替 / Multimedia Fallback

マルチメディア要素(画像・動画・オーディオコンテンツ)には、キャプションを記述します。代替コンテンツを記述することは、アクセシビリティのために重要。ただし、装飾的な目的で使用される画像については、代替テキストは記述しないで「alt=””」とします。

<!-- Bad -->
<img src="spreadsheet.png">

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

構成の分離 / Separation of Concerns

「文書構造」と「見た目に関する情報」は、分離すること。

<!-- Bad -->
<!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>
    
<!-- Good -->
<!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!

<!DOCTYPE html>

<title>HTML sucks</title>

<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>

<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!

実体参照 / Entity References

UTF-8を仮定して「（—）・”（”）・☺（☺）」のように実体参照を使用する必要はありません。特別な意味を持つ文字(< や & など)は例外です。

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

<!-- Good -->
The currency symbol for the Euro is “€”.

The currency symbol for the Euro is “&eur;”.

The currency symbol for the Euro is “€”.

オプションタグ / Optional Tags

ファイルサイズの最適化などのためにも省略できるタグは省略する。詳しくは「HTML5 specification」を参照してください。

HTML5 specification

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

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

<!DOCTYPE html>

<html>

<head>

<title>Spending money, spending bytes</title>

</head>

<body>

</body>

</html>

<!DOCTYPE html>

<title>Saving money, saving bytes</title>

<p>Qed.

type属性 / type Attributes

スタイルシートとスクリプトのタイプ属性を省略します。
HTML5は「text/css」と「text/javascript」をデフォルトで暗示するようになっていますので、type属性を指定する必要はありません。

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

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

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

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

HTMLの全体的なルール / HTML Formatting Rules

全体的な書式

ブロック要素・リスト要素・テーブル要素は、改行して記述。それらの子要素にはインデントを入れます。横並びのリストなどで改行による空白が表示に問題が出てしまう場合は、li要素を1行で書いても良い。

<blockquote>
  <p><em>Space</em>, the final frontier.</p>
</blockquote>

<p><em>Space</em>, the final frontier.</p>

</blockquote>

<ul>
  <li>Moe
  <li>Larry
  <li>Curly
</ul>

<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>

<table>

<thead>

<tr>

<th scope="col">Income

<th scope="col">Taxes

<tbody>

<tr>

<td>$ 5.00

<td>$ 4.50

</table>

HTMLの引用符 / HTML Quotation Marks

属性値を囲む場合「シングルクォート（’ ‘）」ではなく「ダブルクォート（” “）」二重引用符を使用します。

<!-- Bad -->
<a class='maia-button maia-button-secondary'>Sign in</a>

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

CSSスタイルルール / CSS Style Rules

CSSバリデート / CSS Validity

適切なCSSで記述すること。
HTML同様「W3C CSS validator」などのツールで検証する。

W3C CSS validator

IDとクラスのネーミング / ID and Class Naming

ID名とクラス名は、見た目をそのまま表すものや意味のわからない名前は避けましょう。その要素の目的や役割を反映するような名前を付けるようにします。

/* Good */
#yee-1901 {}

/* Bad */
#gallery {}
#login {}
.video {}

/* Good */

#yee-1901 {}

/* Bad */

#gallery {}

#login {}

.video {}

/* Good */
.button-green {}
.clear {}

/* Bad */
.aux {}
.alt {}

/* Good */

.button-green {}

.clear {}

/* Bad */

.aux {}

.alt {}

IDとクラス名のスタイル / ID and Class Name Style

可能な限り短い名前を付けます。意味がわからないほど短いのは良くありません。

/* Bad */
#navigation {}
.atr {}

/* Good */
#nav {}
.author {}

/* Bad */

#navigation {}

.atr {}

/* Good */

#nav {}

.author {}

タイプセレクタ / Type Selectors

ID名とクラス名にタイプセクタは記述しない。不要な子孫セレクタも避けましょう。

/* Bad */
ul#example {}
div.error {}

/* Good */
#example {}
.error {}

/* Bad */

ul#example {}

div.error {}

/* Good */

#example {}

.error {}

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

可能な限り短縮形のプロパティ(ショートハンドプロパティ)を使用してください。短縮形のプロパティを使用すると、コードの効率性と理解するのに便利。

/* Bad */
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;

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

/* Bad */

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;

/* Good */

border-top: 0;

font: 100%/1.6 palatino, georgia, serif;

padding: 0 1em 2em;

「0」と単位 / 0 and Units

「0」の値の場合には単位を省略します。

/* Bad */
margin: 0px;
padding: 0px;

/* Good */
margin: 0;
padding: 0;

/* Bad */

margin: 0px;

padding: 0px;

/* Good */

margin: 0;

padding: 0;

小数点の頭の「0」 / Leading 0s

小数点の頭の「0」は、省略します。

/* Bad */
font-size: 0.8em;

/* Good */
font-size: .8em;

/* Bad */

font-size: 0.8em;

/* Good */

font-size: .8em;

16進法 / Hexadecimal Notation

可能な場合は、16進表記を3文字で記述する。

/* Bad */
color: #eebbcc;

/* Good */
color: #ebc;

/* Bad */

color: #eebbcc;

/* Good */

color: #ebc;

プレフィックス(接頭辞) / Prefixes

外部サイトに埋め込まれるコードを開発する場合などは、ID名とクラス名が重複しないように接頭辞を付ける。

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

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

IDやクラス名の区切り記号 / ID and Class Name Delimiters

ID名やクラス名に付ける名前で、別々の単語はハイフンで繋ぎます。

/* Bad: */
.demoimage {}

/* Good */
.error-status {}

/* Bad: */

.demoimage {}

/* Good */

.error-status {}

CSSハック / Hacks

CSSハックは、ユーザーエージェントの検出または特別なCSSハック、回避策、およびハッキングオーバースタイリングの違いに対処するために魅力的です。最後の手段と考えるべきです。

CSSのフォーマットルール / CSS Formatting Rules

宣言の順序 / Declaration Order

保守が容易な方法で一貫性のあるコードを達成するために、アルファベット順に宣言を置きます。

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

background: fuchsia;

border: 1px solid;

-moz-border-radius: 4px;

-webkit-border-radius: 4px;

border-radius: 4px;

color: black;

text-align: center;

text-indent: 2em;

ブロック単位のインデント / Block Content Indentation

階層がひと目でわかるように、ブロック単位でインデントするようにする。

@media screen, projection {

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

}

@media screen, projection {

html {

background: #fff;

color: #444;

}

宣言の終わり / Declaration Stops

すべての宣言の後に「セミコロン(;)」を使用してください。

/* Bad */
.test {
  display: block;
  height: 100px
}
/* Good */
.test {
  display: block;
  height: 100px;
}

/* Bad */

.test {

display: block;

height: 100px

}

/* Good */

.test {

display: block;

height: 100px;

}

プロパティ名の終わり / Property Name Stops

プロパティ名の後ろは、「コロン(:)」の後に半角スペースを使用する。

/* Bad */
h3 {
  font-weight:bold;
}
/* Good */
h3 {
  font-weight: bold;
}

/* Bad */

h3 {

font-weight:bold;

}

/* Good */

h3 {

font-weight: bold;

}

宣言ブロック分離 / Declaration Block Separation

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

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

/* Bad */

#video

{

margin-top: 1em;

}

/* Good */

#video {

margin-top: 1em;

}

セレクタと宣言分離 / Selector and Declaration Separation

別のセレクタとプロパティは、改行して記述する。

/* Bad */
a:focus, a:active {
  position: relative; top: 1px;
}
/* Good */
h1,
h2,
h3 {
  font-weight: normal;
  line-height: 1.2;
}

/* Bad */

a:focus, a:active {

position: relative; top: 1px;

}

/* Good */

h1,

h2,

h3 {

font-weight: normal;

line-height: 1.2;

}

CSSルールの分離 / Rule Separation

プロパティごとに改行する。

html {
  background: #fff;
}

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

html {

background: #fff;

}

body {

margin: auto;

width: 50%;

}

CSS引用符 / CSS Quotation Marks

属性セレクタとプロパティ値のための単一引用符(‘)を使用します。

/* Bad */
@import url("//www.google.com/css/maia.css");

html {
  font-family: "open sans", arial, sans-serif;
}
/* Good */
@import url(//www.google.com/css/maia.css);

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

/* Bad */

@import url("//www.google.com/css/maia.css");

html {

font-family: "open sans", arial, sans-serif;

}

/* Good */

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

html {

font-family: 'open sans', arial, sans-serif;

}

CSSメタルール / CSS Meta Rules

セクションのコメント / Section Comments

改行を入れてコメントを挿入します。

/* Header */
#adw-header {}

/* Footer */
#adw-footer {}

/* Gallery */
.adw-gallery {}

/* Header */

#adw-header {}

/* Footer */

#adw-footer {}

/* Gallery */

.adw-gallery {}

最後に… / Parting Words

一貫性を持たせましょう！

コーディングは複数人で作業や管理することが多いはずです。その際に一貫性がなくルールもなければ編集をする人によって記述の仕方がバラバラになってしまいます。それが原因でタイムロスを食らったりするのは避けましょう。

Googleがルールを定めてくれていることに関しては、できるかぎりそれに従って記述したいものですね。

おつかれさまでした！