株式会社アジタス コーディングレギュレーション 改訂履歴 初版 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 対応ブラウザ修正 2016/03/31 対応ブラウザ修正 2016/12/01 対応ブラウザ修正 2018/11/12
はじめに 本書の目的は 制作の効率化 クオリティの向上 各作業者間のスタイルの統一を図る目安になることで 常にブラッシュアップを繰り返し 現時点での最適解の共有に活用するものです 目次 基本仕様 ファイル ディレクトリ構成 画像ファイル 対応ブラウザ 対象 OS 品質管理 (X)HTML 制作 文字コード テンプレート インデント パス指定 title 要素 img 要素 表記規則 HTML5 によるマークアップ指針 その他のルール CSS 制作 共通 CSS 読み込み方法 ID 名 CLASS 名の命名規則 ID 名サンプル CLASS 名サンプル コードフォーマット コメントの記述 ショートハンドプロパティの使用 Copyright(c) 2009-2018. Azitas Corporation 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) 2009-2018. Azitas Corporation 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) 2009-2018. Azitas Corporation All Rights Reserved. 4
基本仕様 3 対応ブラウザ 対象 OS 特にご指定のない限り 以下のブラウザをチェック対象として制作する 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 標準のメーラー ) 1 以下の機種を標準チェック機とする iphone6 / ipad Air Nexus5 / Xperia Z4 / NEXUS 5X / Qua tab PX 標準チェック機は市場シェアによって変わる可能性があります 2 対応メーラーの拡張がある場合にはその指示に従う Copyright(c) 2009-2018. Azitas Corporation 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) 2009-2018. Azitas Corporation 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) 2009-2018. Azitas Corporation All Rights Reserved. 7
(X)HTML 制作 2 インデント 要素のセクション毎に適切に改行 タブインデントを設けて ソースを読みやす いものにする インデントの例 <div> <p> テキストテキストテキスト </p> <ul> <li> テキストテキストテキスト </li> <li> テキストテキストテキスト </li> <li> テキストテキストテキスト </li> </ul> </div> パス指定 ヘッダーなど複数ページで使われるものはサイトルート相対パスとし それ以外は相対パスとする 相対パス記述例 <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) 2009-2018. Azitas Corporation All Rights Reserved. 8
(X)HTML 制作 3 title 要素 titleタグの内容の指定がない場合は 該当するページタイトルを先頭に 属する親カテゴリー名を記述し 最後にサイト名称を 全角パイプ で区切り明記する <title> の例 <title> ページ名称 大カテゴリ サイト名称 </title> <title> ページ名称 サイト名称 </title> img 要素 全てのimgタグにalt 属性を用いて代替テキストを付加する 文字要素のない写真等は 〇〇の写真 など 適切な代替テキストを指定する title 属性は指定しない width height を指定する 表記規則 要素名 属性名は全て半角 小文字で記述する 属性値はダブルクォーテーション で囲む UTF-8 以外の文字コードのとき 特殊文字は実体参照で記述する Copyright(c) 2009-2018. Azitas Corporation All Rights Reserved. 9
(X)HTML 制作 4 HTML5 によるマークアップの指針 HTML5ではコンテンツの意味や意図を理解しないと正しいマークアップが出来ない要素が増えています 例えば b 要素は 他の文章とは区別したいテキストの範囲 に使用しますが この判断はコンテンツ作成者または設計者でなくては困難です そのため 標準対応としてコーディング時に行なうマークアップを以下の通り定めます 見出し h1~h6 見出しに対応するコンテンツにある程度のボリュームがある場合に使用する 例えば 住所 : 県 区 市といった場合 住所 は見出しにならない 段落 p 文章をマークアップする際に p 要素より適したものがない場合に使用する 順序型 ol > li 順番に意味があるリストに使用する リスト 非順序型 ul > li 順番に意味がないリストに使用する 用語リスト 用語 dl > dt dd で説明される用語に使用する 用語の説明 dl > dd dt でマークアップされた用語の説明文に使用する 定義語リスト 定義語 dl > dt > dfn dd で説明される定義語に使用する 定義語の説明 dl > dd dt > dfn でマークアップされた定義語の説明文に使用する Copyright(c) 2009-2018. Azitas Corporation All Rights Reserved. 10
(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 aside この要素でマークアップされた内容だけで完結できるコンテンツに使用する見出しとその内容で構成されるコンテンツのグループ化に使用するメインコンテンツと関連するが切り離されているものに使用する Copyright(c) 2009-2018. Azitas Corporation All Rights Reserved. 11
(X)HTML 制作 6 HTML5 によるマークアップの指針 本文から参照される絵 写真 図表 ソース 本文中の図版 図版のキャプション 注釈 細目 お問い合わせ / 連絡先 figure figcaption small address コードなどに使用する 本文から参照されるか 独立したコンテンツとして成立するか で判断する figureでマークアップした対象のキャプションを指定するために使用する免責 警告 法的規制 著作権 ライセンス要件などを注釈 細目として扱う場合に使用するそのページに関するお問い合わせ先 連絡先に使用する aritcle 内で使用した場合は articleで囲われた記事のお問い合わせ先となる Copyright(c) 2009-2018. Azitas Corporation All Rights Reserved. 12
(X)HTML 制作 7 その他のルール 一連の文章として 見出し 段落 箇条書きなどのどれに該当するのかを考え ふさわしい要素でマークアップを行う メールアドレスはSPAM 防止のため JavaScriptで暗号化して記述する 不要ファイル バックアップファイルは削除する JavaScriptはjQuery( バージョンは適宜判断 ) を使用する 印刷対応は指示がある場合のみ行い 印刷物に不要となるメニューなどの要素を省き メインコンテンツのみを印刷する方法を標準とする レスポンシブウェブデザインなどでメディアクエリを使う際にはCSSファイル内に記述する Copyright(c) 2009-2018. Azitas Corporation 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) 2009-2018. Azitas Corporation All Rights Reserved. 14
CSS 制作 2 ID 名サンプル container header footer sidebar main conts gnavi CLASS 名サンプル section inner sidemenu newsbox photobox bannerlist mailform Copyright(c) 2009-2018. Azitas Corporation 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) 2009-2018. Azitas Corporation 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) 2009-2018. Azitas Corporation All Rights Reserved. 17