サイトディレクトリ構造
特別な指定がある場合を除き原則次のような構造で制作します。
ファイルの命名規則
画像ファイル名
画像ファイル名は「接頭辞+連番.拡張子」または「接頭辞_グループ名+連番.拡張子」とします。
※画像が1点の場合は連番を省略可。
※接頭辞は、htmlのタグ名、ボタン＝「btn」、バナー＝「banner」、テキスト=「txt」、写真「photo」など。
※グループ名は、任意で決めてください（例えばCSSのID名や画像の目的や意味など）他の人が作業する場合でも効率よく作業が行えるようにする為に、わかりやすい命名を工夫して下さい。
| 種類 | 名称例 |
|---|---|
| ロゴ | logo.xxx |
| 背景画像 | bg_body.xxx、bg_footer.xxx |
| キービジュアル | kv.xxx |
| 見出し | h1_headline01.xxx、h1_pagettl01.xxx h2_lead01.xxx、h2_lead02.xxx h3_catch01.xxx |
| その他テキスト | txt_catch01.xxx |
| グローバルナビゲーション | gnav_01.xxx |
| ヘッダーナビゲーション | hnav.xxx |
| フッターナビゲーション | fnav.xxx |
| ローカルナビゲーション | lnav_01.xxx |
| その他ナビゲーション | nav_01.xxx |
| アイコン | icn_pdf.xxx |
| ボタン | btn_entry01.xxx |
| バナー | banner_require.xxx |
| 写真 | photo_01.xxx |
| その他 | img_flow01.xxx |
ID・class名
※下記項目にない項目は各自で追加してください。
レイアウト
入れ子構造になる場合は、親要素の名前+"-Inner"とします。例）#container-Inner
| コンテナ | id/class名 | 記述するCSS | 備考 |
|---|---|---|---|
| 全体コンテナ | #container | layouts/default.css | body要素の直下 |
| ヘッダー | #header | layouts/default.css | |
| ヘッダーナビゲーション | #h-Nav | layouts/default.css | |
| グローバルナビゲーション | #g-Nav | layouts/default.css | |
| フッター | #footer | layouts/default.css | |
| フッターナビゲーション | #f-Nav | layouts/default.css | |
| コンテンツ | #content | layouts/default.css | |
| 第1汎用コンテナ | #mainArea | layouts/default.css | マルチカラム用など |
| 第2汎用コンテナ | #subArea | ||
| 第3汎用コンテナ | #extraArea |
その他共通項目
| ブロック | id/class名 | 記述するCSS | 備考 |
|---|---|---|---|
| ロゴ | #ci | layouts/default.css | |
| 要約 | #description | layouts/default.css | SEO用の文章など |
| チャンク | .section | theme.css | コンテンツの塊 |
| ローカルナビゲーション | #l-Nav | theme.css | |
| パンクズナビゲーション | #breadList | theme.css |
XHTML
コードフォーマット
文字コード「UTF-8」、改行コード「CR+LF（Win）」で記述します。
ソースを見やすくするインデントは、使う使わないは自由とします。
ドキュメントタイプ
DOCTYPEは原則的にXHTML 1.0 Transitional。XML宣言を記載します。
<?xml version="1.0" encoding="utf-8"?> <!!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
階層構造
構成の例です、基本はこの形で行います。 body#Unique ID └#container [全体枠] ├#header [ヘッダー枠] │ ├#h-Nav [ヘッダーナビゲーション] │ └#g-Nav [グローバルナビゲーション] ├#content [コンテンツ枠] │ ├#MainArea [メインコンテンツ] │ └#SubARea [サブコンテンツ] └#footer [フッター枠] └#f-Nav [フッターナビゲーション]
デザインの表現上、タグを追加する必要があれば
head要素
head 要素内に含まれる要素は以下の順序で記述する
1. meta 要素・title 要素 [SEOを考慮して、title要素は文字コード指定の直下に記述する]
2. link 要素
3. script 要素
4. その他
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>カレトモドットコム 制作ガイドライン</title> <meta name="Description" content="" /> <meta name="Keywords" content="" /> <meta http-equiv="imagetoolbar" content="no" /> <meta http-equiv="Pragma" content="no-cache" /> <meta http-equiv="Cache-Control" content="no-cache" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <link type="text/css" rel="stylesheet" href="common/css/version4.css" /> <link type="text/css" rel="stylesheet" href="common/css/lytebox.css" /> <link type="text/css" rel="stylesheet" href="common/css/screen.css" media="tv,screen,print" /> <script src="common/js/common.js" type="text/javascript"></script> <script src="common/js/lytebox.js" type="text/javascript"></script>
デザイン指定方法
各ページの <body> タグにユニークなID名を与え、デザインを指定します。
IDの名称はhtmlのファイル名もしくはディレクトリ名を使用します。
※Dreamweaverのテンプレートプロパティを利用し変更します。
例） <body id="index"> <body id="concept">
その他留意点
- 見た目を設定する属性は使わない。
例）align="center" border="0" bgcolor="#CCCCCC"など。これらはCSS表現する。 - 全ての画像にはaltを入れる
CSS
構成
外部ファイルとしてリンクし、文字コードは、utf-8とします。
構成は図の通りとなっています。
概要
各々のディレクトリ、CSS ファイルの概要を説明します。
基本的に作業するCSSは、 layouts/default.css、 theme.cssの2種類となり、他のcssは変更の必要はありません。
screen.css
各CSSを読み込ませるCSSとなり、以下のような記述をします。
charset "utf-8";
@import url("common.css");
@import url("component.css");
@import url("fonts.css");
@import url("layouts/default.css");
@import url("layouts/two_column_left.css");
@import url("theme.css");
common.css
ブラウザによって微妙な違いのある、各要素のデフォルトスタイルの差異をリセットする CSS ファイル。
component.css
よく使うスタイル定義を class にまとめてモジュール化しているのですが、そのモジュール化されたものをまとめた CSS ファイル。画像の回り込みや、要素の回り込み解除など。
fonts.css
全体的なフォントサイズ、特定の要素のフォントファミリの指定を行っている CSS ファイル。
layouts ディレクトリ
レイアウト専門の CSS ファイルを格納するディレクトリ。default.cssで、共通の構造を設定します(XHTMLの構造を参照)、two_column_left.css、two_column_right.css、three_column.cssなどで、2カラムや3カラムのレイアウトを設定します。
theme.css
サイト独自のデザインを設定するCSS。
print.css
印刷用のCSS
その他、javascriptのライブラリなどを使用する場合は専用のCSSを設置ください。
記述ルール
[セレクタ]
- セレクタの記述
セレクタはインデントなしで記述する。 - セレクタの列挙
セレクタが列挙される場合、末尾に "," を記載し、改行を置く。 - ブレースの記述
"{" ならびに "}" の後には改行をいれる。
好みに応じてインデントしてもよいが、同一文書内では統一すること。
記述例
selector{
property: value;
}
selector1,
selector2{
property: value;
}
selector{
property: value;
}
selector1,
selector2{
property: value;
}
