【中学生でもわかる】Google HTML/CSS スタイルガイド
こんにちは！アメリカ・シリコンバレー在住の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がカバーしているいくつかの主要なプログラミング言語です。
C++
Java
Python
JavaScript
Objective-C
Shell
R
Vimscript
など
Google Style Guidesが提供する標準はしばしば厳格ですが、
その背景には大規模で複雑なコードベースを持つ企業としての経験や知見が反映されています🌟
Google HTML/CSS Style Guideはこのスタイルガイドの一つとなります。
それでは、内容を詳しく見ていきましょう。
2.Google HTML/CSS スタイルガイド
2-1.スタイルガイドの背景
・HTMLとCSSの書き方やフォーマットのルールを示しています。
・目的はみんなでの協力を良くするため、コードの質を上げるため、そしてサポートするシステムを良くするため。
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 “&eur;”.
<!-- 良い例 -->
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 │質問箱
よろしければサポートお願いいたします。いただいたサポートはクリエイターとしての活動費に使わせていただきます。