ガイドライン

はじめに

目的

このガイドラインは、SEO効果、アクセシビリティ、ユーザビリティ、メンテナンス性、互換性などの確保を目的としています。
WEBサイトを制作・管理していく上において、制作者の認識の差異をなくすと共に、業務の効率化をはかり、サービス・製品の品質を一定に保ちます。

メリット

品質の向上とメンテナンス性が向上します。
1. ・プロジェクトごとに名前付けや階層などを考える無駄な時間を省略できます。
2. ・複数人による作業・運営でも、(X)HTML、CSSの品質を一定水準に保つことができます。
3. ・ソースコード、スタイルシートの整備により、制作者本人以外でもスムーズなメンテナンス・追加制作が可能になります。
4. ・現場のノウハウを体系化し、社内に蓄積していくことができます。

国際的な標準へ準拠

Webサイトの国際的な標準への準拠本ガイドラインは、W3C勧告等の国際的な標準に準拠することを基本方針とします。
・WCAG(Web Content Accessibility Guideline) 2.0 日本語訳：
http://www.jsa.or.jp/stdz/instac/commitee-acc/W3C-WCAG/WCAG20/index.html
・原文：
http://www.w3.org/TR/2008/REC-WCAG20-20081211/

ページの先頭へ

基本ガイドライン

対象ブラウザ

制作時の国内ブラウザシェアを考慮します（2011年1月現在）。
・Windows XP vista seven
Microsoft InternetExplorer6 以上、
Firefox3.0 以上
Safari
opera
Google Chrome
・Macintosh OSX
Firefox3.0 以上
Safari
以上を対象とします。
ただし、制作ホームページのターゲットユーザーの年齢層によっては、対象を考慮する場合もあります。

画面サイズ

モニタ解像度は1280x1024px（XGA）以上を基本とします。
ですが、より低いモニタ解像度を考慮し、800x600px（SVGA）を対象にする場合もあります。
ただし、リキッドレイアウト（可変）で制作する場合はこの限りではありません。

サイト基本構造

html ├css/ │ ├import.css　[基本CSSファイル読み込み] │ │ ├reset.css　[各ブラウザスタイル調整定義] │ │ ├base.css　[サイト共通構成定義] │ │ ├header.css　[共通ヘッダー構成定義] │ │ ├list.css　[リスト共通構成定義] │ │ ├sidenavi.css　[共通サイドナビ定義] │ │ └footer.css　[共通フッター定義] │ │ │ ├top_index.css　[トップページ構成定義] │ ├open_index.css　[メインページ構成定義] │ ├open_sub.css　[サブページ構成定義] │ ├print.css　[ページ印刷用スタイル定義] │ └map_print.css　[アクセスマップ印刷用スタイル定義] │ ├image/ │ ├画像名+連番.拡張子 │ └navi/ │ 　 └画像名+連番.拡張子 │ ├js/ │ ├js_top.js　[トップページ環境] │ ├js_index.js　[メインページ環境] │ └js_map.js　[グーグルマップ環境] │ ├category/ │ ├index.html │ └image/ │ 　 └画像名+連番.拡張子 │ └index.html　[トップページ]

フレーム

framesetまたiframeによるフレームレイアウトは、SEO・アクセシビリティ上、デメリットがあるため原則として使用しません。

ディレクトリ命名規則

ディレクトリ名は、小文字の半角アルファベットで、英数字およびアンダーバー「 _ 」で表記します。
フォルダ先頭にナンバーを付け、URI（URL）を見ただけでサイトの構成や自分のいる位置が想像しやすいことを前提に、ページ内容に即した意味のあるキーワードを指定します。
ディレクトリナンバーは、
・メインメニュー：01～19 を3桁（奇数）ごとに命名
・サブ（診療科目等）メニュー：20～90 を5桁ごとに命名
を基本とします。
ただし、トップディレクトリより下層のディレクトリにはナンバーなしの名前を付けます。
例）45_esthetic/whitening/flow/index.html ：審美歯科/ホワイトニング/治療の流れのインデックスにいることが想像できます。
※万が一、診療科目のナンバーを使い切った場合には、関連するディレクトリの5桁間の数字を使用する。
例）21_3mix/、56_smiledenture/

◆一般的な歯科医院サイトディレクトリ名の例
- ・院長紹介： 01_doctor
- ・医院案内： 03_clinic
- ・医院設備： 05_equipment
- ・診療科目： 07_cure
- ・一般歯科： 20_general
- ・虫歯治療： 25_caries
- ・歯周病治療： 30_perio
- ・小児歯科： 35_child
- ・予防歯科： 40_prevent
- ・審美歯科： 45_esthetic
- ・矯正歯科： 50_orthodontic
- ・入れ歯・義歯： 55_denture
- ・インプラント： 60_implant
- ・歯科・口腔外科： 70_surgery
- ・医院マップ： 09_map
- ・ＬＩＮＫ集： 11_link
- ・診療メール予約： 13_appoint
- ・診療メール相談： 15_consult
- ・価格表： 17_price
- ・サイトマップ: 19_sitemap

データ容量

1.パソコンデータ容量

ひとつのページを構成する(X)HTMLファイルの容量は、ユーザ環境への配慮とSEO対策を考慮した150KB以下とします。
検索エンジンのクローラは150KB以上の(X)HTMLを正常にクロールしない可能性があります。これ以上ページが増える場合は分割を検討してください。

2.携帯サイトデータ容量

全機種対応の場合
docomo：5KB
au：9KB
SoftBank：6KB
が基本となります。
ただし、FOMA、3G携帯を対象にした場合、50KB～100KB程度までOK。

画像ファイル形式

使用可能な画像ファイルのフォーマット形式は、原則としてGIFとJPEGです。
透過PNGの使用については、未対応ブラウザへの対処など制作毎に十分に検討しましょう。

文字コード

基本はUTF-8で制作します。
Shift_JIS、EUC-JPなどは、プロジェクト要件のサーバ環境、利用する技術に応じて統一した文字コードを選定してください。

.htaccess/robots.txt

1. .htaccess

「お知らせ」「ＬＩＮＫ集」は.htaccessを設置し、ベーシック認証でアクセス制限します。

2. robots.txt

robots.txtの設置は、基本的には行いません。
隠しファイルも制作しません。

エラーページ

ファイルの削除や何らかの理由でWebページへのアクセスに失敗した場合に表示されるエラーページは、ブラウザ・サーバによって異なります。
独自のエラーページを作成してユーザを適切なコンテンツへ誘導しましょう。

FLASHコンテンツ

想定されるユーザのマシン環境にインストールされているFLASHプラグインのバージョンは、ver.8以上とします。
バージョン9以上で9割以上がプラグインのアップグレードをしなくても閲覧可能。
FLASH PLAYER普及率バージョン8以下=3.24%、バージョン9=38.33%、バージョン10=58.43%。(Jストリーム社調べ2009.9月調べ)
FLASHコンテンツを閲覧しない限り情報が得られないようなページは、基本的には制作しません。

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="580" height="300" id="test" align="middle">
  <param name="allowScriptAccess" value="sameDomain" />
  <param name="allowFullScreen" value="false" />
  <param name="movie" value="image/main.swf" />
  <param name="quality" value="high" />
  <param name="bgcolor" value="#ffffff" />
  <embed src="image/main.swf" quality="high" bgcolor="#ffffff" width="580" height="300" name="test" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer_jp" />
</object>

ページの先頭へ

XHTMLガイドライン

基本ルール

XHTML1.0 StrictTransitionalへ準拠します

・要素名、属性名には小文字を用います。
・属性値を引用符「""」で囲みます。
・開始タグ、終了タグはセットです。終了タグを省略しません。
・空要素は「 /」で閉じます。
・特殊文字を正しく使用します。 （半角スペース）など。
・XML宣言「<?xml version="1.0" encoding="UTF-8"?>」は省略します。IE6対策（互換モードで表示されるため）。
　ただし、「UTF-8」「UTF-16」で記載する必要があります。
・表示の指定はCSSで行います。
・行間を空けるための「br」要素、表示を調整するための内容の無い「div」要素などの使用は極力避けましょう。
・「space.gif」なども極力使用しないようにしましょう。
・字間を空けるためのスペースは極力半角のみ使用しましょう。

コードフォーマット

指定がない限りは、UTF-8 / CR+LF にて作成します。

書式

XHTMLの書式は、各ブロックの開始タグ・終了タグで必ず改行し、子要素ブロックをタブでインデントさせます。
内容が一行（50～60字程度）に収まる場合、開始タグの後で改行しなくても良いです（<p>,<li>タグなど）。
複数行のブロック要素の上下には1行スペースを空ける。

□（半角スペース）x2 = Tab（タブ）1個

<div id="globalnavi">
□□<ul>
□□□□<li>歯周病
□□□□□□<ul>
□□□□□□□□<li>歯周病って？</li>
□□□□□□□□<li>歯周内科治療</li>
□□□□□□</ul>
□□□□</li>
□□</ul>
</div>
/*--1行空ける--*/
<div id="main-contents">
□□<h3>歯周病</h3>
□□<ul>
□□□□<li>歯周病って何？</li>
□□</ul>
□□<p>おおおおおお<p>
</div>

ヘッダー

1.XML宣言は省略

IE6が後方互換モードになってしまうため、XML宣言は行いません。

2.DOCTYPE宣言

DOCTYPE宣言を、ファイルの先頭に記述します。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

3.要素の記述順

・DOCTYPE宣言
・xmlns属性
・meta要素
・title要素
・link要素
・script要素
・その他

<!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-Style-Type" content="text/css" />
  <meta http-equiv="Content-Script-Type" content="text/javascript" />
  <meta name="description" content="茨城県坂東市の歯医者。神田山歯科クリニック。" />
  <meta name="keywords" content="茨城県,坂東市,歯科医院,歯科,歯医者,神田山歯科クリニック" />

  <title>東京都新宿区の歯科医院 歯医者 | コムネット歯科医院 | 歯周病 インプラント 矯正歯科</title>

  <link rel="stylesheet" href="css/open_index.css" type="text/css" media="all" />
  <link rel="stylesheet" href="css/print.css" type="text/css" media="print" />
  <script type="text/javascript" src="js/js_index.js"></script>
</head>

5.meta要素

http-equiv属性
・Content-Type
・Content-Style-Type
・Content-Script-Type
name属性
・description
・keywords
を記述します。

6.title要素

・トップページ
地域名の歯医者 + 歯科医院 | 歯科医院名 | 治療内容 + その他の地域など
例）東京都新宿区の歯医者歯科医院 | コムネット歯科医院 | 歯周病インプラント矯正歯科
・カテゴリページ
カテゴリ名 | 地域名の歯医者 + 歯科医院 | 歯科医院名
例）医院案内 | 東京都新宿区の歯医者歯科医院 | コムネット歯科医院

JavaScriptについて

1.Javascriptの管理

JavaScriptは「js」フォルダ内で管理します。
ネーミングに「 -（ハイフン）」は使用しません。
・js_top.js：トップページ専用
・js_index.js：その他ページ

2.noscriptの指定

Javascriptを無効に設定しているユーザーへの対処として<noscript>を使用しJavascript実装の旨を表示します。
場合により削除可。

<noscript>
  <p>
    コムネット歯科医院では、快適にページをご覧いただくためにJavaScriptという技術を使用しています。<br />
    JavaScriptの設定がオンにされていない場合、適切な表示・操作を行えないことがありますのでご了承ください。
  </p>
</noscript>

アンカータグ<a>のtitle属性の記述について

基本的に記述せず、補足的な説明がある場合、title属性を用いて補足情報を付加します。

パンくずリスト制作時の注意点

ページの階層を示す「パンくずリスト」は、ul、ol、li等、リストでは制作せず、div、pにより並べます。
矢印は「»」や「>」などにより設定します。
これは、Google検索結果にパンくずリストを表示させるための仕様です。

<div id="breadcrumb-list">
  <p>
    <a href="index.html">コムネット歯科クリニック ＴＯＰ</a>&nbsp;&raquo;&nbsp;
    院長あいさつ
  </p>
</div>

外部リンク

外部リンクには「target="_blank"」で指定します。
サイト内のリンクは基本相対パスです。

ページの先頭へ

CSSガイドライン

CSSについて

CSSの記述については、style要素やstyle属性などでXHTML内に直接記述せず、原則としてそれぞれ外部ファイルとして指定します。
文字コードは@charset "utf-8";です。

<link rel="stylesheet" href="css/open_index.css" type="text/css" media="all" />

1.ブラウザ対応

プロパティはブラウザの対応状況とバグを理解した上で使いましょう。
未対応ブラウザのあるプロパティは、適用されなくても支障のない範囲で用います。
CSSハックは必要最低限とし、極力使わないようにします。

2.CSSの管理

CSSは「css」フォルダ内でそれぞれ個別に分けて管理し、各基本CSSは「@import」で読み込みます。
以下、@importで読み込み。
・import.css：読み込み専用スタイルシート
・reset.css：各ブラウザのデフォルトCSSを初期化
・base.css：標準スタイルシート
・list.css：リスト
・header.css：ヘッダー、グローバルナビ
・sidenavi.css：サイドナビ
・footer.css：フッター

以下、個別に読み込み。
・top_index.css：トップページ
・open_index.css：メインページ使用
・open_sub.css：サブページ使用（マップ・予約・相談など）
・print.css：印刷用スタイルシート

id、classのネーミング

ファイル内で個有の名前にはidを、共有する名前にはclassを用います。
物や人など、すでに固有に識別できるものについては、idとして用います。
id、classを無闇に増やさないよう、出来るだけ親要素のほうにネーミングをふり、CSSは子孫セレクタで対応しましょう。

<div>
  <h3 class="title">.....</h3>
  <p class="text">.....</p>
  <ul>
    <li class="cure">.....</li>
    <li class="cure">.....</li>
  </ul>
</div>

よりも、

<div id="curebox">
  <h3>.....</h3>
  <p>.....</p>
  <ul>
    <li>.....</li>
    <li>.....</li>
  </ul>
</div>

で指定できればベスト。

divブロックのネーミング

統一的に下記のセレクタ名から使用します。
長くなる場合は、単語の間にハイフン「 - 」を入れましょう。（アンダースコア「 _ 」は使用しません。）
キャメルケース「areaPage」「globalNavi」も今のところ使いません。
◆全体の囲み
#area-page
◆ヘッダー
#area-header
#logo
#tel
◆ナビゲーション類
#globalnavi
.gnavi
#sidenavi
.snavi
◆パンくずリスト
#breadcrumb-list
◆コンテンツ
#area-contents
#area-main
#area-left
#area-right
◆ボックス
.box
.subject-box
◆フラッシュ
#area-flash
◆ページトップ
#pagetop
◆フッター
#area-footer
.fnavi
#copy
◆その他
#main-img
.banner
.qr
メンテナンス・更新の効率化のため、WEBサイト全体を通して、div要素の基本的構造は統一しましょう。

<body id="home">
  <div id="area-page">
    <div id="area-header" class="clearfix">
      <div id="logo">/div>
        <ul id="globalnavi">
          <li></li>
        </ul>
      </div>
      <div id="area-contents">
        <div id="area-main"></div>
        <div id="area-left">
          <div id="sidenavi">/div>
      </div>
    </div>
  </div>
  <div id="area-footer">
    <div id="copy">/div>
  </div>
</body>

divブロック構造のイメージ図

見出し、コメントの記述

/*------------------------------/
左カラム
------------------------------*/
/*-----治療の流れボックス-----*/

セレクタ、プロパティの記述

セレクタは原則1行づつ記述します。
セレクタの記述はインデントせず、セレクタの後にスペースを1つ入れ「 { 」を記述し「 } 」で閉じます。
セレクタを複数指定する場合、末尾にカンマ「 , 」で区切り改行します。
プロパティの前にはタブ1つでインデントを挿入する。
プロパティ値の最後には必ずセミコロン「 ; 」を付けます。
□（スペース）x2 = タブ1個

セレクタ□{
□□プロパティ:□値;
□□プロパティ:□ 値;
}

div#curebox□{
□□border:□2px;

div#curebox1□,
div#curebox2□{
□□border:□2px;
}

継承を見やすく、かぶりが起こるのを防ぐために親セレクタも記述しましょう。

div#curebox div.box {
  border: 2px;
}

div#curebox div.box p {
  margin: 0;
}

プロパティの記述順

プロパティは以下の順番で記述します（あくまで目安です）。
1.clear
2.display
3.position
4.float
5.width
6.height
7.margin
8.padding
9.font-size
10.font-weight
11.line-height
12.text-align
13.vertical-align
14.color
15.text-decoration
16.border
17.background

ショートハンドの記述について

border, list-style, background は、支障がない限り、基本ショートハンドで記述します。
カラーのアルファベットは小文字で記入しましょう。
border: [タイプ] [カラー] [値];
```
border: solid #333333 1px;
```
background: [カラー] [イメージ] [繰り返し] [スクロール指定] [位置];

background: #ffffff url(......) no-repeat fixed center top;

単位の省略

値が0の場合と、line-heightの単位は省略します。

p {
  margin: 1em 0;
  line-height: 1.5;
}

ページの先頭へ

画像

代替テキストの記述

title、altタグには使用されている文章か、画像を示す文章を必ず入れます。
文字のないイメージ画像にも空（title=""、　alt=""）を挿入します。
title属性は基本的に記述せず、補足的な説明がある場合のみ情報を付加します。

サイズ指定

img要素には、「width」を必ず設定しましょう。
「height」は省略可ですが、案件ごとに全て統一しましょう。

画像の名前付け

画像ファイル名は「画像のトップ要素_名前（番号）（_位置要素）.拡張子」のように付けます。
アルファベットは全て小文字で、単語のつなぎはアンダーバー「 _ 」を使用します。
治療名など固有の名前は名詞の英語表記を付けます。
例）3mix.gif、socket_flow.gif
ローマ字英語表記は原則として禁止します。どうしても使わざる得ない場合は常識の範囲内で判断してください。
例）shinryoudai → unit、mushiba → caries
◆トップ要素
・背景： bg
・ヘッダー： head
・ロゴ： logo
・フッター： foot
・見出し： h(1,2,3,4,5)
・ボタン： btn
・写真： photo
・イメージ： img
・バナー： banner
・リードテキスト： lead
・アイコン： icon
・リストマーク： mark
・ライン： line
・グローバルメニュー： gnavi_○○○
・ナビメニュー： snavi_○○○
◆位置要素
・上要素：top
・中段要素：middle
・下要素：bottom
・右要素：right
・中央要素：center
・左要素：left
※上記にあてはまらない要素があったときなどは、必要に応じて新しい要素名を使ってファイル名を付けます。
例）「h3」サブタイトルタグ → h3_subtitle01.gif
例）「サイト共通のヘッダー背景トップ」 → bg_header_top.gif
一般歯科医院　使用画像ネーム例
◆body背景画像
bg_body.gif
◆area-header画像
bg_header.gif
logo.gif
tel.gif
gnavi.gif
gnavi_btn01.gif
◆area-contents画像
bg_contents.gif
main_img.gif
h2_title01.gif
h3_subtitle01.gif
h4_subject01.gif
lead01.gif
dr.jpg
photo_clinic01.jpg
photo_emt01.jpg
caries.gif
c1.gif
perio_flow.gif
◆area-left画像
snavi_btn01.gif
bg_snavi_top.gif
snavi_map.gif
banner01.gif
qr.gif
◆area-footer画像
bg_foot.gif
foot_logo.gif

ページの先頭へ

印刷について

ページの印刷仕様

ページはそれぞれ印刷できる仕様で制作します。
通常はブラウザの「印刷」から印刷。アクセスマップページにのみ、別途印刷ボタンを用意します。

印刷用スタイルシートの作成

印刷用スタイルシート「print.css」を作成し、「import.css」とは別に直接ページに読み込みます。
印刷専用のスタイルシートを用意することで、必要な情報のみ印刷可能となります。

1.印刷可能範囲の指定

ヘッダーの「ロゴマークと電話番号画像」の幅、もしくは、「area-main」の大きいほうの幅を目安にします。
例えば、ロゴのワイド:300px、電話番号のワイド:400pxで計700px。area-mainのワイド:680pxで指定の場合、ページ幅は700pxに設定します。
「area-page」「area-wrapper」「area-contents」など、大枠を指定している要素の幅を700pxで指定します。
必要によりfloatをはずします。

div#header-box {    /* ヘッダー要素 幅を変更 */
  width: 700px ;
}

div#area-page {    /* それぞれの要素に幅を指定 */
  width: 700px ;
}

2.印刷させない要素の指定

印刷物にナビゲーションは不必要という考えより、必要な要素以外は非表示にします。
「globalnavi（グローバルナビ）」「main-img（メイン画像）」「area-left（サイドナビ）」「area-footer（フッター）」等。

div#globalnavi {
  display: none ;
}

div#area-left {
  display: none ;
}

div#main-img {
  display: none ;
}

div#area-footer {
  display: none ;
}

印刷に必要な情報画像は背景指定しない

「ロゴマーク」「電話番号」「医院写真」「説明イラスト」など、医院を示す情報やページを把握するための画像は、すべてimg要素で指定し、背景画像として指定しないようにします。
ブラウザの「ページ設定」により背景の印刷が可能ではありますが、デフォルトでは指定されていないため多くの方に反映できません。
その他、必要画像の決定は制作者に委ねます。

ページの先頭へ

株式会社コムネット コーディングガイドライン Ver.1 2010.5

もくじ

はじめに

基本ガイドライン

XHTMLガイドライン

CSSガイドライン

画像

印刷について

はじめに

目的

メリット

国際的な標準へ準拠

基本ガイドライン

対象ブラウザ

画面サイズ

サイト基本構造

フレーム

ディレクトリ命名規則

データ容量

1.パソコンデータ容量

2.携帯サイトデータ容量

画像ファイル形式

文字コード

.htaccess/robots.txt

1. .htaccess

2. robots.txt

エラーページ

FLASHコンテンツ

XHTMLガイドライン

基本ルール

XHTML1.0 StrictTransitionalへ準拠します

コードフォーマット

書式

ヘッダー

1.XML宣言は省略

2.DOCTYPE宣言

3.要素の記述順

5.meta要素

6.title要素

JavaScriptについて

1.Javascriptの管理

2.noscriptの指定

アンカータグ<a>のtitle属性の記述について

パンくずリスト制作時の注意点

外部リンク

CSSガイドライン

CSSについて

1.ブラウザ対応

2.CSSの管理

id、classのネーミング

divブロックのネーミング

見出し、コメントの記述

セレクタ、プロパティの記述

プロパティの記述順

ショートハンドの記述について

単位の省略

画像

代替テキストの記述

サイズ指定

画像の名前付け

印刷について

ページの印刷仕様

印刷用スタイルシートの作成

1.印刷可能範囲の指定

2.印刷させない要素の指定

印刷に必要な情報画像は背景指定しない

株式会社コムネット　コーディングガイドライン　Ver.1 2010.5