Help us understand the problem. What is going on with this article?

Google HTML/CSS Style Guide まとめ

Google HTML/CSS Style Guide(2019年9月時点)
より意訳とまとめ。訳が間違っていたらごめんなさい。

プロトコル

imageやmedia、scriptなどを指定するときに、可能な限り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つにする。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>Yes please.

一般的なMetaルール

エンコード

エンコードはUTF-8(no BOM)を使用する

<meta charset="utf-8">

コメント

必要に応じてコードを説明する。全てを説明しなくてよい。

TODO

TODOをコメントとして記述する。
@@のようなものは使用せず"TODO"キーワードだけを使う。

{# TODO(john.doe): revisit centering #}
<center>Test</center>

<!-- TODO: remove optional tags -->
<ul>
  <li>Apples</li>
  <li>Oranges</li>
</ul>

HTMLスタイルルール

ドキュメントタイプ

HTML5を使用する。
すべてのHTMLに<!DOCTYPE html>があるほうがよい。
void要素は /で閉じてはいけない。 <br /> など

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を書く

目的に応じたHTMLを使用する。(見出しの為のh要素、段落の為のp要素、アンカーの為のa要素など)

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

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

メディアの代替物

メディアについては、必ず他のアクセスを提供するようにする。

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

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

関係の分離

HTML(構造)とCSS(見た目)とScript(振る舞い)は独立させて、3つの相互関係はなるべく最小限にする。

ドキュメントやテンプレートにはHTMLだけを含むようにし、HTMLには構造だけを表現するようにする。
見た目に関するあらゆる内容はCSSへ、振る舞いに関してはScriptへ記述する。

HTMLからCSSやScriptへのリンクはなるべく減らし(まとめて)、互いのファイル間の接触部分をなるべく少なくする。

メンテナンス面を考慮すれば、構造、見た目、振る舞いの分離は重要。CSSやScriptの更新よりも、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!

実体参照

UTF-8において、&mdash;, &rdquo;, or &#x263a;などの実体参照を使用する必要はない。
例外としてHTMLで特別な意味を持つ"<"や"&"には使用する。

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

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

タグを省略する(任意)

ファイルサイズや、可読性の為に、省略できるタグ(html,body,/p,/tdなど)を省略する。
省略できるタグの参考: HTML5 specification

<!-- 非推奨 -->
<!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.

Type属性

stylesheetとscriptのtype属性は省略する。
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の書式ルール

全体的な書式

block, list, table要素は改行し、その子要素にはインデントを入れる。

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

長い行を改行する(任意)

可読性が向上する場合には長い行を改行する。
改行する場合には、少なくとも元のインデントよりスペース4つ分を追加する。

<md-progress-circular md-mode="indeterminate" class="md-accent"
    ng-show="ctrl.loading" md-diameter="35">
</md-progress-circular>

<md-progress-circular
    md-mode="indeterminate"
    class="md-accent"
    ng-show="ctrl.loading"
    md-diameter="35">
</md-progress-circular>

<md-progress-circular md-mode="indeterminate"
                      class="md-accent"
                      ng-show="ctrl.loading"
                      md-diameter="35">
</md-progress-circular>

HTML引用符

属性値の引用符は、ダブルクオーテーション(")を使用する。

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

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

CSSスタイルルール

CSSバリデーション

可能な限り、適切なCSSを書く。
W3C CSS validatorなどのツールを使用してテストする。

IDとClassのネーミング

理解しやすく、一般的なネーミングにする。

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

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

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

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

ID名とクラス名のスタイル

ID名とクラス名は可能な限り短くすること。必要であれば長くなっても構わない。

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

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

タイプセレクタ

ID名とクラス名にタイプセレクタを使用するのは避ける。
パフォーマンスの理由からも、不必要な子孫セレクタを使用するのは避ける。

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

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

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

可能な限りショートハンドプロパティを使用する。
CSSは様々なショートハンドプロバティを提供している。

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

小数点の値の始めの数字

始めの数字は省略する。

font-size: .8em;

HEX形式の色指定

可能であれば3文字の色コードを使用する。

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

/* 推奨 */
color: #ebc;

接頭詞(任意)

大きなプロジェクトの場合にIDやclass名が重複しないよう、固有の接頭詞を付ける。

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

ID名、class名の区切り文字

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

/* 非推奨: “demo” と “image” の間にハイフンが入っていない。 */
.demoimage {}

/* 非推奨: アンダースコアは使用しない。ハイフンを使用する。 */
.error_status {}

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

ハック

CSSを使用したユーザーエージェントの判定は避ける。違うアプローチを先に試す。

CSS書式ルール

プロパティを記述する順番

アルファベット順に記述する。(prefixは除外だが、-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;
}

ルールの分離

ルールとルールの間は1行空ける。

html {
  background: #fff;
}

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

CSS引用符

属性セレクタやプロパティ値の引用符にはシングルクォーテーション(')を使用する。
URI値には引用符を使用しない。
例外: @charsetを使用する必要がない場合は、シングルクォーテーションは許可されない為、ダブルクォーテーションを使用する。

/* 非推奨 */
@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 {}

別れの言葉

一貫性を持ってください。

コードを編集する場合、数分かけてまわりのコードのスタイルを明らかにしましょう。
皆が計算式の前後にスペースを入れているのであれば、あなたもそうするべきです。
コメントの前後が#で囲われているなら、あなたもそうしましょう。

ガイドラインを持つポイントは、皆がコーディングに集中できるように共通の語彙持つことです。
ここでは、人々が知っている語彙でグローバルなスタイルを提示していますが、ローカルのスタイルのほうが重要です。

あなたが追加したコードが、まわりと大きく違うコードだと、読む人のリズムが崩れるので、このようなこと避けましょう。

comnico
世界に誇るソーシャルメディアプロフェッショナル集団を創る
http://www.comnico.jp
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした