検証環境
コーディング前にWindows環境、Machintosh環境、スマートフォンなど対応が必要なブラウザ、端末を明確にします。
表示確認ブラウザの例
Windows環境
- 制作時に最新のGoogle Chrome
- 制作時に最新のMozilla Firefox
- 製作時に最新のEdge
- Microsoft Internet Explorer 11以上
Macintosh環境
- 制作時に最新のSafari
スマートフォン環境
- Android、iPhoneは発売から3年以内の端末で確認
ウェブ・アクセシビリティ
ウェブ・アクセシビリティとは、「高齢者や障害者など心身の機能に制約のある人でも、ウェブで提供されている情報にアクセスし利用できること」を意味します。ウェブ・アクセシビリティについてはWCAG (Web Content Accessibility Guidelines)という指針がW3Cによって提唱されています。WCAGには達成基準としてAからAA、AAA（最高レベル）までがあり、当ガイドラインはレベルA相当の以下項目に対応することを推奨しています。
- 文字化けを起こす可能性のある丸付き数字、ローマ数字など機種依存文字や半角カタカナは使用を禁止
- 階層を示すパンくずナビを提供
- 画像・動画・音声には、音声読み上げ機能を考慮して、ALT属性で説明する
※リンクに画像を用いる場合は、リンク先の内容が予測できるようになテキスト情報にする。 - 見出し、段落、リストなど、適切な要素を使う
セマンティック（意味的）なマークアップをすることで、機械可読性が確保される。
また、SEOにも有効。 - コンテンツの内容を理解し操作するための情報は、色、形もしくは位置のみに依存しないようにし、テキスト情報を併用する
- テキストと背景色のコントラスト比を適切に確保する
WCAGのAAでは4.5:1の確保が求められる。 - 文字サイズを変更できないような仕様にしない
ほとんどのブラウザは文字サイズを変更する機能があるので、その機能を阻害しない。 - 可能な限り画像文字を使わない
- TITLE要素でページの主題、目的を説明する
- リンクの目的を、リンクのテキストで説明する
- 文章の章・節・項をH要素で明示し整理する
- HTMLチェッカーなどでソースの文法をチェックする
ユーザビリティ
ユーザビリティ（usability）は、useとabilityを合わせた造語で、有用性、使いやすさといった意味になります。ISO 9241-11ではユーザビリティを「特定の利用状況において、特定のユーザによって、ある製品が、指定された目標を達成するために用いられる際の、有効さ、効率、ユーザの満足度の度合い」と定義しています。
ユーザビリティとアクセシビリティはよく混同されますが、アクセシビリティは「ユーザーが情報にアクセスできるか、操作できる」を意味し、ユーザビリティはそのアクセシビリティが確保されていることを前提として、さらに使いやすいかどうかを意味しています。基本的には、ユーザビリティはデザイン時に確保するものです。
ユーザビリティで重要な5つの要素は以下の通りです。
- Learnability：学習しやすさ
Learnabilityとは、機能や操作の覚えやすさ、わかりやすさを指します。マニュアルなしでも直感的なデザインを目指しましょう。 - Efficiency：効率性
操作を覚えたら、その操作が簡単に応用できるのが効率性の高いサービスです。 - Memorability：記憶しやすさ
Memorabilityとは、久しぶりにサービスを使ったユーザーが、以前と同じように使えるかを示します。シンプルで、手順が少ないような操作性が必要です。 - Errors：エラーの起きにくさ
エラーの発生率を抑え、エラーが起こっても容易く回復でき、かつ致命的なエラーが起こらないようにします。 - Satisfaction：満足度
Satisfactionとは、操作しやすく、楽しく快適に利用できることを指します。
UX（ユーザーエクスペリエンス）指標
UX（User Experience）は、直訳すると「ユーザー体験」となります。この体験を高めるために重要なのが、ユーザビリティの使いやすさや使い勝手に加えて、使い心地・感動・印象です。
Web Vitals
コーディングで優れたUXを提供するための指標として、Googgleが提唱しているWeb Vitalsがあります。Web Vitalsの中でも特に重要な3つのことをCore Web Vitalsとしています。その3つとは、読み込み時間（Largest Contentful Paint - LCP）、インタラクティブ性（First Input Delay - FID）、コンテンツの視覚的安定性（Cumulative Layout Shift - CLS）です。
- 読み込み時間（LCP）：LCP（Largest Contentful Paint）はページでメインとなるコンテンツがどのくらい早く見ることができるかを表します。ページ全体の読み込み速度よりも、メインコンテンツの読み込み速度が重視されます。
- インタラクティブ性（FID）：FID（First Input Delay）は、ユーザーがアクションを起こしてから応答するまでの待ち時間を表します。
- 視覚的安定性（CLS）：CLS（Cumulative Layout Shift）はページの視覚的な安定性を表します。レンダリング中の表示のずれを定量化します。
Core Web Vitalsを測定するためのツールとして、次のようなものが提供されています。どれもSEO対策として欠かせないツールといえるでしょう。
- Google Chromeのデベロッパーツールで提供されるLighthouse
- PageSpeed Insights
- Google Search Console
- モバイル フレンドリー テスト
マークアップの検証
WEB標準に100%準拠させるかどうかはポリシーにもよりますが、不適切なマークアップがないかのチェックは必要です。HTML、CSSそれぞれの文法チェック用のサイトがあるので、下記サイトにチェックを行ってください。
テンプレート
HTML5のテンプレートとして必要最小限のバージョン、OGP（Open Graph Protocol）と基本レイアウトを追加したバージョン、IE9以下の対応を施したバージョンの3種類を用意しました。
OGPについては下記を参考にしてください。
3種類のテンプレートは下記URLにてダウンロードできます。
PUGとRSCSSで作成したテンプレートは下記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: 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> </main> <!-- /main:コンテンツエリア --> <!-- footer:ページフッタ --> <footer class="pg-footer"> </footer> <!-- /footer:ページフッタ --> </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/32x32 | favicon.ico |
スマートフォン対応として以下のサイズも作成します。
iOSやAndroidで使われ、デバイス側で適切に縮小されます
| サイズ | ファイル名 |
|---|---|
| 152x152 | favicon-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
ress.cssのダウンロードサイト - HTML5 Doctor：_html5reset.scss
HTML5 Reset Stylesheet [HTML5 Doctor]
ress（_ress.scss）はスタイルをリセットするというより、要素の特徴を残しつつ、ブラウザ間の差異がなくなるようにします。そのため、ressでは B は太字、リストは黒丸といったスタイルが維持されています。
リストの黒丸などのスタイルもリセットしたい場合は、HTML5 DoctorのリセットCSS（_html5reset.scss）を使ってください。これらのリセットCSSは直接変更せず、オリジナルのままを保つようにしてください。何か変更が必要であれば、次に紹介する_base.scssで設定の上書きをおこなってください。
基本設定を施した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のスタイル・書式ルール
- 非推奨タグは原則使わない。
- 表示スタイルは文書の構造と分離し、書体、サイズ、色、行間、背景色などの見た目についてはスタイルシートで設定する。
- インデントにはタブ文字を使う。
- セレクタ、プロパティ、値等全て、小文字で表記する。
- DIVやSPANなどの意味を持たないタグはなるべく使わない。
- コンテンツの増減で崩れない構造を心がける。
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プロトコルが優先されてしまうので、ローカルでの確認が必要な際はプロトコルを明記してください。
高解像度ディスプレイ対応
高解像度ディスプレイへの対応や、PCとSPで画像内容を切り替えたい場合、srcset属性を使って実装してください。
<img src="pic.jpg" srcset="pic@2x.jpg 2x, pic@3x.jpg 3x" alt="＊＊＊">詳しい使い方は下記を参考にしてください。
情報設計ガイドライン
ディレクトリ名
ディレクトリ名は英数半角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」で表記します。
B・M・Pの前では、Nの代わりにMを使います。
促音
「っ」は子音を重ねます。
CHに限り、その前にTを加えます。
長音
「O」や「U」は記入しません。