このドキュメントについて

このドキュメントはWebチームがWebサイトのチーム開発を行う上でコーダーが遵守するべきコーディングルールをまとめたものである。このコーディングルールはGoogle HTML/CSS Style Guideという、Googleが出しているHTML/CSSのコーディング規約を参考に、Webチーム向けに作り直したものである。コーディングルールの目的はチーム開発の効率化と制作物の均質化である。

HTMLに関するルール

1. 適切な要素(タグ)を使用すること

要素を目的に合わせて使用すること。たとえば、見出しには見出し要素、段落にはp要素、リンクにはa要素を使用する。全部div要素にすることは禁止。要素をセマンティックにする(意味を持たせる)ことはSEOの観点からも重要である。

やってはいけないこと

2. 画像にはalt属性を付与すること

画像や動画などの要素にはalt属性を付与し、そのコンテンツの説明を加えること。alt属性などの代替コンテンツを提供することは、アクセシビリティ上の理由から重要である。盲目のユーザーは@altなしで画像が何であるかを知る手掛かりがほとんどなく、内容が何に関するものか理解できない可能性がある。

alt属性を付与することはSEO的にも重要で、実際PageSpeed InsightsというSEO評価を測るツールが用いる指標の一つに、alt属性が指定されているかが含まれる。

<!-- 悪い例 -->
<img src="spreadsheet.png">

<!-- 良い例 -->
<img src="spreadsheet.png" alt="Spreadsheet screenshot.">

3. HTMLとCSSの役割を区別すること

HTMLの役割である文書の構造を作ることとCSSの役割である文書にスタイルを適用させることを区別すること。つまり、HTMLファイルにはHTMLのみを含み、HTMLは構造上の目的でのみ使用し、スタイル指定のすべてをスタイルシートにまとめること。また、ドキュメントからのスタイルシート(CSSファイル)のリンクを可能な限り少なくすることは保守性を保つために重要である。

<!-- 悪い例 -->
<!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!

↑悪い例では、タグの中にスタイル属性で直接スタイルが指定されていたり、必要以上に多いスタイルシートへのリンクがある。

4. インデント調節にはprettierを利用すること(CSSも同様)

prettierというインデントを自動で調節してくれるvscodeの拡張機能を利用する。CSSも同様。