見出し画像

【中学生でもわかる】Google HTML/CSS スタイルガイド

Seika_USA

こんにちは！アメリカ・シリコンバレー在住のSeikaです😊

Googleが提供するHTMLとCSSのスタイルガイドを知っていますか？
今回はGoogle HTML/CSS Style GuideをChatGPTを使いつつ、中学生でも分かるようにまとめました。

HTML、CSSの勉強をしている方、
コードの書き方に困っている方や迷っている方、
Googleのスタイルガイドを知りたい方は
読んでみてくださいね。

(2023年9月27日公開）


1. Google Style Guidesとは？

Google Style Guidesとは、
Googleが公開しているプログラミング言語ごとのコーディングスタイルガイドのことを指します。
これらのガイドは、Google内部でのプロジェクト開発において、コードが一貫性を持ち、理解しやすく、保守しやすくするための推奨ルールや慣習を示しています。

以下は、Google Style Guidesがカバーしているいくつかの主要なプログラミング言語です。

  1. C++

  2. Java

  3. Python

  4. JavaScript

  5. Objective-C

  6. Shell

  7. R

  8. Vimscript

    など

Google Style Guidesが提供する標準はしばしば厳格ですが、
その背景には大規模で複雑なコードベースを持つ企業としての経験や知見が反映されています🌟

Google HTML/CSS Style Guideはこのスタイルガイドの一つとなります。
それでは、内容を詳しく見ていきましょう。

2.Google HTML/CSS スタイルガイド

2-1.スタイルガイドの背景

・HTMLとCSSの書き方やフォーマットのルールを示しています。
・目的はみんなでの協力を良くするため、コードの質を上げるため、そしてサポートするシステムを良くするため。

Google HTML/CSS Style Guide

3.Google HTML/CSSの全般的なルール

3-1.プロトコル

安全な通信ができるよう、画像やスタイルシート、スクリプトなどのリンクは「https:」を使う。

悪い例: <script src="//ajax.googleapis.com/..."></script>
良い例: <script src="https://ajax.googleapis.com/..."></script>

3-2.インデント

1回のインデント(字下げ)には2つのスペースを使う。
タブを使わない。

悪い例

<ul>
[タブ]<li>Fantastic</li>
[スペース][スペース][タブ]<li>Great</li>
</ul>

良い例

<ul>
  <li>Fantastic</li>
  <li>Great</li>
</ul>
タブは使わない
キーボードの一番下にある長方形のキーがスペースキー

3-3.大文字・小文字

全てのコードは小文字で書く。

悪い例: <A HREF="/">Home</A>
良い例: <img src="google.png" alt="Google">

3-4.余分なスペース

 行の最後の余分なスペースは取り除く。

3-5.文字のエンコーディング

文字をコンピュータで読むルールを「エンコーディング」という。
多くの言語の文字を正しく表示ができるように「UTF-8」を使う。
ウェブページの頭に <meta charset="utf-8"> と書く。

例:

<meta charset="utf-8">

3-6.コメント

コードの中で、何をしているのかを説明する文章を「コメント」として書くことができる。

例:

/* このスタイルはボタンの色を青にするためのものです */
.button {
  color: blue;
}

3-7.TODO

  • 修正や追加することを忘れないように、「TODO」というメモを残す。

  • 誰がどんな作業をすべきかも一緒に書くと、作業がわかりやすくなる。

例:

<!-- TODO(john.doe): 中央寄せを見直す -->
<center>Test</center>

4.HTMLスタイルのルール

4-1.HTMLのバージョン

最新の「HTML5」を使う。

4-2.HTMLの正しさ

できるだけ正しいHTMLを使うこと。
W3C HTML Validatorなどエラーがないかチェックするツールもある。

4-3.意味を持つHTMLの使い方

HTMLのタグは、そのタグが意味するとおりに使うこと。
例えば、見出しには見出しのタグ、段落には段落のタグを使う。

<!-- 悪い例 -->
<div onclick="goToRecommendations();">All recommendations</div>
<!-- 理由: 1. <div> はクリック可能な要素の意味を持たない 2. JavaScriptが無効の場合、リンクとして機能しない -->

<!-- 良い例 -->
<a href="recommendations/">All recommendations</a>
<!-- 理由: セマンティクス的に正しく、JavaScriptに依存しないリンクとして動作する -->

4-4.マルチメディアの代替内容

画像や動画には、何が表示されているかをテキストで説明する部分を加えて、目が見えない人も理解できるようにする。

<!-- 悪い例 -->
<img src="spreadsheet.png">
<!-- 理由: alt属性が欠けているため、視覚障害者のためのスクリーンリーダーなどが画像の内容を解釈できない -->

<!-- 良い例 -->
<img src="spreadsheet.png" alt="Spreadsheetのスクリーンショット">
<!-- 理由: alt属性によって画像の内容をテキストで説明しているため、アクセシビリティが向上 -->

4-5.HTML、デザイン、動きの分け方

HTMLでページの構造を作り、CSSでデザインをして、JavaScriptで動きを付ける。
使い分けることで、後で修正しやすくなる。

4-6.特別な文字の書き方

€や"などの特定な文字を書くとき、特別なコード(エンティティ参照)を使わない。

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

<!-- 良い例 -->
The currency symbol for the Euro is “€”.

4-7.オプションのタグ

不必要なタグは省略しても良い。
これによりページのサイズを小さくできる。

4-8.属性のタイプ
HTML5を使っている場合、デフォルトでCSSとJavaScriptを使うと認識するので、スタイルシートやスクリプトに「type」属性を指定する必要はない。

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

<!-- 良い例 -->
<link rel="stylesheet" href="https://www.google.com/css/maia.css">
<script src="https://www.google.com/js/gweb/analytics/autotrack.js"></script>

4-9.id属性について

HTMLの要素に名前をつけるidは、必要な時以外は使わない。
idを使うときは、名前に-（ハイフン）を入れると良い。

<!-- 悪い例 -->
<div id="userProfile"></div>

<!-- 良い例 -->
<div id="user-profile"></div>

5.HTMLのフォーマットルール

5-1.一般的なフォーマット

一般的なフォーマットとして、新しいブロックやリスト、テーブルを書く時は、新しい行を使う。
子要素は、インデント（字下げ）して書くと見やすくなる。

<ul>
　 <!-- 以下の<li>タグは<ul>の子要素として定義されています -->
  <li>Moe</li>
  <li>Larry</li>
</ul>

5-2.行の折り返し

長すぎる行は、途中で改行する。
どこで改行するかは、プロジェクトごとに決めて、統一すると良い。

5-3.引用符

属性の値を書くときは、ダブルクオート(")を使う。

<!-- 悪い例 -->
<a class='button'>Click me!</a>

<!-- 良い例 -->
<a class="button">Click me!</a>

6.CSS

6-1.正しいCSS

正しいCSSを使う。
W3C CSS validatorのようなツールでチェックする。

6-2.クラス名の付け方

要素の目的や使い方がわかるクラス名をつける。

/* 悪い例 */
<div class="yee-1901">内容</div>
<!-- 理由:  意味のないクラス名 -->

/* 良い例 */
<div class="product-description">内容</div>


/* 悪い例 */
<button class="button-green">緑のボタン</button>
<!-- 理由:  見た目に基づいたクラス名も良くない -->

/* 良い例 */
<button class="primary-button">重要なボタン</button>



/* 悪い例 */
<div class="thing">画像</div>
<!-- 理由:  特定の内容や部品に基づくクラス名となってない -->

/* 良い例 */
<div class="image-gallery">画像</div>


/* 良い例 */
<div class="auxiliary">補助的な内容</div>
<!-- 汎用的なクラス名が役立つ場合がある -->

6-3.クラス名のスタイル

シンプルで短く、意味がわかる名前を使う。
例: .navigation より .nav が良い。

6-4.クラス名での単語の区切り

単語と単語の間はハイフン(-)で繋ぐ。
例: .demoimage より .demo-image が良い。

6-5.プレフィックス（接頭辞）

大きなプロジェクトや他のプロジェクトで使われるコードには、クラス名の前に特定の短い接頭辞を付けると良い。
これにより、名前の衝突を防ぎ、検索や置換が簡単になる。

.adw-help {} /* これはAdWordsのヘルプに関連するスタイル */
.maia-note {} /* これはMaiaのノートに関連するスタイル */

6-6.タイプセレクタの使用

クラス名と一緒に要素名を使わない。

/* 悪い例 */
ul.example {}
div.error {}

/* 良い例 */
.example {}
.error {}

6-7.IDセレクタの使用

IDはページ内で一つだけなので、クラスを使う方が良い。

/* 悪い例 */
#example {}

/* 良い例 */
.example {}

6-8.省略形のプロパティ

CSSには短く書けるプロパティがあるので、それを使おう。

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

6-9.0と単位

0 の後の単位は省略可能。しかし、必要な場合もある。

div {
  flex: 0px; /* flexの場合、0でも'px'が必要な場面がある */
}
/* 省略する例 */
div {
  margin: 0; /* これは0なので単位は不要 */
  padding: 0; /* これも0なので単位は不要 */
}

/* 省略しない例 */

6-10.0の前の数字

-1から1の間の値の前には 0 をつける。

/* 悪い例 */
div {
  font-size: .8em; /* .8と書くと、見づらい */
}

/* 良い例 */
div {
  font-size: 0.8em; /* 0.8と書くと、はっきり0.8emとわかる */
}

6-11.16進数の記述

色の値は短く書ける場合は短く。
#eebbcc より #ebc が良い。

/* 省略する例 */
#000000 → #000
#FFFFFF → #FFF
#111111 → #111
#EEBBCC → #EBC
#AABBCC → #ABC
#667788 → #678

/* 省略できない例 */
#A1B2C3 → 1とA、2とB、3とCがそれぞれ異なるため短縮不可
#9E89FA → Eと9、8と9、AとFがそれぞれ異なるため短縮不可
#6D75EF → Dと6、7と5、EとFがそれぞれ異なるため短縮不可
#123456 → 1と2、3と4、5と6がそれぞれ異なるため短縮不可
#C0DE25 → 0とC、EとD、5と2がそれぞれ異なるため短縮不可

6-12.!important宣言の使用

自然な順序が崩れてしまうため、"!important"はできるだけ使わない。

/* 悪い例 */
.example {
font-weight: bold !important;
}

/* 良い例 */
.example {
  font-weight: bold;
}

6-13.ハックの使用

ブラウザごとの違いを補うハックは、他の方法で対応できるならそれを選ぶ。

/* 悪い例：これは、Internet Explorer 6のみに適用されるスタイル*/
.example {
_color: blue; / "_" は、IE6のハックです */
}

/* 良い例：全てのブラウザで適用される共通のスタイル */
.example {
  color: green;
}

7.CSSのフォーマットルール

7-1.宣言の順序

CSSのプロパティ（ルールの中のキーワード）をアルファベット順に並べる。

.example {
  background: blue;
  border: 2px solid;
  color: red;
}

7-2.ブロックの中身のインデント

CSSの中で、もっと小さなグループ（ブロック）を作る時は、その中身を少し右にずらして書く。

@media screen {
  .example {
    color: red;
  }
}

7-3.宣言の後のセミコロン

プロパティの後ろには;（セミコロン）をつける。

/* 悪い例 */
.test {
  color: red
}

/* 良い例 */
.test {
  color: red;
}

7-4.プロパティ名の後のスペース

プロパティ名とその値の間にはスペースを1つ入れる。

/* 悪い例 */
h3 {
  font-weight:bold;
}

/* 良い例 */
h3 {
  font-weight: bold;
}

7-5.ルール間の空行

2つのルールの間には空行を入れると、見やすくなります。

/* 悪い例：スペースがない */
.video{
  margin-top: 1em；
}

/* 悪い例：：不要な改行 */
.video
{
  margin-top: 1em；
}

/* 良い例 */
.video {
  margin-top: 1em；
}

7-6.セレクタと宣言の分離

セレクタと宣言は、新しい行で分けて書く。

/* 悪い例 */
a:focus, a:active {
  position: relative; top: 1px;
}


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

7-7.ルールの分離

「ルール」は、他のルールと混ざらないように、しっかりと空行で分けて書く。

/* 空行で分けて書く */
html {
  background: #fff; 
}

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

7-8.CSSの引用符

シングルクォート（' '）を使う。
しかし、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;
}

8.CSSのセクションコメント

コメントで、スタイルのまとまり（セクション）を作ることができる。
それぞれのまとまりは、改行して分け見やすくする。

/* Header */
.adw-header {
  background-color: #333;  /* ヘッダーの背景色を暗いグレーに */
  color: #fff;             /* ヘッダー内のテキスト色を白に */
  padding: 20px 0;         /* ヘッダーの上下に20pxの余白を追加 */
}

/* Footer */
.adw-footer {
  background-color: #222;  /* フッターの背景色をもう少し暗いグレーに */
  color: #eee;             /* フッター内のテキスト色を明るいグレーに */
  padding: 10px 0;         /* フッターの上下に10pxの余白を追加 */
}

/* Gallery */
.adw-gallery {
  display: grid;           /* ギャラリー内のアイテムをグリッドで表示 */
  grid-template-columns: repeat(3, 1fr);  /* 3列のグリッドを作成 */
  gap: 10px;               /* グリッドのアイテム同士の間隔を10pxに */
}

9.まとめ

今回はGoogleのHTMLとCSSスタイルガイドを紹介しました。
内容をより理解しやすくするため、言葉をシンプルに言い換えています。
このガイドを参考に、わかりやすいコードを心がけましょう！

それでは今回は以上です。
また次の記事でお会いましょう。

Follow me here😊
Youtube│TikTok│Instagram│Twitter│Dribbble│Linkedin│Behance│Notion│Portfolio│Figma │質問箱

いいなと思ったら応援しよう！

Seika_USA
よろしければサポートお願いいたします。いただいたサポートはクリエイターとしての活動費に使わせていただきます。