Home Programming LanguageHTML/CSSスタイルガイド
HTML CSS

HTML5 コーディングガイドライン

前段

検証環境

コーディング前にWindows環境、Machintosh環境、スマートフォンなど対応が必要なブラウザ、端末を明確にします。

表示確認ブラウザの例

Windows環境
  • Microsoft Internet Explorer 11以上
  • 制作時に最新のGoogle Chrome
  • 制作時に最新のMozilla Firefox
Macintosh環境
  • 制作時に最新のSafari
スマートフォン環境
  • Android、iPhoneは発売から3年以内の端末で確認

ウェブ・アクセシビリティ

ウェブ・アクセシビリティとは、「高齢者や障害者など心身の機能に制約のある人でも、ウェブで提供されている情報にアクセスし利用できること」を意味します。
ウェブ・アクセシビリティについてはWCAG (Web Content Accessibility Guidelines)という指針がW3Cによって提唱されています。
WCAGで規定されている項目のうち、標準で以下までを対応します。

  • 非推奨タグは原則使わない。
  • HTMLチェッカーなどでソースの文法をチェックする。
  • 見出し、段落、リストなど、適切な要素を使って文書の構造や役割を示す。
  • 表示スタイルは文書の構造と分離し、書体、サイズ、色、行間、背景色などの見た目についてはスタイルシートで設定する。
  • 画像や動画には、代替情報を用意する。
  • リンクに画像を用いる場合は、リンク先の内容が予測できるようにテキストなどの代替情報を用意する。
  • 文字サイズと書体はユーザが変更できるようにする。

WCAGについての詳細は下記を参照してください。

マークアップの検証

WEB標準に100%準拠させるかどうかはポリシーにもよりますが、不適切なマークアップがないかのチェックは必要です。
HTML、CSSそれぞれの文法チェック用のサイトがあるので、下記サイトにチェックを行ってください。

ユーザビリティ

多くのユーザにストレスなくサイト内を回遊していただけるように、次のような考え方とルールに従って制作を行ってください。

文字色、大きさについて
地色と判別がつかなくなるような文字色や、概ね10px以下の小さすぎる文字などは用いないようにします。また、原則的に文字サイズはユーザ側の閲覧環境に合わせて可変できるように設定します。
テキストリンクについて
テキストリンク部分については、リンクがリンクであることがわかるように、原則としてアンダーラインを引き、地の文と区別して認識できるように配慮します。
また、同様の意図から、マウスを乗せた時(以下マウスオーバー時)に、色が変わる、アンダーラインが消えるなど、見た目のふるまいが変化するようにし、クリッカブルであることが認識できるように配慮します。
ボタンについて
画像でのリンク部分(ボタン、ナビゲーション等)については、リンクであることがわかるような処理(陰や立体的に見える処理を施す、アイコンを付ける)をすることで、クリッカブルであることが認識できるように配慮いたします。また、マウスオーバー時には、色が変わるなど、見た目のふるまいが変化するようにし、クリッカブルであることが認識できるように配慮します。

書式ルール

インデント

インデントにはタブ文字を使います。

大文字/小文字

セレクタ、プロパティ、値等全て、小文字で表記します。

<img src="rhythm_logo.png" alt="Rhythmfactory">

テンプレート

HTML5のテンプレートとして必要最小限のバージョン、OGP（Open Graph Protocol）と基本レイアウトを追加したバージョン、IE9以下の対応を施したバージョンの3種類を用意しました。

OGPについては下記を参考にしてください。

3種類のテンプレートは下記URLにてダウンロードできます。

HTML5ミニマムテンプレート
<!DOCTYPE html>
<html lang="ja">
<head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1">

 <title></title>
 <meta name="description" content="">
 <meta name="author" content="">
 <!-- Example: <link rel="shortcut icon" type="image/vnd.microsoft.ico" href="/favicon.ico"> -->
 <!-- Example: <link rel="apple-touch-icon-precomposed" href="/favicon-152.png"> -->

 <link rel="stylesheet" href="css/style.css">
</head>
<body>

</body>
</html>
HTML5テンプレート（OGPと基本レイアウトを追加）
<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<title></title>
	<meta name="description" content="">
	<meta name="author" content="">
	<!-- Example: OGP設定
	<meta property="og:title" content="">
	<meta property="og:type" content="">
	<meta property="og:url" content="">
	<meta property="og:image" content="">
	<meta property="og:site_name" content="">
	<meta property="og:description" content="" />
	<meta property="fb:app_id" content="">
	-->
	<!-- Example: <link rel="shortcut icon" type="image/vnd.microsoft.ico" href="/favicon.ico"> -->
	<!-- Example: <link rel="apple-touch-icon-precomposed" href="/favicon-152.png"> -->

	<link rel="stylesheet" href="css/style.css">
</head>
<body>

<!-- header:ページヘッダ -->
<header class="pg-header">
</header>
<!-- /header:ページヘッダ -->

<!-- nav:サイトナビゲーション -->
<nav class="g-navi">
</nav>
<!-- /nav:サイトナビゲーション -->

<!-- main:コンテンツエリア -->
<main>

	<!-- article:独立した記事 -->
	<article class="">
		<h1></h1>
		<!-- section:文章 -->
		<section>
			<h2></h2>
			<!-- section:文章 -->
			<section>
				<h3></h3>
			</section>
			<!-- /section:文章 -->
		</section>
		<!-- /section:文章 -->
	</article>
	<!-- /article:独立した記事 -->

	<!-- 記事一覧 -->
	<div class="articles-list">
		<!-- article:独立した記事 -->
		<article>
		</article>
		<!-- /article:独立した記事 -->
		<!-- article:独立した記事 -->
		<article>
		</article>
		<!-- /article:独立した記事 -->
	</div>
	<!-- /記事一覧 -->

	<!-- aside:コンテンツに関連しつつ、切り離し可能なセクション -->
	<aside>
	</aside>
	<!-- /aside:コンテンツに関連しつつ、切り離し可能なセクション -->
</main>
<!-- /main:コンテンツエリア -->


<!-- footer:ページフッタ -->
<footer class="pg-footer">
</footer>
<!-- /footer:ページフッタ -->

</body>
</html>
HTML5テンプレート（IE9以下の対応が必要な場合）
<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="ja"><![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="ja"><![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="ja"><![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="ja"><!--<![endif]-->
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<title></title>
	<meta name="description" content="">
	<meta name="author" content="">
	<!-- Example: OGP設定
	<meta property="og:title" content="">
	<meta property="og:type" content="">
	<meta property="og:url" content="">
	<meta property="og:image" content="">
	<meta property="og:site_name" content="">
	<meta property="og:description" content="" />
	<meta property="fb:app_id" content="">
	-->
	<!-- Example: <link rel="shortcut icon" type="image/vnd.microsoft.ico" href="/favicon.ico"> -->
	<!-- Example: <link rel="apple-touch-icon-precomposed" href="/favicon-152.png"> -->

	<link rel="stylesheet" href="css/style.css">
</head>
<body>

<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</body>
</html>

テンプレートに指定した内容を下記にて補足します。

DOCTYPE宣言

DOCTYPE宣言は省略可能ですが、DOCTYPE宣言が無いとブラウザのレンダリングモードが互換モードになります。特別な理由がなければ、標準モードにするためにDOCTYPE宣言を記述します。

<!DOCTYPE html>

文字コード

文字コードセットはUTF-8を選択します。ファイルの文字コードをUTF-8で保存し、META要素のCONTENT属性で文字コードを宣言します。META要素は必ずTITLE要素の前に宣言します。

<meta charset="utf-8">

レンダリングモード

IE用に、最新のレンダリングモードにするように指定します。

<meta http-equiv="X-UA-Compatible" content="IE=edge">

ビューポート

ページ幅可変の場合はviewportを下記のように設定します。

<meta name="viewport" content="width=device-width, initial-scale=1">

ページ紹介文

content属性に、ページの概要を全角150文字程度で記入します。

<meta name="description" content="[全角150文字程度]">

ページキーワード

Googleではキーワードが利用されていないため、テンプレートでは省略しています。必要な際は下記のような書式で追加してください。サイトやページのキーワードを半角カンマ区切りで列挙します。

<meta name="keywords" content="[***],[***],[***],[***],[***]">

TITLE要素

TITLE要素は、ページの階層によって次の書式を使います。

ホーム
<title>サイト名</title>
第2階層トップ
<title>カテゴリー名 | [サイト名]</title>
通常ページ
<title>ページ名 | カテゴリー名 | [サイト名]</title>

OGP（Open Graph Protocol）

下記は必須のプロパティなので必ず設定してください。通常のサイトであればog:typeはwebsite固定で問題ありません。

<meta property="og:title" content="ページのタイトル">
<meta property="og:type" content="website">
<meta property="og:url" content="ページのURL">
<meta property="og:image" content="サムネイル画像のURL">

下記はオプションのプロパティです。

<meta property="og:site_name" content="サイト名">
<meta property="og:description" content="ページの説明">

Facebook用にOGPを設定するには、さらに fb:app_id というプロパティを追加します。

<meta property="fb:app_id" content="任意のID">

ファビコン

画像の作成

PC用として縦横16ピクセル、32ピクセルの2種類を作成します。

サイズファイル名
16x16/32x32favicon.ico

スマートフォン対応として以下のサイズも作成します。
iOSやAndroidで使われ、デバイス側で適切に縮小されます

サイズファイル名
152x152favicon-152.png

マークアップ

古いIEをサポートしつつ、新しいブラウザにはPNGを使いたい場合は下記のように2つのフォーマットを用意することもできます。

<link rel="shortcut icon" type="image/vnd.microsoft.ico" href="/favicon.ico">
<link rel="icon" href="/favicon.png">

スマートフォン用タッチアイコンの設定は下記になります。

<link rel="apple-touch-icon-precomposed" href="/favicon-152.png">

以上がファビコンの最低限の設定になります。
さらに多くの環境に対応したい場合、下記のようなジェネレーターを利用すると良いでしょう。
260×260以上の画像ファイルをアップして、問に答えると結果を出力してくれます。

出力結果は下記になります。

基本のファビコン指定
<link rel="shortcut icon" type="image/vnd.microsoft.ico" href="favicon.ico">
サイズ違いのPNG形式の指定
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">
スマホのタッチアイコン指定
<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">
AndroidのChrome用
<link rel="icon" type="image/png" href="/android-chrome-192x192.png" sizes="192x192">
Windows 8以上のMetroタイル・アイコン用（タイルカラーやテーマカラーは任意に変更してください）
<link rel="manifest" href="/manifest.json">
<meta name="msapplication-TileColor" content="#efefef">
<meta name="msapplication-TileImage" content="/mstile-144x144.png">
<meta name="theme-color" content="#ffffff">

style.css

テンプレートHTMLから読み込んでいるCSSはstyle.cssです。このファイルはSassで出力されており、元ファイルはstyle.scssになります。Sassについてはsmart:Sass入門を参考にしてください。style.scssはリセットCSSと基本設定を施したCSSを読み込みます。

リセットCSS

テンプレートファイルにはリセットCSSとして次の2種類のファイルを用意しています。オリジナルと内容は同じですが、Sassから扱いやすいようにファイル名を変更しています。

  • ress：_ress.scss
  • HTML5 Doctor：_html5reset.scss

ress（_ress.scss）はスタイルをリセットするというより、要素の特徴を残しつつ、ブラウザ間の差異がなくなるようにします。そのため、ressでは B は太字、リストは黒丸といったスタイルが維持されています。
リストの黒丸などのスタイルもリセットしたい場合は、HTML5 DoctorのリセットCSS（_html5reset.scss）を使ってください。これらのリセットCSSは直接変更せず、オリジナルのままを保つようにしてください。何か変更が必要であれば、次に紹介する_base.scssで設定の上書きをおこなってください。

テンプレートに含まれるリセットCSSは2019年6月27日時点の最新です。オリジナルのダウンロードURLは下記になります。

基本設定を施したCSS

style.scssはリセットCSS以外に、_base.scssを読み込んでいます。このファイルでは、メディアクエリのMixinや、HTMLタグの基本設定を行っています。必要に合わせて設定を変更してください。
このファイルを変更した際はstyle.scssのコンパイルが必要です。

jQuery

今後を見据えるとjQueryは使わずにモダンなフレームワークを使うか、簡単な処理であればJavaScriptを直接呼び出して使うと良いでしょう。
jQueryを使う場合、条件に合わせて必要なバージョンを読み込みこんでください。必要に合わせてコメントアウトを外してください。

IE9以下も対応したい場合

IE9以下用のCSSハックを書きたい場合、下記のようなマークアップを追加します。

<!--[if lt IE 7 ]><html class="ie ie6" lang="ja"><![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="ja"><![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="ja"><![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="ja"><!--<![endif]-->

IE9以下用にHTML5の追加要素に対応したり、メディアクエリに対応させるには下記を追加します。

<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

HTMLのスタイルルール

BODY要素

ブロック要素

テキストや画像は必ずブロックレベル要素に含まれるようにマークアップします。

セマンティックに書く

見出しならH要素、段落ならP要素と、目的に応じたHTML要素を使ってください。

ナビゲーション類のマークアップ

ナビゲーションはNAV要素とUI要素で構成し、H要素でタイトル名などをマークアップします。

UL要素の利用

ナビゲーション類、リンクリストなどリストを意味するコンテンツは、UL要素でマークアップします。

DL要素の活用

用語と説明、画像と説明など内容と内容が関連するペアのリストは、DL要素でマークアップします。

IMG要素

IMG要素にはalt属性で代替テキストを指定します。

STYLE要素、style属性の禁止

STYLE要素、style属性は使用しません。代わりに外部CSSで指定します。

type属性

CSSとJavaScriptのtype属性は省略します。


<link rel="stylesheet" type="text/css" href="...">
<script type="text/css" src="..."></script>


<link rel="stylesheet" href="...">
<script src="..."></script>

コメント

レイアウトなどに関連するDIV要素などには、どこまでがその範囲かわかるようにコメントで区切ります。

開始コメント：　<!-- 領域名-->
終了コメント：　<!-- /領域名-->

<!-- ヘッダ領域 -->
<header>
	...
</header>
<!-- /ヘッダ領域 -->

プロトコルの省略

使用上問題なければURLからプロトコル表記（http:,https:）を省略してください。

<script src="//www.google.com/....">

プロトコルを省略すると現在アクセスのあるプロトコルが使われるため、例えばSSLでアクセスされた場合に非SSLコンテンツが混在しないのでセキュリティ警告メッセージが表示されないといった利点があります。
たとえば下記のようにHTTPプロトコルを明記していた場合、SSLでアクセスされると警告メッセージが表示されてしまいます。

<script src="http://www.google.com/....">

ローカルにあるHTMLファイルの場合プロトコルを省略するとfileプロトコルが優先されてしまうので、ローカルでの確認が必要な際はプロトコルを明記してください。

情報設計ガイドライン

ディレクトリ構造

的確な情報整理とページ構成を保ち、以下のようなディレクトリ構造でサイト制作を行います。

ディレクトリ名

ディレクトリ名は英数半角10文字程度で、内容をイメージしやすい名前にします。
ローマ字で命名する場合はヘボン式とします。

画像フォルダ

共通で利用できる画像については、カレントディレクトリにimagesフォルダを作成して格納します。
そのほか、各ディレクトリ別にimagesフォルダを作成し、画像ファイルを格納します。

ファイル名

ファイル名、拡張子ともに全て小文字で表記します。
また、ファイル名を複数の単語で表す際は、単語をアンダーライン（ _ ）で区切ります。英数字、アンダーライン（ _ ）以外の文字は使用不可です。
ローマ字で命名する場合はヘボン式とします。
※特別な理由なければ英語を使ってください。

例
file_name.css

ヘボン式一覧表

50音
あAいIうUえEおO
かKAきKIくKUけKEこKO
さSAしSHIすSUせSEそSO
たTAちCHIつTSUてTEとTO
なNAにNIぬNUねNEのNO
はHAひHIふFUへHEほHO
まMAみMIむMUめMEもMO
やYA  ゆYU  よYO
らRAりRIるRUれREろRO
わWAゐI  ゑEをO
濁音・半濁音
がGAぎGIぐGUげGEごGO
ざZAじJIずZUぜZEぞZO
だDAぢJIづZUでDEどDO
ばBAびBIぶBUべBEぼBO
ぱPAぴPIぷPUぺPEぽPO
拗音
きゃKYAきゅKYUきょKYO
しゃSHAしゅSHUしょSHO
ちゃCHAちゅCHUちょCHO
にゃNYAにゅNYUにょNYO
ひゃHYAひゅHYUひょHYO
みゃMYAみゅMYUみょMYO
りゃRYAりゅRYUりょRYO
ぎゃGYAぎゅGYUぎょGYO
じゃJAじゅJUじょJO
びゃBYAびゅBYUびょBYO
ぴゃPYAぴゅPYUぴょPYO

※太字は間違いやすいヘボン式ローマ字です。

ヘボン式ローマ字表記へ変換する際の注意事項

撥音

「ん」は「N」で表記します。

かんの　KANNO／ほんだ　HONDA

B・M・Pの前では、Nの代わりにMを使います。

なんば　NAMBA／ほんま　HOMMA／まんぽ　MAMPO
促音

「っ」は子音を重ねます。

べっぷ　BEPPU／いっしき　ISSHIKI

CHに限り、その前にTを加えます。

えっちゅう　ETCHU／はっちょう　HATCHO
長音

「O」や「U」は記入しません。

おおの　ONO／さいとう　SAITO

関連記事