html、CSSの記述ガイドライン | スターリンクス【webデザイン/グラフィックデザイン】

- Category - 未分類

2020年10月29日時点で確認したgoogleの出したhtml、CSSの記述ガイドライン

https://google.github.io/styleguide/htmlcssguide.html

ページを日本語翻訳で見てもいいけど、colorとかmargin-topとかタグも翻訳されてしまうので、注意が必要です。

1背景

このドキュメントでは、HTMLとCSSのフォーマットとスタイルのルールを定義しています。コラボレーション、コード品質を改善し、インフラストラクチャをサポートできるようにすることを目的としています。これは、GSSファイルを含むHTMLおよびCSSを使用する未加工の作業ファイルに適用されます。一般的なコード品質が維持されている限り、ツールは自由に難読化、縮小、およびコンパイルできます。

2一般

2.1一般的なスタイルルール

2.1.1プロトコル

可能な場合は、埋め込みリソースにHTTPSを使用します。

https:画像やその他のメディアファイル、スタイルシート、スクリプトには、それぞれのファイルがHTTPS経由で利用できない場合を除き、常にHTTPS（）を使用してください。

<!-- Not recommended: omits the protocol -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

<!-- Not recommended: uses HTTP -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

<!-- Recommended -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

/* Not recommended: omits the protocol */
@import '//fonts.googleapis.com/css?family=Open+Sans';

/* Not recommended: uses HTTP */
@import 'http://fonts.googleapis.com/css?family=Open+Sans';

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

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

2.2.1インデント

一度に2スペースずつインデントします。

インデントにタブを使用したり、タブとスペースを混在させたりしないでください。

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

.example {
  color: blue;
}

2.2.2大文字の使用

小文字のみを使用してください。

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

<!-- Not recommended -->
<A HREF="/">Home</A>

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

/* Not recommended */
color: #E5E5E5;

/* Recommended */
color: #e5e5e5;

2.2.3末尾の空白

末尾の空白を削除します。

末尾の空白は不要であり、差分を複雑にする可能性があります。

<!-- Not recommended -->
<p>What?_

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

2.3一般的なメタルール

2.3.1エンコーディング

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

エディターがバイトオーダーマークなしでUTF-8を文字エンコードとして使用していることを確認してください。

を介してHTMLテンプレートおよびドキュメントのエンコーディングを指定します<meta charset="utf-8">。スタイルシートはUTF-8を想定しているため、スタイルシートのエンコーディングを指定しないでください。

（エンコーディングとそれらを指定するタイミングと方法の詳細については、HTMLおよびCSSでの文字エンコーディングの処理を参照してください。）

2.3.2コメント

可能な場合は、必要に応じてコードを説明します。

コメントを使用してコードを説明します。コードは何をカバーし、どのような目的を果たし、それぞれのソリューションが使用または推奨されるのですか？

（この項目は、完全に文書化されたコードを常に要求するという現実的な期待とは見なされないため、オプションです。マイレージは、HTMLおよびCSSコードによって大きく異なり、プロジェクトの複雑さによって異なります。）

2.3.3アクションアイテム

ToDoとアクションアイテムをTODO。でマークします。

のTODOような他の一般的な形式ではなく、キーワードのみを使用してToDoを強調表示します @@。

形式と同様に、括弧内に連絡先（ユーザー名またはメーリングリスト）を追加します TODO(contact)。

のように、コロンの後にアクションアイテムを追加しTODO: action itemます。

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

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

3 HTML

3.1HTMLスタイルのルール

3.1.1ドキュメントタイプ

HTML5を使用します。

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

（HTMLを使用することをお勧めします。XHTMLtext/htmlは使用しないでください。XHTML application/xhtml+xmlは、ブラウザとインフラストラクチャの両方のサポートがなく、HTMLよりも最適化の余地が少ないためです。）

HTMLでも問題ありませんが、void要素を閉じ<br>ないでください<br />。つまり、ではなく書き込みを行ってください。

3.1.2HTMLの有効性

可能な場合は有効なHTMLを使用してください。

ファイルサイズに関するパフォーマンス目標を達成できないためにそれが不可能でない限り、有効なHTMLコードを使用してください。

W3CHTMLバリデーターなどのツールを使用してテストします。

有効なHTMLを使用することは、技術的な要件と制約についての学習に貢献し、適切なHTMLの使用を保証する測定可能なベースライン品質属性です。

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

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

3.1.3セマンティクス

目的に応じてHTMLを使用してください。

作成された目的に要素（誤って「タグ」と呼ばれることもあります）を使用します。たとえば、見出しには見出しp要素、段落にはa要素、アンカーには要素を使用します。

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

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

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

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

マルチメディアの代替コンテンツを提供します。

を介した画像、ビデオ、アニメーションオブジェクトなどのマルチメディアの場合は、canvas代替アクセスを提供するようにしてください。意味のある代替テキスト（alt）の使用を意味する画像、およびビデオとオーディオの文字起こしとキャプション（利用可能な場合）。

アクセシビリティの理由から、代替コンテンツを提供することは重要です。目の不自由なユーザーは、画像がない@alt場合に画像が何であるかを知る手がかりがほとんどなく、他のユーザーもビデオまたはオーディオコンテンツが何であるかを理解する方法がない場合があります。

（alt属性が冗長性を導入する画像、およびCSSをすぐに使用できない純粋に装飾的な目的の画像の場合は、のように代替テキストを使用しないでくださいalt=""。）

<!-- Not recommended -->
<img src="spreadsheet.png">

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

3.1.5関心の分離

構造をプレゼンテーションから行動から分離します。

構造（マークアップ）、プレゼンテーション（スタイリング）、および動作（スクリプト）を厳密に区別し、3つの間の相互作用を最小限に抑えるようにしてください。

つまり、ドキュメントとテンプレートに、構造的な目的のみを提供するHTMLとHTMLのみが含まれていることを確認してください。プレゼンテーションのすべてをスタイルシートに移動し、動作のすべてをスクリプトに移動します。

さらに、ドキュメントとテンプレートからできるだけ少ないスタイルシートとスクリプトをリンクすることにより、連絡先領域をできるだけ小さくします。

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

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

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

3.1.6エンティティ参照

エンティティ参照は使用しないでください。

そこのような使用の実体参照する必要がない—、”または ☺、同じエンコーディング（UTF-8）は、ファイルやエディタのためだけでなく、チーム間使用されていると仮定します。

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

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

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

3.1.7オプションのタグ

オプションのタグを省略します（オプション）。

ファイルサイズの最適化とスキャン可能性の目的で、オプションのタグを省略することを検討してください。HTML5仕様のタグを省略することができるかを定義。

（このアプローチでは、Web開発者が通常教えているものとは大幅に異なるため、より広いガイドラインとして猶予期間を確立する必要がある場合があります。一貫性と単純さの理由から、選択だけでなくすべてのオプションのタグを省略することをお勧めします。）

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

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

3.1.8`type`属性

typeスタイルシートとスクリプトの属性を省略します。

typeスタイルシート（CSSを使用しない場合を除く）およびスクリプト（JavaScriptを使用しない場合を除く）の属性を使用しないでください。

typeHTML5が暗示しているようにtext/css 、text/javascript またデフォルトとして、これらのコンテキストで属性を指定する必要はありません。これは、古いブラウザでも安全に実行できます。

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

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

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

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

3.2HTMLフォーマット規則

3.2.1一般的なフォーマット

すべてのブロック、リスト、またはテーブル要素に改行を使用し、そのようなすべての子要素をインデントします。

要素のスタイルとは関係なく（CSSでは要素がdisplayプロパティごとに異なる役割を担うことができるため）、すべてのブロック、リスト、またはテーブル要素を新しい行に配置します。

また、ブロック、リスト、またはテーブル要素の子要素である場合は、それらをインデントします。

（リスト項目間の空白に関する問題が発生した場合は、すべてのli要素を1行にまとめることができます。リンターはエラーではなく警告をスローすることをお勧めします。）

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

3.2.2HTML行の折り返し

長い行を分割します（オプション）。

HTMLには列制限の推奨事項はありませんが、読みやすさが大幅に向上する場合は、長い行を折り返すことを検討してください。

行を折り返すときは、各継続行を元の行から少なくとも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>

3.2.3HTML引用符

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

属性値を""一重引用符（）ではなく二重引用符（''）で囲みます。

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

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

4 CSS

4.1CSSスタイルルール

4.1.1CSSの有効性

可能な場合は有効なCSSを使用してください。

CSSバリデーターのバグを処理したり、独自の構文を必要としたりしない限り、有効なCSSコードを使用してください。

W3CCSSバリデーターなどのツールを使用してテストします。

有効なCSSを使用することは、測定可能なベースライン品質属性であり、効果がなく削除できるCSSコードを見つけることができ、適切なCSSの使用を保証します。

4.1.2IDとクラスの命名

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

表示名や不可解な名前の代わりに、問題の要素の目的を反映する、または一般的なIDとクラス名を常に使用してください。

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

一般名は、兄弟と異なる意味がない、または意味がない要素の単なるフォールバックです。通常、「ヘルパー」として必要です。

機能名または総称名を使用すると、不要なドキュメントまたはテンプレートが変更される可能性が低くなります。

/* Not recommended: meaningless */
#yee-1901 {}

/* Not recommended: presentational */
.button-green {}
.clear {}

/* Recommended: specific */
#gallery {}
#login {}
.video {}

/* Recommended: generic */
.aux {}
.alt {}

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

できるだけ短く、必要なだけ長いIDとクラス名を使用してください。

IDまたはクラスが何であるかを、できるだけ簡潔に伝えてください。

このようにIDとクラス名を使用すると、許容可能なレベルの理解とコード効率に貢献します。

/* Not recommended */
#navigation {}
.atr {}

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

4.1.4タイプセレクター

タイプセレクタでIDとクラス名を修飾することは避けてください。

必要な場合を除いて（たとえばヘルパークラスの場合）、IDまたはクラスと組み合わせて要素名を使用しないでください。

不要な祖先セレクターを回避することは、パフォーマンス上の理由から役立ちます。

/* Not recommended */
ul#example {}
div.error {}

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

4.1.5省略形のプロパティ

可能な場合は省略形のプロパティを使用します。

CSSは、1つの値のみが明示的に設定されている場合でも、可能な限り使用する必要があるさまざまな省略形のプロパティ（などfont）を提供します。

省略形のプロパティを使用すると、コードの効率と理解に役立ちます。

/* Not recommended */
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;

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

4.1.60および単位

必要な場合を除き、「0」の値の後の単位指定は省略してください。

0必要な場合を除いて、値の後に単位を使用しないでください。

flex: 0px; /* This flex-basis component requires a unit. */
flex: 1 1 0px; /* Not ambiguous without the unit, but needed in IE11. */
margin: 0;
padding: 0;

4.1.7先行0

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

0-1から1までの値または長さの前にsを付けないでください。

font-size: .8em;

4.1.816進表記

可能な場合は、3文字の16進表記を使用してください。

それを可能にする色の値の場合、3文字の16進表記はより短く、より簡潔になります。

/* Not recommended */
color: #eebbcc;

/* Recommended */
color: #ebc;

4.1.9プレフィックス

アプリケーション固有のプレフィックスを持つプレフィックスセレクター（オプション）。

大規模なプロジェクトや、他のプロジェクトや外部サイトに埋め込まれるコードでは、IDとクラス名にプレフィックス（名前空間として）を使用します。短い一意の識別子の後にダッシュを使用します。

名前空間を使用すると、名前の競合を防ぐことができ、検索や置換操作などのメンテナンスが容易になります。

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

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

IDとクラス名の単語はハイフンで区切ります。

理解とスキャン性を向上させるために、セレクター内の単語と略語をハイフン以外の文字（まったく含まない）で連結しないでください。

/* Not recommended: does not separate the words “demo” and “image” */
.demoimage {}

/* Not recommended: uses underscore instead of hyphen */
.error_status {}

/* Recommended */
#video-id {}
.ads-sample {}

4.1.11ハック

ユーザーエージェントの検出とCSSの「ハッキング」を避けてください。最初に別のアプローチを試してください。

ユーザーエージェントの検出や特別なCSSフィルター、回避策、およびハックに関するスタイルの違いに対処することは魅力的です。効率的で管理しやすいコードベースを実現および維持するために、両方のアプローチを最後の手段と見なす必要があります。言い換えれば、検出とハッキングにフリーパスを与えると、プロジェクトは抵抗を最小限に抑える傾向があるため、長期的にはプロジェクトに悪影響を及ぼします。つまり、検出とハッキングを許可して使いやすくするということは、検出とハッキングをより頻繁に使用することを意味します。

4.2CSSフォーマットルール

4.2.1宣言順序

宣言をアルファベット順に並べます。

覚えやすく、維持しやすい方法で一貫性のあるコードを実現するために、宣言をアルファベット順に並べます。

ソートの目的でベンダー固有のプレフィックスを無視します。ただし、特定の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;

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

すべてのブロックコンテンツをインデントします。

すべてのブロックコンテンツ、つまりルール内のルールと宣言をインデントして、階層を反映し、理解を深めます。

@media screen, projection {

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

}

4.2.3宣言の停止

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

一貫性と拡張性の理由から、すべての宣言をセミコロンで終了します。

/* Not recommended */
.test {
  display: block;
  height: 100px
}

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

4.2.4プロパティ名の停止

プロパティ名のコロンの後にスペースを使用します。

一貫性の理由から、プロパティと値の間には常に単一のスペースを使用してください（ただし、プロパティとコロンの間にはスペースを使用しないでください）。

/* Not recommended */
h3 {
  font-weight:bold;
}

/* Recommended */
h3 {
  font-weight: bold;
}

4.2.5宣言ブロックの分離

最後のセレクターと宣言ブロックの間にスペースを使用します。

最後のセレクターと宣言ブロックを開始する中括弧の間には、常に1つのスペースを使用してください。

中括弧は、特定のルールの最後のセレクターと同じ行にある必要があります。

/* Not recommended: missing space */
#video{
  margin-top: 1em;
}

/* Not recommended: unnecessary line break */
#video
{
  margin-top: 1em;
}

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

4.2.6セレクターと宣言の分離

セレクターと宣言を新しい行で区切ります。

セレクターと宣言ごとに常に新しい行を開始します。

/* Not recommended */
a:focus, a:active {
  position: relative; top: 1px;
}

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

4.2.7ルールの分離

ルールを新しい行で区切ります。

ルールの間には常に空白行（2つの改行）を入れてください。

html {
  background: #fff;
}

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

4.2.8CSS引用符

属性セレクターとプロパティ値に''は、二重""引用符（）ではなく単一引用符（）を使用します。

URI値に引用符を使用しないでください（url()）。

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

/* Not recommended */
@import url("https://www.google.com/css/maia.css");

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

/* Recommended */
@import url(https://www.google.com/css/maia.css);

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

4.3CSSメタルール

4.3.1セクションコメント

セクションコメントでセクションをグループ化します（オプション）。

可能であれば、コメントを使用してスタイルシートセクションをグループ化します。セクションを新しい行で区切ります。

/* Header */

#adw-header {}

/* Footer */

#adw-footer {}

/* Gallery */

.adw-gallery {}

別れの言葉

一貫性を保つ。

コードを編集している場合は、数分かけて周囲のコードを確認し、そのスタイルを判断してください。彼らがすべての算術演算子の周りにスペースを使用している場合は、あなたもそうすべきです。コメントの周りにハッシュマークの小さなボックスがある場合は、コメントにもハッシュマークの小さなボックスを配置します。

スタイルガイドラインを持つことのポイントは、人々があなたがそれをどのように言っているかではなく、あなたが言っていることに集中できるように、コーディングの共通の語彙を持つことです。ここではグローバルスタイルのルールを提示して、人々が語彙を理解できるようにしますが、ローカルスタイルも重要です。ファイルに追加するコードがそのファイルの周りの既存のコードと大幅に異なって見える場合、読者がファイルを読みに行くときにリズムが狂ってしまいます。これは避けてください。

1背景

2一般