株式会社アジタス
コーディングレギュレーション
改訂履歴
初版 2009/10/01 一部修正 2010/12/06 対応ブラウザ修正、画像ファイルの形式修正、補足追記 2011/05/02 対応ブラウザ修正 2013/04/12 文言、内容一部修正 2014/02/25 対応メーラーの追加 2014/04/08 メールアドレスの暗号化方法を変更 2014/06/05 対応ブラウザ修正 2015/01/21 対応ブラウザ修正 2015/06/23 対応ブラウザ修正 2016/01/06はじめに
目次
⚫
基本仕様
•ファイル・ディレクトリ構成 •画像ファイル •対応ブラウザ・対象OS •品質管理⚫
(X)HTML制作
•文字コード •テンプレート •インデント •パス指定 •title要素 •img要素 •表記規則 •HTML5によるマークアップ指針 •その他のルール⚫
CSS制作
•共通CSS •読み込み方法 •ID名、CLASS名の命名規則 •ID名サンプル・CLASS名サンプル •コードフォーマット •コメントの記述 •ショートハンドプロパティの使用 本書の目的は、制作の効率化、クオリティの向上、各作業者間のスタイルの統一を 図る目安になることで、常にブラッシュアップを繰り返し、現時点での最適解の共 有に活用するものです。基本仕様 1
ファイル・ディレクトリ構成
ルート ├ [css] │ ├ common.css … 複数のページで使われるCSSを記述する │ └ index.css … index.htmlだけで使われるCSSを記述する ├ [img] │ ├ [common]… 複数のページで使われる画像を格納する │ └ [index] … index.html/cssだけで使われる画像を格納する ├ [js] │ └ common.js … サイト共通のJavaScrip └ index.html⚫
ファイル命名規則
•
半角英数字・小文字のみを使用する。
•
記号は「-」（ハイフン）、「_」（アンダースコア）のみ使用する。
•
機種依存文字は使用しない。
•
全角スペース、半角スペース(Space)は使用しない。
•
必ずアルファベットから開始する。（数字から開始しない）
基本仕様 2
画像ファイル
⚫
JPEG
写真等、色数の多い画像はJPEGを使用する。 画質：Fireworks 90 Photoshop 80⚫
PNG
写真以外の画像は基本的にはPNG 8を使用する。 透過が2色以上の画像は、Fireworksの場合はPNG 32、 Photoshopの場合はPNG 24で書き出す。⚫
GIF
アイコン等の小さい画像やアニメーションはGIFを使用する。⚫
画像ファイル名一例
•見出し --- ttl01.png / about_ttl02.png •ボタン --- btn_submit.png / btn_cancel.png •アイコン --- arrow01.gif / contact01.gif •グローバルナビ ---- gnavi_home_out.png / gnavi_home_over.png •背景 --- header_bg.png / footer_bg.png⚫
画像ファイル形式
画像の種類に応じて適切なファイル形式を選択する。⚫
画像ファイル名一例
基本的な命名規則は3ページ目のファイル命名規則と同様のものとする。 画像ファイル名は「ページ名_部位_種類_詳細（連番)_状態. 拡張子」とする。基本仕様 3
特にご指定のない限り、以下のブラウザをチェック対象として制作する。⚫
Windows
• Internet Explorer 11 • Firefox 最新版 • Google Chrome 最新版⚫
Mac
• Safari 最新版 • Firefox 最新版 • Google Chrome 最新版⚫
スマートフォン・タブレット(※1)
•iOS 11
Safari •Android OS 6.0～8.0
標準ブラウザ⚫
HTMLメール(※2)
• Gmail • Yahooメール• Outlook.com（旧Windows Live Hotmail） • Thunderbird
• Appleメール（Mac標準のメーラー）
対応ブラウザ
対応ブラウザ・対象OS
※1…以下の機種を標準チェック機とする。 •iPhone6 / iPad Air
•Nexus5 / Xperia Z4 / NEXUS 5X / Qua tab PX
•標準チェック機は市場シェアによって変わる可能性があります。
基本仕様 4
品質管理
⚫
HTML Validator
http://validator.w3.org/ エラー数0としますが、コンバージョンタグなど計測タグによる エラー及びサイトの構成上修正できないエラーは許容範囲とする。⚫
HTML-lint
http://www.htmllint.net/html-lint/htmllint.html ・重要度3以下のエラーに関しては出来る範囲で修正を行うこと。 ・重要度4以上のエラーは必ず修正すること。 なお、文字コードがUTF-8の場合に限り以下のエラーを修正する 必要はない。 「XHTML1.0 では XML宣言をすることが強く求められています。」 「XHTML1.0 では XML宣言中に encoding 指定をしましょう。」 また、コンバージョンタグなど計測タグによるエラー及び サイトの構成上修正できないエラーは許容範囲とする。 デザインとの相違がないか目視によるチェックに加え、以下のチェックツールを 使用し、HTMLファイルの文法等のエラーを解消する。(X)HTML制作 1
UTF-8を使用する。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta http-equiv="content-script-type" content="text/javascript" /> <meta http-equiv="content-style-type" content="text/css" />
<meta name="description" content="" /> <meta name="keywords" content="" /> <title></title>
<link href="css/common.css" rel="stylesheet" type="text/css" /> <link href="css/index.css" rel="stylesheet" type="text/css" /> </head> <body> </body> </html>
文字コード
ひな型
(X)HTML制作 2
要素のセクション毎に適切に改行、タブインデントを設けて、ソースを読みやす いものにする。⚫
インデントの例
⚫
相対パス記述例
•<p><a href=“./”>同ディレクトリのindexファイルへのリンク</a></p> <p><a href=“index.html”>同ディレクトリのindexファイルへのリンク</a></p> ※index.htmlを省略するかどうかを選択していただき、対応する。 •<p><a href="../page_sample.html">1階層上のページへのリンク</a></p>⚫
サイトルート相対パス記述例
•<p><a href=“/”>トップページへのリンク</a></p> •<p><a href=“/second/page_sample.html”>2階目のページへのリンク</a></p>⚫
絶対パス記述例
インデント
<div> <p>テキストテキストテキスト</p> <ul> <li>テキストテキストテキスト</li> <li>テキストテキストテキスト</li> <li>テキストテキストテキスト</li> </ul> </div>⚫
パス指定
ヘッダーなど複数ページで使われるものはサイトルート相対パスとし、 それ以外は相対パスとする。(X)HTML制作 3
titleタグの内容の指定がない場合は、該当するページタイトルを先頭に、属す る親カテゴリー名を記述し、最後にサイト名称を、全角パイプ「｜」で区切り 明記する。⚫
<title>の例
<title>ページ名称｜大カテゴリ｜サイト名称</title> <title>ページ名称｜サイト名称</title> • 全てのimgタグにalt属性を用いて代替テキストを付加する。 • 文字要素のない写真等は「〇〇の写真」など、適切な代替テキストを指定 する。 • title属性は指定しない。 • width、height を指定する。 • 要素名、属性名は全て半角、小文字で記述する。 • 属性値はダブルクォーテーション「”」で囲む。 • UTF-8以外の文字コードのとき、特殊文字は実体参照で記述する。title要素
img要素
表記規則
(X)HTML制作 4
HTML5ではコンテンツの意味や意図を理解しないと正しいマークアップが 出来ない要素が増えています。 例えば、b要素は「他の文章とは区別したいテキストの範囲」に使用しますが、 この判断はコンテンツ作成者または設計者でなくては困難です。そのため、標準 対応としてコーディング時に行なうマークアップを以下の通り定めます。 見出し h1～h6 見出しに対応するコンテンツにある程度の ボリュームがある場合に使用する。 例えば、住所：○○県××区△△市といった 場合、「住所」は見出しにならない。 段落 p 文章をマークアップする際に、p要素より 適したものがない場合に使用する リスト 順序型 ol > li 順番に意味があるリストに使用する 非順序型 ul > li 順番に意味がないリストに使用する 用語 リスト 用語 dl > dt ddで説明される用語に使用する 用語の説明 dl > dd dtでマークアップされた用語の説明文に 使用する 定義語 リスト 定義語 dl > dt > dfn ddで説明される定義語に使用する 定義語の説明 dl > dd dt > dfnでマークアップされた定義語の 説明文に使用するHTML5によるマークアップの指針
(X)HTML制作 5
HTML5によるマークアップの指針
表 説明 table > caption 表の説明文に使用する ヘッダー table > thead 表中のヘッダーに使用する フッター table > tfoot 表中のフッターに使用する 本文 table > tbody 表中の本文に使用する 行 table > (thead|tfoot|tb ody) > tr 表中の行を作成する 見出し table > (thead|tfoot|tbody ) > tr > th 表中の見出しに使用する 内容 table > (thead|tfoot|tbody ) > tr > td 表中の内容に使用する ヘッダー header セクショニングされたコンテンツのヘッダー 使用する フッター footer セクショニングされたコンテンツのフッター に使用する ナビゲーション nav 主要なナビゲーションにのみ使用する 記事 article この要素でマークアップされた内容だけで 完結できるコンテンツに使用する セクション section 見出しとその内容で構成されるコンテンツの グループ化に使用するHTML5によるマークアップの指針
(X)HTML制作 6
HTML5によるマークアップの指針
本文中の図版 figure 本文から参照される絵・写真・図表・ソース コードなどに使用する ※「本文から参照されるか」「独立したコン テンツとして成立するか」で判断する。 図版のキャプション figcaption figureでマークアップした対象のキャプショ ンを指定するために使用する 注釈・細目 small 免責・警告・法的規制・著作権・ライセンス 要件などを注釈・細目として扱う場合に 使用する お問い合わせ/ 連絡先 address そのページに関するお問い合わせ先・ 連絡先に使用する ※aritcle内で使用した場合は、articleで 囲われた記事のお問い合わせ先となる(X)HTML制作 7
その他のルール
• 一連の文章として、見出し、段落、箇条書きなどのどれに該当するのかを 考え、ふさわしい要素でマークアップを行う。 • メールアドレスはSPAM防止のため、JavaScriptで暗号化して記述する。 • 不要ファイル、バックアップファイルは削除する。 • JavaScriptはjQuery（バージョンは適宜判断）を使用する。 • 印刷対応は指示がある場合のみ行い、印刷物に不要となるメニューなどの要 素を省き、メインコンテンツのみを印刷する方法を標準とする。 • レスポンシブウェブデザインなどでメディアクエリを使う際にはCSSファイ ル内に記述する。CSS制作 1
• キャメル方式で命名する（2語目以降の頭文字を大文字にする）。 • 使用可能な文字は、半角英数字 • 頭文字に数字と大文字を使用しない。 • スタイルや見た目を表す名前ではなく、コンテンツを示す名前を付ける。⚫
ID名、CLASS名の例
× id=“SideNavi” ○ id=“sideNavi” × class=“font-red” ○ class=“notice”⚫
common.css
共通のリセット用スタイルとレイアウト用スタイルを記述する。 各HTMLファイルから、上記共通CSSと各ページ固有のcssを読み込むこと。⚫
CSS読み込み方法の例
<link href="css/common.css" rel="stylesheet" type="text/css" /> <link href="css/index.css" rel="stylesheet" type="text/css" />
