HTML/XHTMLマークアップ・CSSコーディングガイドライン
HTML/XHTMLマークアップ・CSSコーディングサービス - ciqlie（シクリエ）では、コーディングガイドラインに基づいたHTML/XHTMLマークアップ・CSSコーディングを行います。このページではコーディングガイドラインの一部を掲載しております。
案件によってはガイドラインと一部異なる設計・実装を行う可能性がございますのであらかじめご了承ください。
ディレクトリ構成
html
├common/
│ ├css/
│ │ ├import.css [各CSSファイル読み込み]
│ │ ├common.css [各ブラウザスタイル調整定義]
│ │ ├structure.css [サイト構造定義]
│ │ ├editorial.css [サイト構成定義]
│ │ ├component.css [サイト共通パーツ定義]
│ │ └editorial/
│ │ └category-name.css [カテゴリ別構成定義]
│ └img/
│ │ ├接頭辞_連番.拡張子
│ │ └category-name/
│ │ └接頭辞_連番.拡張子
│ └js/
│ └common.js
├category-name/
│ └index.html
└index.html [トップページ]命名規則
画像ファイル
画像ファイル名は接頭辞_連番.拡張子とします。
- ロゴ
- logo_01.xxx
- 訴求（メインビジュアルなど）
- visual_01.xxx
- 装飾（背景画像など）
- texture_01.xxx
- 見出し
- heading_01.xxx
- テキスト
- text_01.xxx
- ナビゲーション
-
- グローバルナビゲーション
- global-nav_01.xxx
- ローカルナビゲーション
- local-nav_01.xxx
- ガイドナビゲーション
- guide-nav_01.xxx
- コンテンツナビゲーション
- content-nav_01.xxx
- アイコン
- icon_01.xxx
- ボタン
- button_01.xxx
- バナー
- banner_01.xxx
- 写真
- pic_01.xxx
- その他
- img_01.xxx
ID・Class属性
- ヘッダーエリア
- #header-area
- ヘッダー
- #header
- ナビゲーション
-
- グローバルナビゲーション
- #global-nav
- ローカルナビゲーション
- .local-nav
- ガイドナビゲーション
- .guide-nav
- コンテンツナビゲーション
- .content-nav
- メインビジュアル
- #main-visual
- コンテント
- #content
- メインコンテント
- #main-content
- サブコンテント
- #sub-content
- エクストラコンテント
- #extra-content
- プライマリ
- .primary
- セカンダリ
- .secondary
- エクストラ
- .extra
- フッターエリア
- #footer-area
- フッター
- #footer
HTMLマークアップ
XML宣言・文書型（DOCTYPE）
制作要件に含まれていない場合はXML宣言は省略可とします。
XHTML 1.0 Strictを基本とし、要件によってXHTML 1.0 Transitional、HTML 4.01 Strict、HTML 4.01 Transitionalを採用します。
head要素の記述
meta要素
- http-equiv属性
- Content-Type
- Content-Style-Type
- Content-Script-Type
- name属性
- description
- keywords
title要素
- トップページ
- Description - Site Name
- カテゴリトップページ
- Category Name | Description - Site Name
- 個別ページ
- Page Name - Category Name | Description - Site Name
文字数が60文字を超える場合は、Page Name(Category Name) | Site Nameとします。
link要素
- rel属性
- stylesheet
- index contents
- chapter
- rev属性
- made
script要素
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="description" />
<meta name="keywords" content="keywords,keywords" />
<title>ページタイトル | ディスクリプション - サイトタイトル</title>
<link rel="stylesheet" type="text/css" href="common/css/import.css" media="screen,tv,print" />
<link rel="alternate" type="application/rss+xml" title="RSS" href="index.xml" />
<link rel="index contents" href="/" title="ホーム" />
<link rel="chapter" href="category-name.html" title="タイトル" />
<link rel="chapter" href="category-name.html" title="タイトル" />
<link rel="chapter" href="category-name.html" title="タイトル" />
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
<link rev="made" href="mailto:contact@enoq.jp" />
<script type="text/javascript" src="common/js/common.js"></script>見出し
hn要素はh1からh4まで順番に使用し、h5,h6の使用は必要最低限に留めます。
1ページ内にh1は2つまでとします（サイトタイトル、コンテンツタイトル）
ナビゲーション
各ナビゲーションはul要素でマークアップします。
パンくずリスト
パンくずリストはdl要素とul要素でマークアップします。
<dl id="topic-path">
<dt>このページの位置情報</dt>
<dd>
<ul>
<li><a href="/" title="このサイトのトップページ">エノーク</a>
<ul>
<li><a href="../" title="第2階層カテゴリ">ガイドライン</a>
<ul>
<li><a href="./" title="このページのタイトル">HTML/XHTMLマークアップ・CSSコーディングガイドライン</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</dd>
</dl>コメントの記述
- 対象となる要素名を含めて<!-- /div#** -->と記述します。
- 基本的な使用目的はサイト構造を定義するディビジョンの終了時とします。
- 記述位置は終了タグ（閉じタグ）の一行前に記述します。
<div class="section">
<h2>見出し</h2>
<p>テキストテキスト</p>
<!-- /div.section -->
</div>インデント
インデントはタブを使用し（半角スペース4つ分）要素の入れ子に対してはインデントを使用しません。
<ul><ol><dl>などは除きます。
<body>
<div>
<h1>見出し</h1>
<ul>
<li>リスト</li>
<li>リスト</li>
</ul>
</div>
</body>改行
- ブロック要素の終了タグ（閉じタグ）の後で改行します。
- インライン要素の後では改行しません。br要素を除きます。
CSSコーディング
文字コード
制作要件に含まれていない場合は文字コードは@charset "utf-8";とします。
コメントの記述
対象となる要素名などを含めて以下のように記述します。
/*--------------------------------------
div#header
--------------------------------------*/
/* Hypertext
--------------------------------------*/
selecter {
property:value;/* for IE */
}インデント
インデントはタブを使用します（半角スペース4つ分）
セレクタ
セレクタの記述はインデントを使用せず、セレクタの後にスペースを1つ入れ{を記述します。
複数セレクタの指定
セレクタを複数指定する場合、末尾に,で区切り改行します。
最後のセレクタの後にスペースを1つ入れ{を記述します。
ブレースの記述
{}の後で改行します。
プロパティの記述
- プロパティ記述の前にインデントを1回入れ、プロパティの後には:を記述します。:の前後にはスペースを入れません。
- 値の後には;を記述します。スペースは入れません。
selector□{
□□□□property:value;
}
Selector01,
Selector02 {
property:value;
}単位の省略
- 値が0の場合
- line-height
p {
margin:0 0 1em 0;
line-height:1.5;
}CSSファイルの分割
- import.css
- 各CSSファイルの読み込み
- common.css
- 各ブラウザスタイルのリセットならびに再定義
- structure.css
- サイト構造の定義
- editorial.css
- サイト構成の定義
- component.css
- サイト共通パーツの定義
- editorial/category-name.css
- カテゴリ別構成の定義
アクセシビリティ
マークアップ
グローバルナビゲーション・ガイドナビゲーション・パンくずリスト・検索ボックスをマークアップする時はスクリーンリーダー向けの見出しを含めます。
見出しジャンプ機能を持つスクリーンリーダー向けとしてh要素で見出しをマークアップしますが、パンくずリスト・検索ボックスは他ナビゲーションより重要度は低いと考え、それぞれ<dt><legend>でマークアップします。
<h2>このサイトのカテゴリ</h2>
<ul id="global-nav">
<li>ホーム</li>
<li>会社概要</li>
<li>事業内容</li>
<li>よくある質問</li>
<li>お問い合わせ</li>
</ul>
<h2>このサイトのガイド</h2>
<ul class="guide-nav">
<li>サイトマップ</li>
<li>お問い合わせ</li>
</ul>
<dl id="topic-path">
<dt>このページの位置情報</dt>
<dd>
<ul>
<li><a href="/" title="このサイトのトップページ">エノーク</a>
<ul>
<li><a href="../" title="第2階層カテゴリ">ガイドライン</a>
<ul>
<li><a href="./" title="このページのタイトル">HTML/XHTMLマークアップ・CSSコーディングガイドライン</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</dd>
</dl>
<div id="search-form">
<form method="" action="">
<fieldset>
<legend>検索フォーム</legend>
＜省略＞
</fieldset>
</form>
</div>#header h2,
#topic-path dt,
#search-form legend,
#footer h2 {
position:absolute;
top:0;
left:0;
overflow:hidden;
width:0;
height:0;
font-size:0;
}Javascriptを無効に設定しているユーザーに対しては<noscript>を使用しJavascript実装の旨を表示します。
<div id="footer">
<h2>このサイトのガイド</h2>
<ul>
<li><a href="#">ホーム</a></li>
<li><a href="#">制作実績</a></li>
<li><a href="#">制作料金</a></li>
<li><a href="#">ガイドライン</a></li>
<li><a href="#">お問い合わせ</a></li>
</ul>
<address>copyright © 2007 enoq All Rights Reserved.</address>
<noscript><p>このサイトでは、一部の機能にJavaScriptを使用しています。JavaScriptを無効とされている方は、閲覧に影響の無い範囲で一部の機能がご利用いただけません。ご了承ください。</p></noscript>
<!-- /div#footer -->
</div>#footer noscript {
position:absolute;
top:0;
left:0;
width:100%;
}
#footer noscript p {
padding:0.5em 0;
background-color:#CC3333;
color:#fff;
font-size:87.5%;
text-align:center;
}HTML/XHTMLマークアップ・CSSコーディングサービス - ciqlie（シクリエ）では、コーディングガイドラインに基づいたHTML/XHTMLマークアップ・CSSコーディングを行います。このページではコーディングガイドラインの一部を掲載しております。
案件によってはガイドラインと一部異なる設計・実装を行う可能性がございますのであらかじめご了承ください。
