HTMLコーディング規約を学ぶ「Google HTML/CSS Style Guide」

google推奨 コーディングルール

  • 綺麗なコードが書けるようになりたい
  • HTMLとCSSのコーディングルールを知りたい
  • 実践的な書き方が知りたい

以上の悩みを解決できる記事を用意しました!

これから紹介するルールを守りながらコーディングを進めれば、より綺麗なコードが書けるようになります。

※この記事は「Google HTML/CSS Style Guide」を引用しています。

General

「https:」を使う

画像などのメディアファイル、スタイルシート、スクリプトについては、それぞれのファイルがHTTPSで利用できない場合を除き、常にHTTPS(https:)を使用する

<!-- 非推奨: プロトコルの省略 -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<!-- 非推奨: httpの使用 -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

<!-- 推奨 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
/*  非推奨: プロトコルの省略 */
@import '//fonts.googleapis.com/css?family=Open+Sans';
/*  非推奨: httpの使用 */
@import 'http://fonts.googleapis.com/css?family=Open+Sans';

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

インデントはスペース2つ分

インデントはスペース2つ分。Tabは使用しない。

<ul>
  <li>Fantastic
  <li>Great
</ul>
.example {
  color: blue;
}

大文字は使わない。

大文字は使わない。小文字を使用する。

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

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

/* 推奨 */
color: #e5e5e5;

文末のスペースは削除

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

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

適切なコメントをつける

必要に応じて、可能な限りコードを説明する。
コメントを使ってコードを説明する。何をカバーしているのか、どのような目的で使われているのか、なぜそれぞれのソリューションが使われているのか、あるいは好まれているのか。

HTML

HTMLを検証する

可能な限り有効なHTMLを使用し、W3CのHTML Validatorなどのツールを使ってテストしてください。

<!-- 非推奨 -->
<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はその目的に応じて使用する。
要素は、その要素が作られた目的のために使用してください。例えば、見出しにはheading要素を、段落にはp要素を、アンカーにはa要素を使うなど。

MEMO
HTMLを目的に応じて使用することは、アクセシビリティ、再利用、コード効率の観点から重要
<!-- 非推奨 -->
<div onclick="goToRecommendations();">All recommendations</div>

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

代替コンテンツを提供する

画像、動画、キャンバスを使ったアニメーションなどのマルチメディアについては、必ず代替コンテンツを提供する。

代替コンテンツを提供することは、アクセシビリティの観点からも重要です。目の不自由な方は、alt属性がないと画像の内容を知る手がかりがありませんし、その他の方もビデオやオーディオの内容を理解する手段がないかもしれません。

MEMO
alt属性が冗長になってしまう画像や、目的が純粋に装飾的ですぐにCSSが使えない画像については、alt=””のように代替テキストを使用しないようにしてください
<!-- 非推奨  -->
<img src="spreadsheet.png">

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

構造と表現と動作を分離する

構造(HTML)、表現(CSS)、動作(JavaScript)を厳密に分離し、3つの相互作用を最小限に抑えるようにする。それぞれを別のファイルの分けて、ファイル同士の接触はなるべく避けようってことですね。

構造と表現と動作を分離することは、メンテナンス上の理由からも重要です。スタイルシートやスクリプトを更新するよりも、HTMLドキュメントやテンプレートを変更する方が常にコストがかかります。

Google HTML/CSS Style Guide
<!-- 非推奨  -->
<!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!

スタイルシートやスクリプトでは、type属性を省略する

stylesheetとscriptのtype属性は省略する。
HTML5ではデフォルトで解釈されるため必要ない。

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

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

<!-- 推奨  -->
<script src="https://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>

ダブルクオーテーション(“)を使用する

属性値にはシングルクォーテーション(”)ではなく、ダブルクォーテーション(””)を使用する

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

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

CSS

CSSを検証する

W3CのCSS validatorなどのツールを使ってテストしてください。

IDとClassの命名

体裁の良い名前や暗号のような名前ではなく、対象となる要素の目的を反映した、あるいは一般的なIDおよびクラス名を常に使用してください。

/* 非推奨 : 意味がない */
#yee-1901 {}

/* 非推奨 : 見た目を表す */
.button-green {}
.clear {}

/* 推奨 : 具体的 */
#gallery {}
#login {}
.video {}

/* 推奨 : 一般的 */
.aux {}
.alt {}

IDおよびクラス名のスタイル

IDやクラスの名称は、できるだけ短く簡潔に、必要に応じて長くしてください。

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

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

タイプセレクター

IDやクラス名をタイプセレクタで修飾することは避ける。
不必要な祖先セレクタを避けることは、パフォーマンス上の理由からも有効。

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

色の表記

可能な限り3文字の16進法で表記してください。

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

/* 推奨 */
color: #ebc;

アルファベット順に書く

アルファベット順に並べることで、覚えやすくメンテナンスしやすい一貫したコードを実現します。
CSSプロパティに複数のベンダー固有の接頭辞がある場合は、ソートしておく必要がある(例:-moz接頭辞が-webkitの前に来る)。

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

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

おわりに

一貫性を保つ。

もしあなたがコードを編集しているのであれば、周りのコードを見て、そのスタイルを判断してみてください。周りの人がすべての演算子の周りにスペースを使っていたら、あなたも使うべきです。彼らのコメントがハッシュマークの小さなボックスで囲まれていたら、あなたのコメントもハッシュマークの小さなボックスで囲むようにしましょう。

スタイルガイドラインを持つ意味は、コーディングの共通のボキャブラリーを持つことであり、人々はあなたがどのように言っているかではなく、あなたが言っていることに集中することができます。ここでは、語彙を知ってもらうためにグローバルなスタイルルールを提示していますが、ローカルなスタイルも重要です。ファイルに追加したコードが周りの既存のコードと大きく異なっていると、読者が読みに行くときにリズムが狂ってしまいます。これは避けましょう。

Google HTML/CSS Style Guide