HTML5

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

2015年11月30日

前段

検証環境

コーディング前にWindows環境、Machintosh環境、スマートフォンなど対応が必要なブラウザ、端末を明確にし、デザインや情報、機能が適切な範囲に収まっていることを確認します。

表示確認ブラウザの例

Windows環境
  • Microsoft Internet Explorer 9以上
  • 制作時に最新のGoogle Chrome
  • 制作時に最新のMozilla Firefox
Macintosh環境
  • 制作時に最新のSafari

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

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

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

WCAG (Web Content Accessibility Guidelines)

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

文法チェック

現在のブラウザを考えるとWEB標準に100%準拠するのは難しいですが、不要な文法エラーがないかのチェックは必要です。

HTML、CSSそれぞれの文法チェック用のサイトがあるので、下記サイトにチェックを行ってください。

ユーザビリティ

パソコンやウェブの操作が慣れていない方でも、可能な限り、ストレスなくサイト内を遷移していただけるように、次のような考え方とルールの元に制作を行います。

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

書式ルール

インデント

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

大文字/小文字

セレクタ、プロパティ、値等全て、小文字で表記します。alt属性など値が文字列の場合は除きます。

RhythmFactory

テンプレート

HTML5のテンプレートとしてミニマム、OGP(Open Graph Protocol)と基本レイアウトを追加、IE9以下の対応が必要な場合の3種類を用意しました。

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

HTML5ミニマムテンプレート
<!DOCTYPE html>
<html>
<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="keywords" content="">
	<meta name="author" content="">
	<link rel="shortcut icon" type="image/vnd.microsoft.ico" href="/favicon.ico">
	<link rel="apple-touch-icon-precomposed" href="/favicon-152.png">
	<link rel="stylesheet" href="css/normalize.css">
</head>
<body>
<!-- Example: <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> -->
<!-- Example: <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> -->
</body>
</html>
HTML5テンプレート(OGPと基本レイアウトを追加)
<!DOCTYPE html>
<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="keywords" content="">
	<meta name="author" content="">
	<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="">
	<link rel="shortcut icon" type="image/vnd.microsoft.ico" href="/favicon.ico">
	<link rel="apple-touch-icon-precomposed" href="/favicon-152.png">
	<link rel="stylesheet" href="css/normalize.css">
</head>
<body>
<header></header>
<nav></nav>
<main></main>
<aside></aside>
<footer></footer>
<!-- Example: <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> -->
<!-- Example: <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> -->
</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="keywords" content="">
	<meta name="author" content="">
	<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="">
	<link rel="shortcut icon" type="image/vnd.microsoft.ico" href="/favicon.ico">
	<link rel="apple-touch-icon-precomposed" href="/favicon-152.png">
	<link rel="stylesheet" href="css/normalize.css">
	<!--[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]-->
</head>
<body>
<!-- Example: <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> -->
<!-- Example: <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> -->
</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文字程度]">

ページキーワード

サイトやページのキーワードを半角カンマ区切りで列挙します。キーワード数は5個を目安とします。

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

ノーマライズスタイル

各ブラウザはH要素やP要素などにデフォルトのCSSスタイルを独自に設定しており、各ブラウザ間で差異があるため表示が統一されません。
各ブラウザの違いを解消するためにリセットCSSが複数用意されていますが、テンプレートではnormalize.cssを採用しています。

<link rel="stylesheet" href="css/normalize.css">

normalize.cssはスタイルをリセットするというより、要素の特徴を残しつつ、ブラウザ間の差異がなくなるようにします。 ダウンロードは下記になります。

jQuery

jQueryはIE8 以前をサポートする1.x 系、IE8 以前のサポートは捨てて、高速に安定して動作させることを目指した2.x 系があります。
条件に合わせて必要なバージョンを読み込みます。必要に合わせてコメントアウトを外してください。

<!-- Example: <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> -->
<!-- Example: <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> -->

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要素などには、どこまでがその範囲かわかるようにコメントで区切ります。

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


...

プロトコルの省略

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

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

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

情報設計ガイドライン

ディレクトリ構造

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

ディレクトリ名

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

画像フォルダ

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

ファイル名

ファイル名、拡張子ともに全て小文字で表記します。
また、ファイル名を複数の単語で表す際は、単語をアンダーライン( _ )で区切ります。英数字、アンダーライン( _ )以外の文字は使用不可です。
ローマ字で命名する場合はヘボン式とします。

file_name.css

ヘボン式一覧表

50音
AIUEO
KAKIKUKEKO
SASHISUSESO
TACHITSUTETO
NANINUNENO
HAHIFUHEHO
MAMIMUMEMO
YAYUYO
RARIRURERO
WAIEO
濁音・半濁音
GAGIGUGEGO
ZAJIZUZEZO
DAJIZUDEDO
BABIBUBEBO
PAPIPUPEPO
拗音
きゃ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

Comment

コメントを残す

メールアドレスが公開されることはありません。

リズムファクトリーはホームページの制作会社です。
ホームページ制作に関するご要望・ご相談はこちらからどうぞ。