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

Size: px

Start display at page:

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

ふみなあいしま
7 years ago
Views:

1 株式会社アジタスコーディングレギュレーション改訂履歴初版 2009/10/01 一部修正 2010/12/06 対応ブラウザ修正画像ファイルの形式修正補足追記 2011/05/02 対応ブラウザ修正 2013/04/12

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

title 要素 img 要素表記規則その他のルール CSS 制作共通 CSS 読み込み方法 ID 名 CLASS 名の命名規則 ID 名サンプル CLASS 名サンプル

3 基本仕様 1 ファイルディレクトリ構成ファイル命名規則ディレクトリ名ファイル名に空白 ( スペース ) は使用しないディレクトリ名ファイル名は半角の小文字で最大 31 文字単語が2つ以上続く場合はアンダースコア _ で繋げる違う意味の単語を区切る場合はハイフン - を使用するディレクトリ名ファイル名は短く分かりやすい名前にする連番を使用する場合は拡張子の直前に付け連番の直前にはアンダースコア _ ハイフン - を付けない Copyright(c) Azitas Corporation All Rights Reserved. 3

を使用するディレクトリ名ファイル名は短く分かりやすい名前にする連番を使用する場合は拡張子の直前に付け連番の直前にはアンダースコア _

4 基本仕様 2 画像ファイル画像ファイル形式画像の種類に応じて適切なファイル形式を選択する JPEG 写真等色数の多い画像は JPEG を使用する圧縮率 :Fireworks 90% Photoshop 80% PNG 写真以外の画像は基本的には PNG 8 を使用する半透明の画像は Fireworks の場合は PNG 32 Photoshop の場合は PNG 24 で書き出す GIF アイコン等の小さい画像やアニメーションは GIF を使用する画像ファイル名例基本的な命名規則は 2 頁のファイル命名規則と同様画像ファイル名は場所名 + 用途種類 + 連番 +. 拡張子とする画像ファイル名例出し h2_img01.png / h2_img02.png ボタン btn01.png / btn02.png アイコン icon01.gif / icon02.gif グローバルナビ ---- gnavi01.png / gnavi02.png 背景 header_bg.png / footer_bg.png Copyright(c) Azitas Corporation All Rights Reserved. 4

拡張子とする画像ファイル名例出し ------------- h2_img01.png / h2_img02.png ボタン ------------- btn01.png / btn02.png アイコン ----------- icon01.gif / icon02.

5 基本仕様 3 対応ブラウザ特に指定のない限り以下のブラウザをチェック対象として制作する Windows Internet Explorer 8 / 9 Firefox 最新版 Google Chrome 最新版 Mac Safari 最新版 Firefox 最新版 Google Chrome 最新版印刷対応について ( 別途料 ) レイアウトやブラウザの組み合わせによって対応が難しい場合があるができる限りブラウザで表示されている状態に近づける Copyright(c) Azitas Corporation All Rights Reserved. 5

Chrome 最新版印刷対応について ( 別途料 ) レイアウトやブラウザの組み合わせによって対応が難しい場合があるが

6 基本仕様 4 品質管理デザインとの相違がないか目視によるチェックに加えて以下のチェックツールを使用し HTML ファイルの文法等のエラーをできる限りクリアする Web Developer(Firefox 拡張 ) ALT TITLE テキストのチェックをう HTML Validator(Firefox 拡張 ) W3CのTidyエンジンを積んだHTML 構文検証ツール該当のページを開き [ ソースを表示 ] し使用する HTML-lint HTML-lint で90 点以上を目指すただしリンク先が未定の箇所に対して # を指定していることによるエラーや同名のテキストリンクでリンク先が違うことによるエラーなど回避できないエラーは無視する Copyright(c) Azitas Corporation All Rights Reserved. 6

org/ja/firefox/addon/60 ALT TITLE テキストのチェックをう HTML Validator(Firefox 拡張 ) org/ja/firefox/addon/249 W3CのTidyエンジンを積んだHTML

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 http-equiv="x-ua-compatible" content="ie=emulateie7" /> <meta name="description" content="" /> <meta name="keywords" content="" /> <title></title> <link href="css/common/layout.css" rel="stylesheet" type="text/css" /> <link href="css/common/general.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

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

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

html > 同ディレクトリのindexファイルへのリンク </a></p> index.htmlを省略するかどうかを選択していただき対応する <p><a href="../page_sample.

9 (X)HTML 制作 3 title 要素 titleタグの内容の指定がない場合は該当するページタイトルを先頭に属する親カテゴリー名を記述し最後にサイト名称を全角パイプで区切り明記する <title> の例 <title> ページ名称大カテゴリサイト名称 </title> <title> ページ名称サイト名称 </title> img 要素全てのimgタグにalt 属性を用いて代替テキストを付加する文字要素のない写真等は〇〇の写真など適切な代替テキストを指定する title 属性は指定しない width height を指定する表記規則要素名属性名は全て半角小文字で記述する属性値はダブルクォーテーションで囲む特殊文字は実体参照で記述しローマ数字の場合はIとVの組み合わせで表現するメールアドレスはSPAM 防止のため 16 進数でエンコードして記述する英数字は半角で統一するナカグロは全角で統一するコロン : は全角で統一する丸括弧 () は全角で統一する Copyright(c) Azitas Corporation All Rights Reserved. 9

属性は指定しない width height を指定する表記規則要素名属性名は全て半角小文字で記述する属性値はダブルクォーテーションで囲む特殊文字は実体参照で記述しローマ数字の場合はIとVの組み合わせで表現するメールアドレスはSPAM 防止のため

10 (X)HTML 制作 4 その他のルール一連の文章として出し段落箇条書きなどのどれに該当するのかを考えふさわしい要素でマークアップをうようがけるメールアドレスはSPAM 防止のため 16 進数でエンコードして記述する不要ファイルバックアップファイルは削除もしくは別フォルダに移動するように努める Copyright(c) Azitas Corporation All Rights Reserved. 10

進数でエンコードして記述する不要ファイルバックアップファイルは削除もしくは別フォルダに移動するように努める

11 CSS 制作 1 共通 CSS layout.css 共通のリセット用 css とテンプレート部分のスタイルを記述 general.css 共通で使用する汎用的なスタイルを記述読み込み方法各 HTML ファイルから上記共通 CSS と各ページ固有の css を読み込む CSS 読み込み法の例 <link href="css/common/layout.css" rel="stylesheet" type="text/css" /> <link href="css/common/general.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= fontred class= notice Copyright(c) Azitas Corporation All Rights Reserved. 11

css" rel="stylesheet" type="text/css" /> <link href="css/common/general.css" rel="stylesheet" type="text/css" /> <link href="css/index.

newsbox photobox bannerlist mailform Copyright(c)

13 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. 13

selector { property: value; property: value; property: value; } 複数のセレクタを指定する場合.selector01,.

14 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. 14

スライド 1

スライド 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