スライド 1

Size: px

Start display at page:

Download "スライド 1"

ああすかくはり
5 years ago
Views:

1 株式会社アジタスコーディングレギュレーション改訂履歴初版 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

2 はじめに本書の目的は制作の効率化クオリティの向上各作業者間のスタイルの統一を図る目安になることで常にブラッシュアップを繰り返し現時点での最適解の共有に活用するものです目次基本仕様ファイルディレクトリ構成画像ファイル対応ブラウザ対象 OS 品質管理 (X)HTML 制作文字コードテンプレートインデントパス指定 title 要素 img 要素表記規則 HTML5 によるマークアップ指針その他のルール CSS 制作共通 CSS 読み込み方法 ID 名 CLASS 名の命名規則 ID 名サンプル CLASS 名サンプルコードフォーマットコメントの記述ショートハンドプロパティの使用 Copyright(c) Azitas Corporation All Rights Reserved. 2

3 基本仕様 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) Azitas Corporation All Rights Reserved. 3

4 基本仕様 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) Azitas Corporation All Rights Reserved. 4

5 基本仕様 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) Azitas Corporation All Rights Reserved. 5

6 基本仕様 4 品質管理デザインとの相違がないか目視によるチェックに加え以下のチェックツールを使用し HTML ファイルの文法等のエラーを解消する HTML Validator エラー数 0 としますがコンバージョンタグなど計測タグによるエラー及びサイトの構成上修正できないエラーは許容範囲とする HTML-lint 重要度 3 以下のエラーに関しては出来る範囲で修正を行うこと重要度 4 以上のエラーは必ず修正することなお文字コードがUTF-8の場合に限り以下のエラーを修正する必要はない XHTML1.0 では XML 宣言をすることが強く求められています XHTML1.0 では XML 宣言中に encoding 指定をしましょうまたコンバージョンタグなど計測タグによるエラー及びサイトの構成上修正できないエラーは許容範囲とする Copyright(c) Azitas Corporation All Rights Reserved. 6

7 (X)HTML 制作 1 文字コード UTF-8 を使用するひな型 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" 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) Azitas Corporation All Rights Reserved. 7

8 (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= > ページへのリンク </a></p> Copyright(c) Azitas Corporation All Rights Reserved. 8

9 (X)HTML 制作 3 title 要素 titleタグの内容の指定がない場合は該当するページタイトルを先頭に属する親カテゴリー名を記述し最後にサイト名称を全角パイプで区切り明記する <title> の例 <title> ページ名称大カテゴリサイト名称 </title> <title> ページ名称サイト名称 </title> img 要素全てのimgタグにalt 属性を用いて代替テキストを付加する文字要素のない写真等は〇〇の写真など適切な代替テキストを指定する title 属性は指定しない width height を指定する表記規則要素名属性名は全て半角小文字で記述する属性値はダブルクォーテーションで囲む UTF-8 以外の文字コードのとき特殊文字は実体参照で記述する Copyright(c) Azitas Corporation All Rights Reserved. 9

10 (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) Azitas Corporation All Rights Reserved. 10

11 (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) Azitas Corporation All Rights Reserved. 11

12 (X)HTML 制作 6 HTML5 によるマークアップの指針本文から参照される絵写真図表ソース本文中の図版図版のキャプション注釈細目お問い合わせ / 連絡先 figure figcaption small address コードなどに使用する本文から参照されるか独立したコンテンツとして成立するかで判断する figureでマークアップした対象のキャプションを指定するために使用する免責警告法的規制著作権ライセンス要件などを注釈細目として扱う場合に使用するそのページに関するお問い合わせ先連絡先に使用する aritcle 内で使用した場合は articleで囲われた記事のお問い合わせ先となる Copyright(c) Azitas Corporation All Rights Reserved. 12

13 (X)HTML 制作 7 その他のルール一連の文章として見出し段落箇条書きなどのどれに該当するのかを考えふさわしい要素でマークアップを行うメールアドレスはSPAM 防止のため JavaScriptで暗号化して記述する不要ファイルバックアップファイルは削除する JavaScriptはjQuery( バージョンは適宜判断 ) を使用する印刷対応は指示がある場合のみ行い印刷物に不要となるメニューなどの要素を省きメインコンテンツのみを印刷する方法を標準とするレスポンシブウェブデザインなどでメディアクエリを使う際にはCSSファイル内に記述する Copyright(c) Azitas Corporation All Rights Reserved. 13

14 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) Azitas Corporation All Rights Reserved. 14

16 CSS 制作 3 コードフォーマット 1 行につき1プロパティを記述するそれぞれのプロパティをタブインデントするプロパティ名の後半角コロン : をスペース無しに入力し半角コロンと値の間には半角スペースを1つ空ける } の前後はスペースやタブを設けない記述方法単一のセレクタを指定する場合.selector { property: value; property: value; property: value; } 複数のセレクタを指定する場合.selector01,.selector02,.selector03 { property: value; property: value; property: value; } Copyright(c) Azitas Corporation All Rights Reserved. 16

17 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) Azitas Corporation All Rights Reserved. 17

はじめに本書の目的は制作の効率化クオリティの向上各作業者間のスタイルの統一を図る目安になることで常にブラッシュアップを繰り返し現時点での最適解の共有に活用するものである目次基本仕様ファイルディレクトリ構成画像ファイル対応ブラウザ品質管理 (X)HTML 制作文字コード

はじめに本書の目的は制作の効率化クオリティの向上各作業者間のスタイルの統一を図る目安になることで常にブラッシュアップを繰り返し現時点での最適解の共有に活用するものである目次基本仕様ファイルディレクトリ構成画像ファイル対応ブラウザ品質管理 (X)HTML 制作文字コード株式会社アジタスコーディングレギュレーション改訂履歴初版 2009/10/01 一部修正 2010/12/06 対応ブラウザ修正画像ファイルの形式修正補足追記 2011/05/02 対応ブラウザ修正 2013/04/12 はじめに本書の目的は制作の効率化クオリティの向上各作業者間のスタイルの統一を図る目安になることで常にブラッシュアップを繰り返し現時点での最適解の共有に活用するものである