1.1. 閲覧環境
SEOのガイドラインに関しては、こちらを御覧ください。
1.1.1. 出力メディア
- PCスクリーンを対象とする。携帯電話などのメディアに関しては都度別途。
- 印刷対応にする場合は別途印刷用のCSSを用意する。
1.1.2. ディスプレイ
- 1024×768pxのディスプレイを最小対象とする。
- コンテンツ幅は800～1000pxを基本とする。
※閲覧環境のトレンドに合わせ、Yahoo!Japanを参照（ブラウザにより若干差異有）とし、横サイズは900 ～1000px、縦500pxまでに重要コンテンツを収めることを推奨する。
1.1.3. 対象ブラウザ
- Google Chrome, Mozilla Firefox, Safari, Internet Explorerの各最新版
制作時点での日本国内ブラウザシェアを考慮するものとする。 [参考: StatCounter]
1.2. 基本コーディングルール
1.2.1. 文字コード
原則 UTF-8とする。CSSやJavascriptもHTMLに準拠する。
［理由］CMS等スクリプト要件にあわせるため。案件に応じShift-JISやEUC-JPに。
1.2.2. 改行とインデント
原則 CR+LF（Windows）とする。
インデントは『tab』を使用し、全角・半角スペースは使用しない。
ソースの改行は見易さ管理のため適宜行う。※場合による
2.1. 基本ガイドライン
2.1.1. DOCTYPE(文書型)
- 原則 XHTML1.0 transitional を採用
［理由］「a要素でのtarget属性を使用」、「font要素の使用」、「iframe」が｛strict｝では認められていないため。
2.1.2. XML宣言に関して
- XML宣言はつけない。
［理由］IE6.0とOpera7.0を後方互換モードに変えてしまうため。
2.1.3. マークアップ全般
- 文書内容に適したマークアップを行う。
- W3Cが勧告するXHTML1.0の仕様書に準拠したマークアップを行う。
2.1.4. id属性、class属性に関して
- 全頁に共通して記述されるものには『id属性』 それ以外は原則『class属性』を使う。
- id属性とclass属性は同一の要素に関して設定可能であることを考慮する
- class属性は同一の要素内に複数設定可能であることを考慮する。
2.2. 書式に関するルール
- 原則以下のとおりの書式で統一するが案件や場合により適宜対応する。
- インデントによる階層表示は行わず、左詰めとする。
- スペーサーやは極力使用せずCSSで間隔余白を設定する。
- コメントは可能な限りソース内に分かりやすく記述する。適宜幅なども記載する。
2.3. ＜head要素内＞に関する共通ルール
2.3.1. ＜meta http-equiv=” ”＞ title要素の前に記述。
- 『Content-Type』『Content-Language』『Content-Style-Type』『Content-Script-Type』
2.3.2. ＜title＞タグ （ページのタイトル）
- SEOを意識して各ページ以下のように記述する。※全角25字以内が理想。
- 【トップページ】 提供する主要サービスワード｜法人（サイト）名｜地域など
- 【第二階層】 製品情報｜提供する主要サービスワード｜法人（サイト）名｜地域など
- 【第三階層】 製品情報｜製品名｜提供する主要サービスワード｜法人（サイト）名｜地域など
2.3.3. ＜meta name=”description”＞ (ページの概要文)
- SEOを意識した、ページの内容に即した簡単な説明文。
- 全角100字目安。2～3のキーワードを1回以上含むようにする。
- また、各ページごと則した説明文に。（全ページ共通にしない）
2.3.4. ＜meta name=”keyword”＞ (ページのキーワード)
- SEOを意識した、ページの内容に即したキーワード。2～7個を『,』区切りで。
- また、各ページごと則したキーワードに。（全ページ共通にしない）
2.3.5. link要素やscript要素
- ＜head＞要素内の一番最後に記述する。
2.4. ＜body要素内＞に関する共通ルール/主なタグ
2.4.1. ＜body＞要素
- 最も大きくコンテンツを内包する要素であるため、bodyにidやclassを振って、ページ毎にスタイルを切り替える。この手法を『CSSシグネイチャ』という。
このため初期テンプレートの段階で下記のように記述し、任意の属性名を割当てることにする。複数のページで共通のレイアウトやスタイルを指定したい場合に便利。
2.4.2. 見出し要素 (h1~h6)
- h1から順に出現させること。順番をとばしはSEOの観点からページ最上部にリード文として出現させることを基本とする。
2.4.3.
要素 ブロック要素を包括する要素（ブロックレベル要素）
- レイアウト上もっとも重宝する要素であるが、多用を避け、入れ子構造などが煩雑にならないようにする。
- divが多くなるとソースの概要が把握しづらくなるため適宜コメントや改行を挿入する。
2.4.4. ![]()
要素 画像（インライン要素）
- 必ずサイズ属性（width、heights）を指定する。
- ［理由］ページ読み込みを早くするため
- 必ず『alt属性』にて代替テキストを記述する。※意味の無い画像は『alt=””』にする。
2.4.5.
要素 段落（ブロックレベル要素）
- 主に本文に使用する。頻出タグなので『class属性』を使うなど子孫セレクタをうまく利用してレイアウトする。
- 大きなノッポの古時計
2.4.6.
要素 表組み（ブロックレベル要素）
- 汎用性が高いが、サイズおよび寄せ（align）が変動する場合が多いタグのため、CSSでの管理を考え、各々に『class属性』をつけるようにする。
2.4.7.
- 、
- 要素 リスト（ブロックレベル要素）
- サイト内で共通するものに関しては各々に『id属性』をつけるが、場合により子孫セレクタとして上位の
の『id属性』で管理する。
- 汎用性が高いが、サイズおよび寄せ（align）が変動する場合が多いタグのため、CSSでの管理を考え、各々に『class属性』をつけるようにする。
2.4.8 .要素 アンカー（インライン要素）
- サイト内リンクに関しては特に指定なし。サイト外へのリンクは（target属性を_blancにし別タブ・窓で開く）指定をする。
- ページ内アンカーリンクは『id属性』と『name属性』をつける。
- 『a:hover と a:active』の擬似クラスの設定でマウスオンの指定を行う。
現在広く利用・ブラウザサポートされているCSS（Cascading Style Sheets、カスケーディングスタイルシート）のバージョン「CSS2.1」を採用します。
3.1. 基本ガイドライン
3.1.1. CSSの初期化
- リセット用のCSSを用意し、マージンなどの設定を初期化する。（別記）
- 基本的にコーディングの際に変更しないものとし、編集権限は弊社ディレクターのみにあるものとし編集した際には更新したことを記述する。
3.1.2. 書式
- 一行目に必ず『@charset』の記述をする。HTMLにあわせ基本はutf-8にする。
- インデントなどはDreamweaverでCSSタブより記述したものに準ずる。
- 適用対象ごとに後の管理を考え、区別しやすいようにコメントで区切る。
3.1.3. 記述の場所
- 基本的に外部CSSに記述するものとするが、部分的な文字装飾は直接styleで指定する。
- その際、メンテナンス性を損なわないようにする。
3.1.4. 子孫セレクタの使用
- idやclassを直接使う場合は限定し、子孫セレクタを積極的に使用する。
3.1.5. 子孫セレクタの書き方
- 子孫セレクタで示すツリー構造は不必要な表現（セレクタ）を省く。
- CSSシグネイチャを使用する場合はbody要素の『id,class属性』→必要な上位セレクタ→対象のタグの順で書く。
3.1.6. id/class名の規則
- idやclass名はアルファベット小文字からはじめ、２語以上続く場合は２語目の頭文字を大文字にする。
例） 『searchBox』『headerLogo』『footerLink』など - 類似した識別名の場合は連番をふる。この際番号は２桁にする
例） 『arrowLink01』『leadText03』など
3.1.7. フォントに関して
- 特に指定が無ければ以下のようにする
“メイリオ”, “Meiryo”, “ヒラギノ角ゴ Pro W3″, “Hiragino Kaku Gothic Pro”, Osaka, “ＭＳ Ｐゴシック”, “MS P Gothic”, Arial, Helvetica, Verdana, sans-serif - 文字の大きさを可変にするセレクタをつける場合は『％』でサイズ指定をする。
それ以外はbody要素に11～16pxを指定し、要素ごとにCSSで『px指定』する。