レギュレーション

HTMLバージョン

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

HTML 5

<!DOCTYPE html>

XHTML 1.0 Transitional

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  • ※UTF-8の場合はXML宣言を省略可です。

文字コード

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

  • ※アプリケーションによってはBOM無しのUTF-8をUTF-8Nと表記していますので注意してください。
HTML 5
<meta charset="utf-8">
XHTML 1.0
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

理由

WebサイトにおいてUTF-8を使用するのは次のような理由があるからです。

  • 表現できる文字の範囲が広く、ユニコードに対応しているフォントを使用するなら機種依存文字を実体参照にする必要がない。
  • Shift_JISやEUC-JPではAjaxで文字化けが起きる。
  • 日本語向けのサイトを日本語を扱わない端末・ブラウザで開いても文字化けを起こさない(逆も同様)。

しかし、UTF-8にもデメリットがないわけではありません。
例えば、ファイルをUTF-8でBOMを付けて保存するとWebブラウザで表示した際に余白が発生する場合があります。PHPではプログラムに不具合が起きるといった問題もあります。更に古いFirefoxではクロスサイトスクリプティングの恐れがあります。

BOMはファイルを読み込むプログラム側にそのファイルの文字コードを示すものであり、このBOMがなければUTF-8で保存したファイルがShift_JISといった異なる文字コードで開かれ文字化けを起こす可能性があります(使用したアプリケーションに依存します)。
WebブラウザもBOMで文字コードの判別を行いますが、HTMLファイルではmetaで文字コードを指定するのでBOMを付けるメリットはありません。
そのため、Webサイトの制作においてはUTF-8でBOMを付けない方がよいとされます。

また、HTML5ではUTF-8を使用することが推奨されており、EUC-JPやShift_JISは非推奨となっていることからもUTF-8を使用します。

機種依存文字

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

理由

文字コードがUTF-8の場合に、メイリオやヒラギノ角ゴシックなどのユニコードに対応したフォントを使用することで実体参照にしなくても各端末で問題なく表示されます。しかし、Webサイトを閲覧する環境はユーザーによって異なり、ユニコードに対応したフォントが入っていない可能性が考えられるため、実体参照で記述します。

JavaScript

対応ブラウザがIE9以上であればjQuery 2.X系を使用してください。
対応ブラウザにIE8以下が含まれる場合はjQuery 1.X系を使用してください。
ただし、$.browserを使っているプラグインを使う必要がある場合には、1.8.3を使用してください。

理由

1.9から$.browserが使えなくなったため、クロスブラウザのために$.browserを使っているjQueryプラグインは正常に動作しないことがあります。
プラグイン側を修正するためには多くの時間がかかり、バグを生み出す可能性も高いためjQueryのバージョンを下げることで対応します。

検証・対応ブラウザ

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

Windows

  • Internet Explorer 11
  • Firefox 最新版
  • Google Chrome 最新版

Mac

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

スマートフォン・タブレット

  • iOS 10
  • Android OS 5.0~6.0

理由

Firefox・Google Chrome・Safariは自動更新されることと更新頻度が高いため最新版だけを対象とします。
Internet Explorerはバージョン8への強制アップデートにより、6~7のシェアが大幅に落ちたため除外します。
IE10以下も2016年3月時点でシェアが低くなったため除外します。 スマートフォン・タブレットも公開されいてるシェア率と当社で運営しているサイトでのシェア率を見て低いものを除外します。

印刷対応

印刷用CSSの読み込みはlinkタグを使用してください。

XHTML 1.0
<link href="print.css" type="text/css" media="print" rel="stylesheet" />
HTML 5
<link href="print.css" media="print" rel="stylesheet">

理由

@importを使う方法では読み込み速度が遅くなることと、CSSのファイルでメディアクエリを使用する方法では印刷用とスクリーン用のコードが混在し読み難いものとなるため、デメリットが発生しないlinkタグでの読み込みを行います。

ディレクトリ構造

小~中規模サイトはパターン1、大規模サイトはパターン2を使用してください。
大規模サイトの目安はテンプレートページが50ページ以上かつ全体のページ数が100ページ以上のサイトです。

パターン1

ルート
 ├ [css] … サイトで使われるCSSファイルを全て格納する
 │ ├ common.css … 複数のページで使われるCSSファイルを格納する
 │ ├ [service] … serviceカテゴリに複数のページがあるためフォルダを作成する
 │ │ ├ index.css … serviceフォルダの index.html だけで使われるCSSを記述する
 │ │ └ sub_page.css … serviceフォルダの sub_page.html だけで使われるCSSを記述する
 │ ├ about_us.css … about.html だけで使われるCSSを記述する
 │ └ index.css …  index.html だけで使われるCSSを記述する
 ├ [img] … サイトで使われる画像を全て格納する
 │ ├ [common] … ヘッダー・フッターやボタンなど複数のページで使われる画像を格納する
 │ ├ [about_us] … about_us.html だけで使われる画像を格納する
 │ ├ [index] … index.html だけで使われる画像を格納する
 │ ├ [service] … service カテゴリ共通で使われる画像を格納する
 │ │ ├ [index] … service/index.html だけで使われる画像を格納する
 │ │ └ [sub_page] … service/sub_page.html だけで使われる画像を格納する
 ├ [js] … サイトで使われるJavaScriptを全て格納する
 │ └ common.js … jQueryを始めとした共通のJavaScriptは common.js に全てまとめる
 ├ [about_us] … about_us カテゴリのページを格納する
 │ └ index.html
 ├ [service] … service カテゴリのページを格納する
 │ ├ index.html
 │ └ sub_page.html
 └ index.html

パターン2

ルート
 ├ [css] … サイトで使われるCSSファイルを全て格納する
 │ ├ common.css … 複数のページで使われるCSSファイルを格納する
 │ └ index.css …  index.html だけで使われるCSSを記述する
 ├ [img] … サイトで使われる画像を全て格納する
 │ ├ [common] … ヘッダー・フッターやボタンなど複数のページで使われる画像を格納する
 ├ [js] … サイトで使われるJavaScriptを全て格納する
 │ └ common.js … jQueryを始めとした共通のJavaScriptは common.js に全てまとめる
 ├ [about_us] … about_us カテゴリのページを格納する
 │ ├ [css] … about_us カテゴリのCSSファイルを全て格納する
 │ │ └ index.css …  index.html だけで使われるCSSを記述する
 │ ├ [img] … about_us カテゴリの画像ファイルを全て格納する
 │ │ └ [index] …  index.html だけで使われるCSSを記述する
 │ └ index.html
 ├ [service] … service カテゴリのページを格納する
 │ ├ [css] … service カテゴリのCSSファイルを全て格納する
 │ │ ├ index.css …  service/index.html だけで使われるCSSを記述する
 │ │ └ sub_page.css …  service/sub_page.html だけで使われるCSSを記述する
 │ ├ [img] … service カテゴリ共通で使われる画像を格納する
 │ │ ├ [index] …  service/index.html だけで画像ファイルを格納する
 │ │ └ [sub_page] …  service/sub_page.html だけで画像ファイルを格納する
 │ ├ index.html
 │ └ sub_page.html
 └ index.html
  • ※パソコン向けサイトとは別にスマートフォン・タブレット向けサイトを制作する場合には、spフォルダ以下に配置してください。

理由

パターン1はCSSや画像が1つのフォルダ内に全て格納されるため構造が単純でファイル管理が容易です。
しかし、ファイル数が多く構造も複雑なサイトでは特定のHTMLに対応したファイルを見つけることに時間がかかってしまいがちです。
そのため、小~中規模のサイトに向いています。

一方、パターン2はサブディレクトリごとに必要なファイルが独立しているため、1フォルダ辺りのファイル数が減り検索性が向上します。

命名規則

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

共通ルール

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

ファイル名に日本語を使用したファイルはサーバへのアップロードができない場合があります。これはサーバに依存する問題のため、ファイル名には半角英数字を使用した方が問題が発生しません。
また、記号やスペースはプログラム上で誤った処理をしてしまい、エラーを引き起こす原因となり得るためハイフンとアンダースコアに限定します
その他、自由にファイル名を付けてしまうと統一感がなくなってしまい、ファイル管理が大変になるということも理由の一つとして挙げられます。

HTMLファイル・フォルダ

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

コーディングの際にはファイルエクスプローラーでHTMLファイルを開くという行為を何度も行います。このとき、ファイル名から何のページか推測出来ることでファイルアクセスが早くなります。
また、ファイル名はそのままURLになりますのでユーザーにもメリットがあります。

CSSファイル

  • HTMLとCSSが一対一で対応する場合は、HTMLファイルと同じ名前を付けてください。
  • モジュール化されたスタイルやレイアウトテンプレートのスタイルはcommon.cssというファイル名にしてください。
理由

1番はHTMLファイルの命名規則と同様でファイルアクセスを早くするためです。
2番はサイト共通で使うものになるため、「共通の」という意味でcommonという名前にしています。

コードフォーマット

コードフォーマットのルールは多数派に合わせたうえで、読みやすくなるためのものを採用しています。

HTML

<body>
<div id="container">
	<div id="header">
		<h1>サイトタイトル</h1>
		<div class="contact"><a href="">お問い合わせ</a></div>
	</div>

	<div id="main">
		<div id="conts">
			<h2>ページタイトル</h2>
			<p>
				サンプルテキストサンプルテキストサンプルテキストサンプルテキスト<br>
				サンプルテキストサンプルテキスト
			</p>

			<h2>ページタイトル</h2>
			<p>サンプルテキスト</p>
			<ul>
				<li>あいうえお</li>
				<li>かきくけこ</li>
				<li>さしすせそ</li>
			</ul>
		</div>

		<div id="side">
			<div class="navi">
				<ul>
					<li>メニュー1</li>
					<li>メニュー2</li>
					<li>メニュー3</li>
					<li>メニュー4</li>
				</ul>
			</div>

			<div class="bn"><a href=""><img src="" alt=""></a></div>
			<div class="bn">
				<a href="">
					<img src="" alt="">
					紹介文サンプル紹介文サンプル<br>
					紹介文サンプル
				</a>
			</div>
		</div>
	</div><!-- /#main -->

	<div id="footer">
		<div class="pageTop"><a href="#"></a></div>
	</div>
</div>
</body>
  • 内包した要素が多く一目で内容を把握しきれないような入れ子構造ではタブで字下げをしてください。
    このとき、タブはスペース4つ分としてください。
  • body要素の子要素は字下げしないでください。
  • 見出しやsectionなどコンテンツの区切りとなるようなタグの前には、1行分の改行を入れてコンテンツの区切りが視覚的にわかるようにしてください。
  • ブラウザ表示上の文章の改行位置とHTML上のコードの改行位置を一致させてください。
  • 開始タグと終了タグが大きく離れてしまい、ひと目でわからない場合は終了タグの後ろに開始タグについているクラスやIDのコメントを入れてください。
理由

改行や字下げを適切に行うことにより、HTMLの構造を視覚的に把握できるようになり、構造の理解を素早く適切に行えます。
特にHTMLタグは開始タグと終了タグが一対になっているため、雑多なコードでは構造の把握に時間がかかり最悪の場合には間違った編集を行い不具合を起こすことがあります。
上記のルールでコードフォーマットを統一することでメンテナンス性を高め前述の問題が起こりにくいコードにします。

CSS

.style1 {
	margin: 10px;
}

.style2 {
	margin: 0 10px 5px;
}

.style3, .style4 {
	margin: 0;
}

#header .inner .style5,
#header .inner .style6 {
	margin: 0;
}

/*------------------------------------------------------------
	アイコンクラス
------------------------------------------------------------*/
.icon01 {background-image: url(icon01.png);}
.icon02 {background-image: url(icon02.png);}
.icon03 {background-image: url(icon03.png);}
.icon04 {background-image: url(icon04.png);}
.icon05 {background-image: url(icon05.png);}
.icon06 {background-image: url(icon06.png);}
.icon07 {background-image: url(icon07.png);}
.icon08 {background-image: url(icon08.png);}
.icon09 {background-image: url(icon09.png);}
.icon10 {background-image: url(icon10.png);}
  • 開始の中括弧の後に改行を入れてください。
  • プロパティごとに改行してください。
  • プロパティはタブで字下げをしてください。このとき、タブはスペース4つ分としてください。
  • プロパティの値の前に半角スペースを入てください。
  • 複数セレクタは見やすいように適宜改行を入れてください。
  • カテゴライズできるセレクタにはコメントで用途を記述してください。
  • プロパティが少なく、大量にバージョンのことなるセレクタを用意する場合は1行にまとめてください。
理由

スタイルシートもHTMLと同様に読みやすいコードフォーマットにすることでメンテナンス性が高まります。

JavaScript

$(function(){
	var a, b = 1;
	$('#conts').find('.tab').click(function(){
		if($(this).hasClass('.current')){
			for(var i=0;i<10;i++){
				console.log(i);
			}
		};
		switch(b){
			case 1:
				console.log(foo);
				a = 1;
				break;
			default:
				console.log(bar);
				break;
		};
		if(a) return false;
	});

	var foo = function(bar) {
	  console.log('foo');
	  return bar;
	};

	(function(){
	  console.log('bar')
	})();
});
  • 文や式の終わりにはセミコロンを入れて改行してください。
  • 中括弧は関数に続けて開始してください。
  • 中括弧で内包するコードはインデントしてください。
  • if文の中の処理が1行で済む場合は、中括弧を省略して1行で完結させても構いません。
  • 文字列の指定でクォートを使用する際は、シングルクォーテーションに統一してください。
理由

JavaScriptではセミコロンを省略してもよいとされていますが、その場合に意図しない動作を起こすことがあります。
例えば独自関数定義でvar foo = function(){...}とする方法がありますが、この後に(function(){...})()といった形で即時関数を記述するとfooの内容も実行されます。
こういったケースを理解したうえでセミコロンを省略するのであれば問題ありませんが、同じレベルのスキルを持った人が編集するとは限らないため、セミコロンは必ず付けるものとします。

また、文字列の指定ではダブルクォーテーションとシングルクォーテーションのどちらでも同じ結果になりますが、シングルクォーテーションを使うことでHTMLタグのダブルクォーテーションをエスケープせずに使うことができるためシングルクォーテーションに統一します。

コメント

HTML

通常
<!-- コメント -->
特定要素の終わりを示す
<div id="container">
	<div class="wrap">

	</div><!-- /.wrap -->
</div><!-- /#container -->

CSS

/*------------------------------------------------------------
	調整用クラス
------------------------------------------------------------*/
/* 幅 */

JavaScript

/*------------------------------------------------------------
	ライトボックスの処理
------------------------------------------------------------*/
// ○○がtrueだったら処理停止

品質管理

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

W3C Markup Validation Service

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

HTML-lint

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

  • 重要度4以上のエラーは必ず修正する。

文字コードがUTF-8の場合に限り以下のエラーを修正する必要はありません。
「XHTML1.0 では XML宣言をすることが強く求められています。」
「XHTML1.0 では XML宣言中に encoding 指定をしましょう。」

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

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

PAGE TOP