この文書（以下ガイドライン）は、株式会社QriptがWEBサイト制作を行う際の記述ルールなどを定めたものです。
新規ページの作成や既存ページの修正・更新作業の際に、クオリティーの確保とメンテナンス性の向上を目的に作成しています。
また本ガイドラインは、新たなルールが必要な際に検討をし、随時更新を行います。
本ガイドラインではWEBサイトの基本仕様を以下の指定で制作する事と定めます。
| DTD（文書型定義） | HTML5 |
|---|---|
| XML | なし |
| CSS | CSS2.1～ |
| Charset | UTF-8 |
| OS | Windows、Mac |
| 対象ブラウザ |
Windsows
Mac
|
本ガイドラインではDTDをHTML5と定めます。
2011年6月にCSS2.1が正式に勧告化されている為、本ガイドラインにおいてもCSS2.1を基本仕様とします。
CSS3の利用も認めますが、CSS3に非対応のブラウザーにおいても要件に見合った表示になるよう配慮を行うものとします。
HTML及びCSSのCharsetを「UTF-8」とする。理由は以下の通りです。
HTMLファイル、ディレクトリ、画像ファイル及びCSS（ID及びCLASSセレクタ）の名前の付け方は以下を基本ルールとします。
HTMLファイルの命名規則を以下のように定めます。
画像のファイル名は、種類を区別する部分（以下、種類）と個別の名前の部分（以下、個性）に分類します。
ファイル名には初めに「種類」を次に「個性」を書きます。
その際、「種類」と「個性」の間に「 _ 」（アンダーバー）を記述し分別します。
例）閉じるボタン
| 種類 | btn_ |
|---|---|
| 個性 | close |
「種類」は種別の判断が出来る英単語を利用します。「種類」の文字数の省略は原則禁止とします。
文字数が多くなり分かりにくくなる場合は単語で分けます。その場合は単語と単語の間に「 - 」（ハイフン）を入れます。
| ページタイトル | h_ |
|---|---|
| 背景に利用する画像 | bg_ |
| ボタン | btn_ |
| アイコン | icon_ |
「個性」も「種類」と同じくそれ自体を判断が出来る英単語を利用します。
「個性」の文字数の省略も基本的に行わないのが原則です。
文字数が多くなり分かりにくくなる場合は単語で分けます。
その場合は単語と単語の間に「 - 」（ハイフン）を入れます。
| 検索 | search |
|---|---|
| トピックス | topics |
| イベント | event |
| メインタイトル | main-title |
| サブタイトル | sub-title |
頻繁に使われるもの（その可能性のあるもの）には個性の後に数字（Number）を記述して対応します。
例）メニューボタン01
| 種類 | btn_ |
|---|---|
| 個性 | close |
| 数字 | 01 |
このような場合は「種類」、「個性」の後に数字（Number）を記述して対応します。
こうする事で追加や修正の時に対応がしやすくなります。
原則として数字（Number）の記述は「個性」に続けて01 から初めてください。
CLASSセレクタとIDセレクタの名前についても画像名と同様に、基本的には種類を区別する部分（以下、種類）と個別の名前の部分（以下、個性）に分類し、セレクタ名の初めには「種類」を、次に「個性」と続きます。
ただし、「種類」「個性」どちらかで判別が十分可能となる場合は、もう一方を省略することもできます。
また、命名にはそれ自体を判別出来る英単語を利用します。文字数が多くなり分かりにくくなる場合は単語で分けます。その場合は単語と単語の間に「 - 」（ハイフン）を入れます。
例）CLASSセレクタ .img-box
.img-box {
float: left;
position: relative;
width: 400px;
}
CLASS セレクタとID セレクタの名前についても、頻繁に使われるもの（その可能性のあるもの）には個性の後に数字（Number）を記述して対応します。
例）CLASSセレクタ .img-box01
. img-box01 {
float: left;
position: relative;
width: 400px;
}
画像と 同様に数字（Number）の記述は「個性」に続けて01から初めてください。
※だだし「種類」と「個性」が同一のものが3桁（100個）以上になる事が予想されていれば「数字」は 001 から初めてください。画像ファイル、CLASSセレクタとIDセレクタ共に「種類」「個性」それぞれ文字の省略は原則禁止していました。
しかし省略形が広く一般的に認知されており、使用しても不自然ではない場合は積極的に利用します。
また、一般的に省略されることはあまりないが、冗長すぎてファイル管理が複雑になってしまう場合は以下の方法で省略してください。
| ボタン | button → btn（ボタンに関しては常にbtnで記述） |
|---|---|
| 背景 | background → bg （背景に関しては常にbgで記述） |
| 紹介 | introduction → intro |
| 確認 | confirmation → confirm |
HTMLの記述は以下を基本ルールとします。
| 誤 | <img />、<br />、<hr /> |
|---|---|
| 正 | <img>、<br>、<hr> |
本ガイドラインで定めるHTMLの仕様は以下の通りです。
その為、DOCTYPEの記述は以下のようになります。
<!DOCTYPE html> <html lang= "ja">
HEAD内の記述は以下のように設定します。
<headl> <meta charset="UTF-8"> <title>タイトル</title> <meta name="keywords" content="keywords"> <meta name="description" content="description"> <link rel="stylesheet" type="text/css" href="../css/xxx.css"> </headl>
ユーザビリティ、アクセシビリティ、SEOの観点から適切なものを設定します。
CSSは全て外部ファイル化し、<link>タグでCSSファイルを読み込みます。
※CSSをHTMLに直接書き込む事は原則として禁止します。JavaScriptはHEAD内には読み込まずに、</body>タグの直前に記述します。
詳しくは「JavaScript 基本ルール」をご覧ください。
ただし外部サービスのスクリプトなどを利用する場合、そのサービス独自に規程・推奨の読み込み方法がある場合はそのルールに従います。
HTMLの記述は必ずインデントと改行を使い構造を判断しやすいように記述します。書式の例は以下の通りです。
基本的にコメントアウトを HTMLのソースには記述しません。
CSSの記述は以下を基本ルールとします。
HTMLの記述と同様にCSSの記述は必ずインデント、改行、スペースを使い構造を判断しやすいように記述します。
CSSのプロパティの記述順を以下のように定めます。
CSSでは、以下のようなコメントアウトにより可読性を確保します。
例）CSSコメントアウト
CSSハックとは、Webブラウザ間のCSSの解釈の違いやバグを振り分けの条件とし、特定のブラウザに対しスタイルを適用、または非適用とする手法の事をいいます。
基本的に利用しないのを原則としますがブラウザのバグによりどうしても必要な場合には利用することを許可します。
CSS3の利用も認めますが、CSS3に非対応のブラウザーにおいても要件に見合った表示になるよう配慮を行うものとします。
JavaScriptは動的な表現が必要な際と、外部APIなどを利用した際に使用します。
JavaScriptはできる限り外部ファイル化し、ウェブサイトパフォーマンスの観点からHEAD内では読み込まずに</body>タグの直前で読み込ませるようにします。
ただし、 外部サービスなどの指定されたJavaScriptを利用する際に、読み込みの方法に指定がある場合はそれに従います。
また、そのページでのみ利用するJavaScriptの場合は、HTMLファイルに直接書き込みます。
例）JavaScriptの読み込み
<script type="text/javascript" src="/common/js/jquery.js"></script> <script type="text/javascript" src="/common/js/rollover.js"></script> </body> </html>
JavaScriptを利用する場合は、ユーザビリティ・アクセシビリティに配慮し、JavaScriptの利用できない環境下でも伝わる情報にあまり差が出ないように構築します。
また、JavaScriptの利用できない環境では実装できない機能の場合は、<noscript>タグを利用するなどして代替テキスト（コンテンツ）を用意します。
例）<noscript>タグ
<div id="btn_language"> <!–– 本来であればここにJavaScriptによってコンテンツが導入されます。 --> <noscript><p>JavaScriptの設定を有効にしてください。</p></noscript> </div>