現在のGoogle HTML/CSS Guide コーディング規約/日本語訳

コーディングを勉強している方や、普段当たり前のようにコーディングしているけれど、上手く使えているのか不安な方向けにGoogle HTML/CSS Guideの翻訳記事を書きました。（2024年02月29日更新）

色んな方のコーディングを見ていると実に様々。情報や知識が古いままで、今では推奨されない書き方も散見されます。

特に仕事で使っていると、誰かに指摘されない限り自分のコーディングを見直す事は無いかもしれません。

ですがW3Cの定めたHTML5の廃止など、変化の速い業界では定期的な見直しは勿論、何か指標となる物があると安心です。

そこで今回はGoogleが用意しているgoogle html/css style guideのドキュメントを元に、Googleコーディング規約と要点を解説。このコーディングガイドラインが絶対的な正解では無いかも知れませんが、参考になれば嬉しいです。

Google翻訳を使い、分かり易いように意訳した日本語訳と個人的な見解を入れました。原文は引用元をどうぞ。

引用元：Google HTML/CSS Style Guide

賛否ありますが、Googleスタイルガイドと見比べて下さいね。

この記事の目次

プロトコルはHTTPSを使用する

画像やその他のメディアファイル、スタイルシート、スクリプトには、HTTPS経由で利用できない場合を除き、常にHTTPS（https:)を使用する。

リンクを貼る時にURLを記述するわけですが、要するに、「HTTP」ではなく「HTTPS」を使いましょうって事です。理由もなく省略はしません。

その昔、まだ「HTTPS://」に対応していないサイトも沢山有ったので、省略して「//」と書く事により「HTTP://」にも対応出来るようにしていました。

この「s」はsecure：セキュアの事で「安全である」「危険がない」という意味です。
「HTTPS://」だと通信内容が暗号化されるので第三者に見られない様になります。

・HTTP（Hyper Text Transfer Protocol）
・HTTPS（Hypertext Transfer Protocol Secure）

フエル

今では基本的に「HTTPS://」の対応が必須。昔とは逆で、省略せずにきちんと書きましょう。

<!-- 非推奨 -->
<script src="//ajax.googleapis.com"></script> プロトコル省略

<!-- 非推奨 -->
<script src="http://ajax.googleapis.com"></script> HTTPはセキュアでは無い

<!-- 推奨 -->
@import 'https://fonts.googleapis.com/css?family=Open+Sans';

「HTTPS」そのものが省略されている例と、「HTTP」で書かれていて「s」が付いていない例。いずれも非推奨です。SSL化しましょう。

一般的なフォーマット規則

インデントルール：字下げ

インデントルールとして半角で2スペース分を字下げします。

ポイントは、字下げにタブを使用したり、タブとスペースを混在させない事。

タブが混在していると可読性が悪くなります。サンプルでは伝わっていないかもしれませんが、エディタで見た時にガタついてしまいます。

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

.example {
  color: blue;
}

大文字を使用しない

すべてのコードは小文字である必要があります。これは、HTML要素名、属性、属性値（text/CDATA除く）、CSSセレクター、プロパティ、およびプロパティ値（文字列を除く）に適用されます。

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

/* 推奨 */
color: #e5e5e5;

/* 推奨 */　alt属性値の「Google」は大文字でもOK
<img src="google.png" alt="Google">

一般的なメタルール

エンコーディング

UTF-8（BOMなし）を使用します。

UTF-8とは: 誤解を恐れずざっくり言うと、文字を表すルールの様な物。文字コードと言います。
世界には色んな言語や記号があるので、コンピュータ上で文字を表すためのルールが何なのかを教えてあげる必要があるんですね。UTF-8は世界的に一般的な文字コードです。

必要に応じてコメントを使用してコードを説明します。そのコードは何のために書かれたものか説明を付けましょうって事。

フエル

僕の場合、一時的に追加したものや、定期的に修正するものにコメントを付けています。

HTMLスタイルのルール

ドキュメントタイプ

HTML5（HTML構文： <!DOCTYPE html>）は、すべてのHTMLドキュメントで推奨です。

void要素は閉じないでください。つまり、<br />ではなく<br>と記述してください。

void要素とは空要素の事。終了タグが存在せず（存在出来ず）、常に開始タグのみで記述される要素です。存在出来ずってのがポイントで、pやliの様に省略出来るタグの事ではありません。

HTMLの有効性

可能な限り適切な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>

セマンティクス

目的に応じた要素（誤って「タグ」と呼ばれることもあります）を使用します。

開始タグから終了タグ、そこに挟まれた内容も含めたものを要素と呼びます。

たとえば、見出しには見出し要素、段落にp要素、アンカーにはa要素などを使用します。

目的に応じた要素を使用することは、アクセシビリティ、再利用、およびコード効率の理由から重要です。

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

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

マルチメディアフォールバック

マルチメディアの代替コンテンツを提供します。
画像、ビデオ、canvasを介したアニメーションオブジェクトなどのマルチメディアの場合は、代替アクセスを提供するようにする。

意味のある画像では「alt」で代替テキストを使用し、ビデオとオーディオはトランスクリプト（文字おこし）とキャプション（利用可能な場合）を入れる。

例えば画像なら、表示できなかった時に代替としてalt属性のテキストを代わりに表示します。これはアクセシビリティの理由からも重要で、目の不自由なユーザーに音声で情報を伝える手段にもなります。

CSSでの装飾目的で画像を使う場合、alt属性は「alt=””」の様に代替テキストは使用しない。

<!-- 非推奨 -->　/* alt属性が無い */
<img src="spreadsheet.png">

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

関心事の分離

HTML（構造）、CSS（スタイリング）、およびスクリプト（動作）を厳密に区別し、ファイル内にはHTML（構造）のみがあり、CSSはスタイルシートに記述し、スクリプトにスクリプトファイルへ記述する。

これは、HTMLとCSS、JavaScriptはそれぞれ役割ごとに分離させて、それぞれのファイルをHTMLファイルに読み込ませようって事です。

HTML（構造）、つまり要素の中にスタイルを記述したり、スクリプトを書くのではなく、それぞれのファイルを読み込ませれば、更新やメンテナンスもし易やくなります。

エンティティ参照

同じエンコーディング（UTF-8）のファイルとエディターを使って記述するのであれば、— 、 ” 、または☺のようなエンティティ参照を使用する必要はありません、

唯一の例外は、HTMLで特別な意味を持つ文字（ <や& ）と、制御文字または「非表示」文字（改行なしスペースなど）に適用されます。

例えば上記の特別な意味を持つ文字だと、「<」「>」や「&」、半角スペースだと「 」などがあります。

type属性

cssファイルとJavaScriptファイルのtype属性は省略します。
HTML5はデフォルトでtext/cssとtext/javascriptを暗示しているため、改めてtype属性を指定する必要はありません。

<!-- 非推奨 -->
<link rel="stylesheet"
 href="https://www.google.com/css/maia.css" type="text/css">
<!-- 非推奨 -->
<script src="https://www.google.com/js/autotrack.js" 
type="text/javascript"></script>

<!-- 推奨 -->
<link rel="stylesheet" href="https://www.google.com/css/maia.css">
<!-- 推奨 -->
<script src="https://www.google.com/js/autotrack.js"></script>

HTML引用符

属性値を引用するときは、二重引用符「””」を使用してください。

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

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

CSSスタイルルール

CSSの有効性

出来る限り適切なCSSを使用してください。

IDとクラスの命名

意味のある、または一般的なID名とクラス名を使用します。

要素の目的を反映した、具体的な名前を使用することをお勧めします。これらの名前は最も理解しやすく、変更される可能性も低いためです。

/* 非推奨 */
#yee-1901 {} /* 何をするものかよく分からないです */
.button-green {} /* 将来、別の色に変更したい時に困ります */
.clear {}

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

IDとクラス名のスタイル

ID名またはクラス名はできるだけ簡潔に。しかし、必要なら長いものでも可能。

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

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

タイプセレクター

ID名とクラス名にタイプセレクターを付けない。
不要な祖先セレクターを付けないのは、パフォーマンス上の理由から役立ちます。

下の例でいうと、IDの前にわざわざ「ul」を付ける必要はありません。
スタイルシステムは右端のセレクターから左へセレクターをチェックして、ルールに一致するかを見ています。
ID名は固有のものなので、ページ内でそのID名さえ見つかれば「ul」をわざわざチェックする必要はないはずです。

/* 非推奨 */
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」の値の後の単位指定は省略する。

flex: 0px; /* flex-basisには単位が必要です。 */
flex: 1 1 0px; /* IE11では単位が必要です。 */
margin: 0;
padding: 0;

値が0から始まるもの

値の先頭の「0」は省略してください。

font-size: .8em;

16進数表記

可能な場合は、3文字の16進表記を使用しする。
3文字の16進表記はより短く、より簡潔になります。

色を指定する場合、R、G、Bをそれぞれ16進数で表します。

16進数とは、0から9までの10個の数字と、AからFまでの6個のアルファベットを使って数値を表現する方法である。 16進数では、ひとつの桁において0、1、2、3、4、5、6、7、8、9、A、B、C、D、E、Fと並ぶ16個の数値を扱うことができる。
weblio辞書 IT用語辞典バイナリ

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

/* 推奨 */
color: #ebc;

IDおよびクラス名の区切り文字

ID名とクラス名はハイフンを使用して単語を区切る。

/* 非推奨 */
.demoimage {} "demo" と "image" を区切っていない
.error_status {} アンダースコアを使っている

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

ブロックコンテンツの字下げ

字下げする事で階層が分かり易くなります。

@media screen, projection {
  html {
    background: #fff;
    color: #444;
  }
}

宣言を停止する

すべての宣言の後にセミコロン「；」を使用します。

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

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

宣言ブロックの分離

最後のセレクターと宣言ブロックの間に常にスペースを１つ入れます。
※エラーではありませんが、空けないと可読性が悪いです。

/* 推奨 */
#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;
}

ルールの分離

ルールとルールの間は常に1行開けましょう。
※こちらも同じく、空けないと可読性が悪いです。

html {
  background: #fff;
}
body {
  margin: auto;
  width: 50%;
}

CSS引用符

属性セレクターとプロパティ値には、二重引用符（ "" ）ではなく単一引用符（ '' ）を使用。
URI値に引用符を使用しない「 url()」。

例外： @charsetルールを使用する必要がある場合は、二重引用符を使用してください。

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

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

セクションコメント

可能であれば、コメントを使用して各セクションをグループ化し、そこにそれぞれのスタイルを記述します。

/* Header */
#adw-header {}

/* Footer */
#adw-footer {}

/* Gallery */
.adw-gallery {}

一貫性を保つ

超意訳：
誰かが書いたコードを自分が編集する場合は、そこに書かれているルールを見て、自分もそれに合わせよう。コメントの周りにハッシュマークのボックスがある場合は、自分も同じようにコメントにハッシュマークのボックスを配置する。

スタイルガイドラインを持つ事のポイントは、コーディングに集中出来るように共通のルールを持つこと。
ここで紹介したルールはあくまでグローバルスタイル。みんなが理解出来る様にしてあるけど、自分たちのローカルルールも重要です。
自分のルールで追加したコードが、そのファイル内の既存のコードと大幅に異なって見えると、他の編集者が読みづらくなります。
これは避けましょうね。