レギュレーション

HTMLバージョン

特に指示がない限りはHTML5を使用してください。

<!DOCTYPE html>

文字コード

UTF-8を使用してください。
また、ファイルはBOM無しのUTF-8で保存してください。

<meta charset="utf-8">

理由

HTML5ではUTF-8の使用が推奨されているため、UTF-8を標準とします。
他の文字コードも指定することはできますが、文字化けなどへの配慮が必要になります。
また、UTF-8であれば、表現できる文字の範囲が広いため、関連するファイルがUTF-8で統一されている場合、不必要に文字コードを気にする必要がなくなるというメリットもあります。
ただし、BOMの有無で文字化けが起こるので、BOMなしのUTF-8になっていることを確認しましょう。

BOMについて

BOMについては以下のページがわかりやすいので一度読んでおいてください。
BOMの地雷を踏み抜かない正しい文字コードとの接し方

機種依存文字

実体参照に変換して記述してください。

理由

文字コードがUTF-8の場合、Unicodeに対応したフォントであれば実体参照にしなくても問題なく表示することができます。
しかし、閲覧環境はユーザーによって異なり、ユーザー側でカスタムすることも可能なため、Unicodeに対応したフォントで閲覧しているとは限りません。
よって、より確実に表示するために実体参照で記述することを推奨します。

jQuery

基本はjQuery 2系の最新版を使用してください。
また、IE8以下に対応する場合はjQuery 1系の最新版を使用してください。
プラグインを使用する場合、プラグインが対応しているバージョンまで落とすことも視野に入れましょう。

jQuery 3系に関して

使用する全てのプラグインがjQuery 3系に対応しているか、プラグインを使用せずにコーディングする場合のみ使用可としますが、現状では無理に使用する必要はありません。

検証・対応ブラウザ

以下のブラウザを標準対応のブラウザとします。
なお、案件によっては対応ブラウザを拡張する場合もあるので、指示をよく確認して対応してください。

Windows

  • Microsoft Edge 最新版
  • Firefox 最新版
  • Google Chrome 最新版

Mac

  • Safari 最新版
  • Firefox 最新版
  • Google Chrome 最新版

スマートフォン

  • iOS13.3 iPhone6S Safari
  • iOS11.2 iPhone6 Plus Safari
  • Android OS 9.0 Galaxy S8 Chrome
  • Android OS 8.0 Nexus 5X Chrome

タブレット

  • iOS 12.3 Apple iPad Air
  • Android OS 8.0 Galaxy Tab S4

※エミュレータ「BrowserStack（ブラウザスタック）」（https://www.browserstack.com/）を使用する場合もございます。
※OSの国内シェア率で半年に1回のペースで対応OSの見直しを行っているため、ご発注タイミングによっては変更の可能性がございます。

印刷対応

特に要望がない限りは特別な対応はしないものとします。
印刷対応の要望があった場合は、通常のCSSファイルとは別に印刷用CSS(print.cssなど)を用意し、linkタグで読み込みます。

<link href="print.css" media="print" rel="stylesheet">

linkタグで読み込む理由

CSSには他のCSSファイルを取り込むための「@import」がありますが、読み込み速度に難があるようなので使用を避けます。
また、MediaQueryを使用して同一ファイル内で印刷用のスタイル指定をすることもできますが、印刷用とスクリーン用のスタイルが混在して読みづらくなってしまうため、これも使用を避けます。
linkタグでの読み込みは上記のような明確なデメリットとはなりづらいので、この方法を標準とします。

ディレクトリ構造

テンプレートを使用した場合のコンパイル後のディレクトリ構造は以下のようになります。

サイトルート
  ├ [css]----------------：サイトで使用するCSSを全て格納する
  │  └ style.css---------：cssは原則としてこのファイルのみ
  ├ [img]----------------：サイトで使用する画像を全て格納する
  │  ├ [common]----------：ヘッダー・フッターなど、サイトの共通パーツで使われる画像を格納する
  │  ├ [index]-----------：/index.phpでのみ使用する画像を格納する
  │  ├ [sub_page01]------：/sub_page01.phpでのみ使用する画像を格納する
  │  └ [sub_page02]------：/sub_page02/以下で共通で使用する画像を格納する
  │     ├ [index]--------：/sub_page02/index.phpでのみ使用する画像を格納する
  │     └ [sub_page03]---：/sub_page02/sub_page03.phpでのみ使用する画像を格納する
  ├ [js]-----------------：サイトで使用するJavaScriptファイルを全て格納する
  │  ├ [slick]-----------：フォルダが存在するプラグインはフォルダごと格納する
  │  ├ [SmoothScroll.js]-：単ファイルのプラグインはファイルのみ格納する
  │  └ [function.js]-----：サイト共通で使用するスクリプトを記述するファイル
  ├ [sub_page01]---------：/sub_page01.php
  ├ [sub_page02]---------：/sub_page02/以下のページを格納する
  │  ├ [index]-----------：/sub_page02/index.php
  │  └ [sub_page03.php]--：/sub_page02/sub_page03.php
  └ [index.php]----------：/index.php

命名規則

コーディングでは多数のファイルを作成します。
それぞれを適切に命名することでファイルへのアクセスが早くなり、メンテナンス性の向上やミスの削減に寄与します。
しかし、指標もなく漠然と名前を付け用とすると、一貫性がなく、名前を考える時間も必要になってしまうため、以下の命名規則を定めます。

共通ルール

  • 半角英数字のみを使用してください。
  • 記号は「-」（ハイフン）、「_」（アンダースコア）のみ使用してください。
  • 全角スペース、半角スペースは使用しないでください。
  • 日本語をローマ字で表記する場合は、ヘボン式を使用してください。
理由

ファイル名に日本語が含まれているファイルは、サーバへのアップロードができない場合があります。
これはサーバ依存の問題のため、作業者側で半角英数に使用を限定したほうが無難です。
また、記号やスペースはプログラム上で意図しない処理が行われ、エラーの原因となり得るため、記号の使用は比較的安全なハイフンとアンダースコアに限定します。
また、ヘボン式に統一することにより、表記揺れをなくす狙いです。

PHP(HTML)ファイル・フォルダ

  • ファイル名から何のページか推測出来る英単語や慣例的に使われている名前にしてください。
  • フォルダの場合は内包するコンテンツのカテゴリ名にしてください。
理由

コーディングの際はエクスプローラ等から何度もファイルを開くことになります。
この時、ファイル名から内容を予測できることは、作業速度の向上に繋がります。
また、ファイル名やフォルダ名はそのままURLになるので、ユーザー側のメリットにもなり得ます。

SCSSファイル

  • PHP(HTML)ファイルに対応するCSSの場合は該当するファイルと同じ名前をつけてください。
  • モジュール化されたパーツに関しては、テンプレートのルールにしたがい、適切なファイルに記載してください。
理由

PHP(HTML)ファイルと同名のSCSSファイルとすることで、作業速度の向上に繋がります。

JSファイル

原則としてプラグインの格納以外で新規ファイルを配置することは認めません。
特定のページにのみ独自スクリプトを使用しなければならない場合のみ、該当のPHP(HTML)ファイルと同じ名前をつけてください。
このケースは主に修正作業で発生する可能性がありますが、可能な限りfunction.jsを使用するなど、不要なファイルを増やさないようにしてください。

品質管理

以下のツールを利用してチェックを行ってください。

W3C Markup Validation Service

http://validator.w3.org/
コンバージョンタグなど計測タグによるエラー及びサイトの構成上修正できないエラーは許容範囲とします。

HTML-lint

http://www.htmllint.net/html-lint/htmllint.html

重要度4以上のエラーの修正は必須とします。
ただし、コンバージョンタグなど計測タグによるエラー及びサイトの構成上修正できないエラーは許容範囲とします。

HTML Coding Checker

https://chrome.google.com/webstore/detail/html-coding-checker%EF%BC%88%CE%B2%E7%89%88%EF%BC%89/pjpdbehajmbnicjjdfclnenlcnnmgbog?hl=ja
一通りのチェック機能を取り揃えたchrome拡張です。
導入を推奨します。

PAGE TOP