コーディングの基本的なガイドラインです。

基本指針・概要

対応ブラウザ

OSブラウザ
WindowsInternetExplorer 7 以上
Firefox 最新バージョン
Safari 最新バージョン
Opera 最新バージョン
Google Chrome 最新バージョン
Mac OSSafari 最新バージョン
Firefox 最新バージョン

※InternetExplorer 6の対応は原則行わず、アップデート推奨メッセージを出す

XHTMLガイドライン

DOCTYPE宣言

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

文字コードセット

「UTF-8 / LF」を基本とする。

head要素

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja" dir="ltr">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="content-style-type" content="text/css; charset=UTF-8" />
<meta http-equiv="content-script-type" content="text/javascript" />
<title>（そのページのタイトル）</title>
<meta name="keywords" content="（そのページのキーワード）" />
<meta name="description" content="（そのページの説明文）" />
<meta name="copyright" content="Copyright &copy; （コピーライト） All Rights Reserved." />
<meta name="robots" content="noydir,noodp" />

<!-- ▼iPhone対応 -->
<meta name="viewport" content="width=1000" />
<meta name="format-detection" content="telephone=no" />

<!-- ▼Facebook対応 -->
<meta property="og:title" content="その記事のタイトル" />
<meta property="og:type" content="website" />
<meta property="og:url" content="その記事のURL" />
<meta property="og:image" content="サムネイル画像のパス" />
<meta property="og:site_name" content="サイト名" />
<meta property="fb:app_id" content="FacebookユーザID" />
<meta property="og:description" content="ページの説明文" />

<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
<link rel="stylesheet" type="text/css" href="css/import.css" media="screen,print" />
<script type="text/javascript" src="js/main.js"></script>
</head>

JavaScript関連

Javascriptは文書の後ろに記述。（</body>の直前くらい）
jQueryの読み込みにはGoogleのCDNサービスを利用。

フォールバックを行い、CDNサービスからコンテンツを読み込めなかった場合でも自サーバのコンテンツを読み込むことができるようにする。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="jquery-1.7.2.min.js"><\/script>')</script>

title要素

<title>サイト名</title>
<title>第二階層タイトル | サイト名</title>
<title>第三階層タイトル | 第二階層タイトル | サイト名</title>

CSSガイドライン

プロパティの順序

selecter {
生成 内容, 自動番号付け及びリスト (Generated content, Automatic numbering, and Lists)
利用者インターフェイス (User Interface)
ビジュアルフォーマットモデル (Visual formatting model)
    display
    position
    top
    right
    bottom
    left
    z-index
    float
    clear
    direction
    unicode-bidi
    min-width
    width
    max-width
    min-height
    height
    max-height
    line-height
    vertical-align
ビジュアルエフェクト (Visual effects)
ボックスモデル (Box model)
    margin
    padding
    border
    background
表 (Tables)
カラー (Colors)
フォント (Fonts)
    font
    font-family
    font-style
    font-variant
    font-weight
    font-stretch
    font-size
    font-size-adjust
テキスト (Text)
聴覚スタイルシート (Aural style sheets)
}

要素のid名とclass名について

要素名id・class名
ページ全体container, #wrapper
ヘッダー#header
グローバルナビゲーション#global_nav
ローカルナビゲーション#local_nav
サイドバー#sidebar
階層構造を示すパンくずリスト#topicpath
主要コンテンツ#contents
contents内の主要な要素#contents_main
contents内の副次的な要素#contents_sub
各要素の名前.要素名_area, .要素名_box
必ずareaの中にboxを作る。boxのみの要素は作らない
各要素内のボックス.要素名_area_inner, .要素名_box_inner
フッター.footer
コピーライト.copyright
メイン画像やFlash#visual

書式

パーツひとまとまり毎に大見出し・小見出しをつける。
CSS内のはじめに目次を記述する。

/* ----------------------------------------

    Base
    Header
    Globalnavi
    Footer

---------------------------------------- */

/* ===========================================================================

    Base

=========================================================================== */

/* Header
-------------------------------------------------- */
#header {
    width: 200px;
    height: 25px;
}

命名規則

英単語統一する表記
backgroundbg
bannerbnr
buttonbtn
iconico
imageimg
sourcesrc
texttxt
titlettl
navigationnav