メニュー

コーディングガイドライン

HTML5版 ver1.0xhtml版

本ガイドラインについて

この文書(以下ガイドライン)は、株式会社QriptがWEBサイト制作を行う際の記述ルールなどを定めたものです。
新規ページの作成や既存ページの修正・更新作業の際に、クオリティーの確保とメンテナンス性の向上を目的に作成しています。
また本ガイドラインは、新たなルールが必要な際に検討をし、随時更新を行います。

ガイドラインが定める仕様

WEBサイト仕様について

本ガイドラインではWEBサイトの基本仕様を以下の指定で制作する事と定めます。

DTD(文書型定義) HTML5
XML なし
CSS CSS2.1~
Charset UTF-8
OS Windows、Mac
対象ブラウザ

Windsows

  • Internet Explorer9~
  • Mozilla Firefox
  • Google Chrome

Mac

  • Safari
  • Mozilla Firefox
  • Google Chrome
※バージョン番号の記載がないブラウザは構築時の最新バージョンを対象とします。

HTML

本ガイドラインではDTDをHTML5と定めます。

CSS

2011年6月にCSS2.1が正式に勧告化されている為、本ガイドラインにおいてもCSS2.1を基本仕様とします。
CSS3の利用も認めますが、CSS3に非対応のブラウザーにおいても要件に見合った表示になるよう配慮を行うものとします。

Charset

HTML及びCSSのCharsetを「UTF-8」とする。理由は以下の通りです。

  • 多言語対応(日本語以外の言語環境での表示)の観点からも「UTF-8」の使用が推奨されている為。

命名規則

基本

HTMLファイル、ディレクトリ、画像ファイル及びCSS(ID及びCLASSセレクタ)の名前の付け方は以下を基本ルールとします。

  1. 半角英数字のみを使用。
  2. 機種依存文字の使用禁止。
  3. 必ずアルファベットからはじめ数字からはじめてはいけない。
  4. 全角スペース、半角スペース(Space)の使用禁止。
  5. 「\」,「/」,「*」,「:」,「?」,「<」,「>」,「|」,「$」これらの文字の使用禁止。

HTMLファイル

HTMLファイルの命名規則を以下のように定めます。

  1. 基本的にそのファイルのページタイトルを英語化し、ファイル名にする。
  2. ページタイトルに複数の単語がある際に、ファイル名が長くなりすぎてしまう場合は、単語を1~2個に絞ってファイル名とする。
    例)イベント情報 event-information.html → event.html
  3. 同じような形のページが複数個ある場合は連番を利用して命名することも可能とする。
    例)施設 facility01.html、facility02.html、facility03.html…

画像

種類と個性

画像のファイル名は、種類を区別する部分(以下、種類)と個別の名前の部分(以下、個性)に分類します。
ファイル名には初めに「種類」を次に「個性」を書きます。

その際、「種類」と「個性」の間に「 _ 」(アンダーバー)を記述し分別します。

例)閉じるボタン

btn_close.gif
種類 btn_
個性 close
※上記の例の閉じるボタン(btn_close)では、ボタン(btn_)が種類になり、閉じる(close)が個性になります。

種類の規則

「種類」は種別の判断が出来る英単語を利用します。「種類」の文字数の省略は原則禁止とします。
文字数が多くなり分かりにくくなる場合は単語で分けます。その場合は単語と単語の間に「 - 」(ハイフン)を入れます。

例)種類
ページタイトル h_
背景に利用する画像 bg_
ボタン btn_
アイコン icon_

個性の規則

「個性」も「種類」と同じくそれ自体を判断が出来る英単語を利用します。
「個性」の文字数の省略も基本的に行わないのが原則です。
文字数が多くなり分かりにくくなる場合は単語で分けます。
その場合は単語と単語の間に「 - 」(ハイフン)を入れます。

例)個性
検索 search
トピックス topics
イベント event
メインタイトル main-title
サブタイトル sub-title

数字

頻繁に使われるもの(その可能性のあるもの)には個性の後に数字(Number)を記述して対応します。

例)メニューボタン01

btn_close01.gif
種類 btn_
個性 close
数字 01

このような場合は「種類」、「個性」の後に数字(Number)を記述して対応します。
こうする事で追加や修正の時に対応がしやすくなります。
原則として数字(Number)の記述は「個性」に続けて01 から初めてください。

※だだし「種類」と「個性」が同一のものが3桁(100個)以上になる事が予想されていれば「数字」は 001 から初めてください。

CLASSセレクタとIDセレクタ

種類と個性

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セレクタ共に「種類」「個性」それぞれ文字の省略は原則禁止していました。
しかし省略形が広く一般的に認知されており、使用しても不自然ではない場合は積極的に利用します。
また、一般的に省略されることはあまりないが、冗長すぎてファイル管理が複雑になってしまう場合は以下の方法で省略してください。

  1. 機種依存文字の使用禁止。
  2. 頭文字の3~7文字(目安)までで不自然すぎない程度に省略。

省略形の例

ボタン button → btn(ボタンに関しては常にbtnで記述)
背景 background → bg (背景に関しては常にbgで記述)
紹介 introduction → intro
確認 confirmation → confirm
※上記はあくまで例外措置になります。「種類」「個性」の省略は原則禁止である事を踏まえて対応して下さい。

HTML

基本ルール

HTMLの記述は以下を基本ルールとします。

  1. HTMLタグは必ず小文字で記述する。
  2. 終了タグは必ず記述する。
  3. エンプティ要素(img ・ br ・ meta ・ linkなど)は最後を閉じない。
  4. Alt属性は必ず記述する。適切な文言がない場合はNull値とします。
  5. img要素のwidth・heightはできる限り指定する。
  6. HTMLファイル内では基本的にHTMLのみのマークアップ行い、視覚表現(装飾やアニメーション)は外部ファイル化したCSS、JavaScriptで行う。
  7. HTMLは可能な限り正しく記述する。 そのために「W3C HTML validator」などの検証ツールを利用し検証する。
※HTML5でXML記法の利用が出来ますが、本ガイドラインでは原則として通常のHTML記法を採用します。
<img />、<br />、<hr />
<img>、<br>、<hr>

DOCTYPE

本ガイドラインで定めるHTMLの仕様は以下の通りです。

  • DTD(文書型定義):HTML5
  • Charset:utf-8

その為、DOCTYPEの記述は以下のようになります。

<!DOCTYPE html>
<html lang= "ja">

HEAD

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>

title要素、meta要素(keywords、description)

ユーザビリティ、アクセシビリティ、SEOの観点から適切なものを設定します。

CSSファイルの読み込み

CSSは全て外部ファイル化し、<link>タグでCSSファイルを読み込みます。

※CSSをHTMLに直接書き込む事は原則として禁止します。

JavaScriptファイルの読み込み

JavaScriptはHEAD内には読み込まずに、</body>タグの直前に記述します。
詳しくは「JavaScript 基本ルール」をご覧ください。
ただし外部サービスのスクリプトなどを利用する場合、そのサービス独自に規程・推奨の読み込み方法がある場合はそのルールに従います。

HTML 記述ルール

インデントと改行

HTMLの記述は必ずインデントと改行を使い構造を判断しやすいように記述します。書式の例は以下の通りです。

Tab: Tab でインデント
Rtn: 改行

<nav>Rtn
Tab<ul>Rtn
TabTab<li>・・・</li>Rtn
TabTab<li>・・・</li>Rtn
TabTab<li>・・・</li>Rtn
Tab</ul>Rtn
</nav>Rtn
<section>
※インデントはスペースでは無く、Tabで行います。
※CMSなどによって、動的に生成される箇所については、この限りではありません。

コメントアウト

基本的にコメントアウトを HTMLのソースには記述しません。

CSS

基本ルール

CSSの記述は以下を基本ルールとします。

  1. CSSの定義は原則として外部CSSに記述してCLASS及びIDで呼び出す。
  2. HTMLに直接記述する事は原則として禁止する。
  3. Charsetの記述はHTMLと同じ「UTF-8」を設定する。
  4. 値が「0」なら単位を省略する。
  5. line-height に単位はつけない。
  6. 画面の装飾は基本的にCSSでのみ行い、HTMLでは行わない。

記述ルール

インデントと改行

HTMLの記述と同様にCSSの記述は必ずインデント、改行、スペースを使い構造を判断しやすいように記述します。

Tab: Tab でインデント
Rtn: 改行
s: 半角スペース

bodys{Rtn
Tabmargin:s0;Rtn
Tabpadding:s0;Rtn}Rtn
※HTML同様にインデントはスペースでは無く、Tabで行うようにしてください。

プロパティの指定順

CSSのプロパティの記述順を以下のように定めます。

1.位置関係を定義するプロパティ
  • display
  • position
  • float
など
2.ボックスモデルを定義するプロパティ
  • width
  • height
  • border
など
3.文字の体裁やフォントを定義するプロパティ
  • font
  • color
  • text-align
など
※上記3つのブロックが確立されていれば、その中でのプロパティの順番は問いません。

コメントアウト

CSSでは、以下のようなコメントアウトにより可読性を確保します。

例)CSSコメントアウト

・大見出し
/* ---------------------------------------------------------
header
----------------------------------------------------------*/
・小見出し
/* グローバルナビ */

CSSハックについて

CSSハックとは、Webブラウザ間のCSSの解釈の違いやバグを振り分けの条件とし、特定のブラウザに対しスタイルを適用、または非適用とする手法の事をいいます。
基本的に利用しないのを原則としますがブラウザのバグによりどうしても必要な場合には利用することを許可します。

CSS3について

CSS3の利用も認めますが、CSS3に非対応のブラウザーにおいても要件に見合った表示になるよう配慮を行うものとします。

JavaScript

基本ルール

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>

ディレクトリ構成

WEBサイトのディレクトリ構成

  • htdocs
    • index.htmlトップページ
    • img
      • common共通で利用する画像ファイルを格納します。
      • category階層ごとにカテゴリと同名のフォルダを作成し画像ファイルを格納します。
        ※トップページで使用するものは直下に配置します。
    • CSS
      • category.cssCSSファイルを格納します。
        カテゴリ個別のファイルはカテゴリのフォルダ名と同じ名前とします。
        共通で利用するCSSファイル、トップページで使用するCSSファイルもこのディレクトリに配置します。
    • jsJavaScriptファイルを格納します。
      カテゴリ個別のファイルはカテゴリのフォルダ名と同じ名前とします。
      共通で利用するJavaScriptファイル、トップページで使用するJavaScriptファイルもこのディレクトリに配置します。
      • toppage.js
    • categoryディレクトリに従って各HTMLファイルを格納します。
      filesフォルダにはPDFファイルやWordファイルなどを格納します。
      filesフォルダはPDFファイルやWordファイルを利用するHTMLと同階層に作成します。
      ※「category」「sub-category」はディレクトリ構造に従って適当な形で作成します。
      • files
      • sub-category

更新履歴

2013.01.16
ガイドライン公開
pagetop