HTMLスタイルルール - growgroup/grow-template GitHub Wiki

5. HTMLスタイルルール

5.1 ドキュメントタイプ

HTML5を使用する。XHTMLは使用しない。

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

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

5.3 意味のあるHTMLを書く

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

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

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

5.4 メディアの代替物

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

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

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

5.5 関係の分離

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

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

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

メンテナンス面を考慮すれば、構造、見た目、振る舞いの分離は重要。CSSやScriptの更新よりも、HTMLドキュメントやテンプレートの修正コストのほうが常に大きい。

具体的には以下の事項を守ること。

  • inline style の禁止
  • ただし、JavaScriptによる変更は許可
  • 装飾タグの禁止
  • center タグ等
<!-- 非推奨 -->
<!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!

5.6 実体参照

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

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

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

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

5.8 HTMLの書式ルール

5.8.1 全体的な書式

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>

5.8.2 HTML引用符

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

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

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

5.8.3 Font Awesomeのアイコンの使用に関して

WP構築にアイコンの編集が難しいので

<!-- 非推奨 -->
<i class="fa fa-phone" aria-hidden="true"></i>

<!-- 推奨 -->
css の before,afterで指定すること
⚠️ **GitHub.com Fallback** ⚠️