株 式 会 社 クロノドライブ コーディングガイドライン 改 訂 履 歴 2009/10/01 初 版 2010/12/06 一 部 修 正 2011/05/02 対 応 ブラウザ 修 正 画 像 ファイルの 形 式 修 正 補 足 追 記 2013/04/12 対 応 ブラウザ 修 正 2014/02/25 文 言 内 容 一 部 修 正 2014/04/08 対 応 メーラーの 追 加 2014/06/05 メールアドレスの 暗 号 化 法 を 変 更 2015/01/21 対 応 ブラウザ 修 正
はじめに 本 書 の 目 的 は 制 作 の 効 率 化 クオリティの 向 上 各 作 業 者 間 のスタイルの 統 を 図 る 目 安 になることで 常 にブラッシュアップを 繰 り 返 し 現 時 点 での 最 適 解 の 共 有 に 活 用 するものです 目 次 基 本 仕 様 ファイル ディレクトリ 構 成 画 像 ファイル 対 応 ブラウザ 対 象 OS 品 質 管 理 (X)HTML 制 作 文 字 コード テンプレート インデント パス 指 定 title 要 素 img 要 素 表 記 規 則 HTML5によるマークアップ 指 針 その 他 のルール CSS 制 作 共 通 CSS 読 み 込 み 方 法 ID 名 CLASS 名 の 命 名 規 則 ID 名 サンプル CLASS 名 サンプル コードフォーマット コメントの 記 述 ショートハンドプロパティの 使 用 Copyright(c) 2002-2015. ChronoDrive Inc All rights reserved. 2
基 本 仕 様 1 ファイル ディレクトリ 構 成 ルート [css] common.css 複 数 のページで 使 われるCSSを 記 述 する index.css index.htmlだけで 使 われるCSSを 記 述 する [img] [common] 複 数 のページで 使 われる 画 像 を 格 納 する [index] index.html/cssだけで 使 われる 画 像 を 格 納 する [js] common.js サイト 共 通 のJavaScrip index.html ファイル 命 名 規 則 半 角 英 数 字 小 文 字 のみを 使 用 する 記 号 は - (ハイフン) _ (アンダースコア)のみ 使 用 する 機 種 依 存 文 字 は 使 用 しない 全 角 スペース 半 角 スペース(Space)は 使 用 しない 必 ずアルファベットから 開 始 する ( 数 字 から 開 始 しない) Copyright(c) 2002-2015. ChronoDrive Inc All rights reserved. 3
基 本 仕 様 2 画 像 ファイル 画 像 ファイル 形 式 画 像 の 種 類 に 応 じて 適 切 なファイル 形 式 を 選 択 する JPEG 写 真 等 色 数 の 多 い 画 像 はJPEGを 使 用 する 画 質 :Fireworks 90 Photoshop 80 PNG 写 真 以 外 の 画 像 は 基 本 的 にはPNG 8を 使 用 する 透 過 が2 色 以 上 の 画 像 は Fireworksの 場 合 はPNG 32 Photoshopの 場 合 はPNG 24で 書 き 出 す GIF アイコン 等 の 小 さい 画 像 やアニメーションはGIFを 使 用 する 画 像 ファイル 名 例 基 本 的 な 命 名 規 則 は3ページ 目 のファイル 命 名 規 則 と 同 様 のものとする 画 像 ファイル 名 は ページ 名 _ 部 位 _ 種 類 _ 詳 細 ( 連 番 )_ 状 態. 拡 張 子 とする 画 像 ファイル 名 例 出 し ------------- 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 Copyright(c) 2002-2015. ChronoDrive Inc All rights reserved. 4
基 本 仕 様 3 対 応 ブラウザ 対 象 OS 特 にご 指 定 のない 限 り 以 下 のブラウザをチェック 対 象 として 制 作 する Windows Internet Explorer 8 / 9 / 10 / 11 Firefox 最 新 版 Google Chrome 最 新 版 Mac Safari 最 新 版 Firefox 最 新 版 Google Chrome 最 新 版 スマートフォン タブレット( 1) ios7 Safari Android OS 2.3 系 4 系 標 準 ブラウザ HTMLメール( 2) Gmail Yahooメール Outlook.com( 旧 Windows Live Hotmail) Thunderbird Appleメール(Mac 標 準 のメーラー) 1 以 下 の 機 種 を 標 準 チェック 機 とする ios7(iphone5 / ipad 第 3 世 代 ) Android2.3 系 (AQUOS PHONE IS11SH) Android4 系 (GALAXY S3 / GALAXY NEXUS / Nexus7) チェック 機 の 指 定 がある 場 合 は 指 定 された 機 種 で う 2 対 応 メーラーの 拡 張 がある 場 合 にはその 指 示 に 従 う Copyright(c) 2002-2015. ChronoDrive Inc All rights reserved. 5
基 本 仕 様 4 品 質 管 理 デザインとの 相 違 がないか 目 視 によるチェックに 加 え 以 下 のチェックツールを 使 用 し HTMLファイルの 文 法 等 のエラーを 解 消 する 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 指 定 をしましょう また コンバージョンタグなど 計 測 タグによるエラー 及 び サイトの 構 成 上 修 正 できないエラーは 許 容 範 囲 とする Copyright(c) 2002-2015. ChronoDrive Inc All rights reserved. 6
(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> Copyright(c) 2002-2015. ChronoDrive Inc All rights reserved. 7
(X)HTML 制 作 2 インデント 要 素 のセクション 毎 に 適 切 に 改 タブインデントを 設 けて ソースを 読 みやす いものにする インデントの 例 <div> </div> <p>テキストテキストテキスト</p> <ul> <li>テキストテキストテキスト</li> <li>テキストテキストテキスト</li> <li>テキストテキストテキスト</li> </ul> パス 指 定 ヘッダーなど 複 数 ページで 使 われるものはサイトルート 相 対 パスとし それ 以 外 は 相 対 パスとする 相 対 パス 記 述 例 <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> 絶 対 パス 記 述 例 <p><a href= http://html-coding.co.jp/ >ページへのリンク</a></p> Copyright(c) 2002-2015. ChronoDrive Inc All rights reserved. 8
(X)HTML 制 作 3 title 要 素 titleタグの 内 容 の 指 定 がない 場 合 は 該 当 するページタイトルを 先 頭 に 属 す る 親 カテゴリー 名 を 記 述 し 最 後 にサイト 名 称 を 全 角 パイプ で 区 切 り 明 記 する <title>の 例 <title>ページ 名 称 大 カテゴリ サイト 名 称 </title> <title>ページ 名 称 サイト 名 称 </title> img 要 素 全 てのimgタグにalt 属 性 を 用 いて 代 替 テキストを 付 加 する 字 要 素 のない 写 真 等 は 〇 〇 の 写 真 など 適 切 な 代 替 テキストを 指 定 する title 属 性 は 指 定 しない width height を 指 定 する 表 記 規 則 要 素 名 属 性 名 は 全 て 半 角 小 文 字 で 記 述 する 属 性 値 はダブルクォーテーション で 囲 む UTF-8 以 外 の 文 字 コードのとき 特 殊 文 字 は 実 体 参 照 で 記 述 する Copyright(c) 2002-2015. ChronoDrive Inc All rights reserved. 9
(X)HTML 制 作 4 HTML5によるマークアップの 指 針 HTML5ではコンテンツの 意 味 や 意 図 を 理 解 しないと 正 しいマークアップが 出 来 ない 要 素 が 増 えています 例 えば b 要 素 は 他 の 文 章 とは 区 別 したいテキストの 範 囲 に 使 用 しますが この 判 断 はコンテンツ 作 成 者 または 設 計 者 でなくては 困 難 です そのため 標 準 対 応 としてコーディング 時 に なうマークアップを 以 下 の 通 り 定 めます 出 し h1 h6 出 しに 対 応 するコンテンツにある 程 度 の ボリュームがある 場 合 に 使 用 する 例 えば 住 所 : 県 区 市 といった 場 合 住 所 は 出 しにならない 段 落 p 文 章 をマークアップする 際 に p 要 素 より 適 したものがない 場 合 に 使 用 する 順 序 型 ol > li 順 番 に 意 味 があるリストに 使 用 する リスト 非 順 序 型 ul > li 順 番 に 意 味 がないリストに 使 用 する 用 語 リスト 用 語 用 語 の 説 明 dl > dt dl > dd ddで 説 明 される 用 語 に 使 用 する dtでマークアップされた 用 語 の 説 明 文 に 使 用 する 定 義 語 リスト 定 義 語 定 義 語 の 説 明 dl > dt > dfn dl > dd ddで 説 明 される 定 義 語 に 使 用 する dt > dfnでマークアップされた 定 義 語 の 説 明 文 に 使 用 する Copyright(c) 2002-2015. ChronoDrive Inc All rights reserved. 10
(X)HTML 制 作 5 HTML5によるマークアップの 指 針 説 明 table > caption 表 の 説 明 文 に 使 用 する ヘッダー table > thead 表 中 のヘッダーに 使 用 する フッター table > tfoot 表 中 のフッターに 使 用 する 本 文 table > tbody 表 中 の 本 文 に 使 用 する 表 table > (thead tfoot tbody ) > tr 表 中 の を 作 成 する 出 し table > (thead tfoot tbody ) > tr > th 表 中 の 出 しに 使 する 内 容 table > (thead tfoot tbody ) > tr > td 表 中 の 内 容 に 使 用 する ヘッダー header セクショニングされたコンテンツのヘッダー 使 用 する フッター footer セクショニングされたコンテンツのフッター に 使 用 する ナビゲーション 記 事 セクション nav article section 主 要 なナビゲーションにのみ 使 用 する この 要 素 でマークアップされた 内 容 だけで 完 結 できるコンテンツに 使 用 する 出 しとその 内 容 で 構 成 されるコンテンツの グループ 化 に 使 用 する 余 談 補 足 情 報 aside メインコンテンツと 関 連 するが 切 り 離 されて いるものに 使 用 する Copyright(c) 2002-2015. ChronoDrive Inc All rights reserved. 11
(X)HTML 制 作 6 HTML5によるマークアップの 指 針 本 文 中 の 図 版 figure 本 文 から 参 照 される 絵 写 真 図 表 ソース コードなどに 使 用 する 本 から 参 照 されるか 独 したコン テンツとして 成 するか で 判 断 する 図 版 のキャプション figcaption figureでマークアップした 対 象 のキャプショ ンを 指 定 するために 使 用 する 注 釈 細 目 お 問 い 合 わせ/ 連 絡 先 small address 免 責 警 告 法 的 規 制 著 作 権 ライセンス 要 件 などを 注 釈 細 目 として 扱 う 場 合 に 使 用 する そのページに 関 するお 問 い 合 わせ 先 連 絡 先 に 使 用 する aritcle 内 で 使 用 した 場 合 は articleで 囲 われた 記 事 のお 問 い 合 わせ 先 となる Copyright(c) 2002-2015. ChronoDrive Inc All rights reserved. 12
(X)HTML 制 作 7 その 他 のルール 連 の 章 として 出 し 段 落 箇 条 書 きなどのどれに 該 当 するのかを 考 え ふさわしい 要 素 でマークアップを う メールアドレスはSPAM 防 止 のため JavaScriptで 暗 号 化 して 記 述 する 不 要 ファイル バックアップファイルは 削 除 する JavaScriptはjQuery(バージョンは 適 宜 判 断 )を 使 用 する 印 刷 対 応 は 指 がある 場 合 のみ い 印 刷 物 に 不 要 となるメニューなどの 要 素 を 省 き メインコンテンツのみを 印 刷 する 法 を 標 準 とする レスポンシブウェブデザインなどでメディアクエリを 使 う 際 にはCSSファイ ル 内 に 記 述 する Copyright(c) 2002-2015. ChronoDrive Inc All rights reserved. 13
CSS 制 作 1 共 通 CSS 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" /> ID 名 CLASS 名 の 命 名 規 則 キャメル 方 式 で 命 名 する(2 語 目 以 降 の 頭 字 を 字 にする) 使 用 可 能 な 文 字 は 半 角 英 数 字 頭 文 字 に 数 字 と 大 文 字 を 使 用 しない スタイルや た 目 を 表 す 名 前 ではなく コンテンツを す 名 前 を 付 ける ID 名 CLASS 名 の 例 id= SideNavi id= sidenavi class= font-red class= notice Copyright(c) 2002-2015. ChronoDrive Inc All rights reserved. 14
CSS 制 作 2 ID 名 サンプル container header footer sidebar main conts gnavi CLASS 名 サンプル section inner sidemenu newsbox photobox bannerlist mailform Copyright(c) 2002-2015. ChronoDrive Inc All rights reserved. 15
CSS 制 作 3 コードフォーマット 1 につき1プロパティを 記 述 する それぞれのプロパティをタブインデントする プロパティ 名 の 後 半 角 コロン : をスペース 無 しに し 半 角 コロ ンと 値 の 間 には 半 角 スペースを1つ 空 ける } の 前 後 はスペースやタブを 設 けない 記 述 方 法 単 一 のセレクタを 指 定 する 場 合.selector { property: value; } property: value; property: value; 複 数 のセレクタを 指 定 する 場 合.selector01,.selector02,.selector03 { } property: value; property: value; property: value; Copyright(c) 2002-2015. ChronoDrive Inc All rights reserved. 16
CSS 制 作 4 コメントの 記 述 記 述 方 法 /*----------------------------------------------- ページ 名 要 素 名 大 カテゴリ 名 など -----------------------------------------------*/ /* クラス 名 小 カテゴリ 名 */ 記 述 例 /*----------------------------------------------- products -----------------------------------------------*/ /* products */ #products h5 { font-weight: bold; } ショートハンドプロパティの 使 用 一 括 指 定 できるプロパティはまとめて 記 述 する 悪 い 例 margin-top: 10px; margin-right: 15px; margin-bottom: 20px; margin-left: 15px; 良 い 例 margin: 10px 15px 20px; Copyright(c) 2002-2015. ChronoDrive Inc All rights reserved. 17