株 式 会 社 ユーザー センタード デザイン Web サイト 制 作 ガイドライン version 3.0.1 ( 発 効 日 : 2010 年 07 月 02 日 )
本 ガイドラインの 構 成 1 目 的 2 ターゲットユーザ 2.1 閲 覧 環 境 2.2 注 意 事 項 3 製 作 3.1 案 件 の 管 理 3.2 Web サイトの 構 成 3.3 アクセシビリティ ユーザビリティ 4 XHTML 4.1 基 本 4.2 レイアウト 4.3 head 要 素 4.4 body 要 素 4.5 非 推 奨 要 素 / 属 性 5 CSS 5.1 基 本 5.2 スタイルレイヤー 5.3 セレクタ 5.4 予 備 知 識 5.5 ハック 6 命 名 規 則 6.1 基 本 6.2 ディレクトリ 6.3 HTML/CSS ファイル 6.4 レイアウトの 部 位 6.5 画 像 ファイル - 1 -
更 新 履 歴 ( 赤 字 : 最 新 更 新 箇 所 青 字 : 前 回 更 新 箇 所 ) 2010/07/02 version3.0.1 に 更 新 2010/01/07 version3 発 行 - 2 -
1. 目 的 株 式 会 社 ユーザー センタード デザインが 製 作 する Web サイトの 品 質 向 上 を 目 指 す 本 ガイドラインに 準 拠 することで Web 標 準 SEO ユーザビリティ アクセシビリティ メンテナン スに 配 慮 した Web サイトを 製 作 することができる 2. ターゲットユーザ 2.1. 閲 覧 環 境 出 力 メディア PC スクリーンとプリントを 対 象 とする 必 要 に 応 じて 印 刷 用 の CSS を 用 意 し プレビューで 必 ず 確 認 する ただし ユーザの 選 択 無 しに 印 刷 用 レイアウトが 適 用 される 場 合 ユーザビリティを 損 なう 点 に 配 慮 す る また 最 低 限 の 処 置 として 用 紙 に 合 わせて 縮 小 機 能 の 無 い IE6 の 印 刷 結 果 が 用 紙 内 に 収 まる 様 に 配 慮 する ディスプレイ 1024 768 ピクセルのディスプレイを 対 象 とする 幅 は 760~960 ピクセルを 基 本 とし 案 件 により 適 宜 対 応 する ブラウザ 以 下 のブラウザを 対 象 とする ただし 案 件 に 応 じて 対 応 範 囲 を 調 整 する OS ブラウザ Windows Internet Explorer( 以 下 IE)6 7 8 Mozilla Firefox 3 Opera 10 Safari 5 Google Chrome 3 Mac OS Safari 5 Mozilla Firefox 3-3 -
文 字 コードセット UTF-8 を 基 本 とし 案 件 に 合 わせて 適 宜 対 応 する HTML と CSS で 使 用 する 文 字 コードを 統 一 する 2.2. 注 意 事 項 ディレクトリ 閲 覧 の 防 止 フォルダ 内 には 必 ず index.html を 作 成 する Dreamweaver の 利 用 Adobe 製 品 使 用 時 に 製 作 されてしまう _note フォルダは 削 除 するようにする Dreamweaver 使 用 時 は サイトの 定 義 で デザインノートの 保 持 のチェックをはずせばフォルダが 出 来 なくなるので 必 ずその 様 に 設 定 すること 出 来 てしまった 場 合 は 今 の 場 所 で クリーンアップ を 行 えば 設 定 したローカルルートフォルダ 内 の _note が 削 除 される また HTML のソースを 左 に 揃 える 為 環 境 設 定 でインデント 設 定 からチェックを 外 すように 設 定 する こと 以 下 参 照 JavaScript の 利 用 JavaScript を 利 用 する 場 合 は 外 部 ファイル 化 する html ファイル 内 への 直 接 の 書 き 込 みは 極 力 避 ける ようにする JavaScript エラーが 発 生 する 場 合 ブラウザに 実 装 されているデバッガなどを 利 用 して 修 正 作 業 を 行 なう ただし 自 力 で 解 決 できない 場 合 はシステム 担 当 者 に 相 談 すること - 4 -
Flash の 利 用 Flash の 利 用 はバリデーションへの 配 慮 から 外 部 JavaScript ファイルを 読 み 込 む 形 で 埋 め 込 む Dreamweaver の 機 能 による 埋 め 込 みは 煩 雑 である 事 やバージョン 違 いを 考 慮 し 原 則 として 使 用 しない ようにする 具 体 的 には 以 下 の 方 法 を 推 奨 する jquery を 使 用 する 場 合 jquery Media Plugin(http://malsup.com/jquery/media/)を 使 用 する サーバへのリクエストを 減 らすため jquery の js ファイル 内 に 追 記 するのが 望 ましい 使 用 法 は URL 及 びサンプル HTML を 参 照 すること jquery を 使 用 しない 場 合 swfobject v2(http://code.google.com/p/swfobject/) を 使 用 する 読 み 込 み 方 法 (スタティック ダイナミ ック)の 設 定 は 任 意 使 用 法 は 適 宜 参 照 すること 3. 制 作 3.1. 案 件 の 管 理 案 件 開 始 時 案 件 に 関 わることが 確 定 している 人 を 対 象 にミーティングを 行 う ファイルサーバの 使 用 について 以 下 のルールに 従 うこと ファイルを 変 更 する 前 に 必 ずバックアップをとる クライアントから 受 け 取 ったファイルは 整 理 し 必 ずチームで 共 有 する ファイルの 整 理 は チームごとに 適 宜 決 定 し 決 めた 方 法 に 必 ず 則 る 案 件 のディレクトリ 構 成 と 各 ディレクトリの 役 割 を 図 示 する - 5 -
/ 案 件 全 体 を 包 括 /html/ /html_bk/ /document/ /document/cost/ /document/pw/ /sozai/ /source/ Web サイトを 包 括 /html/のバックアップを 保 存 する 命 名 規 則 は yyyymmdd とする 案 件 に 関 する 社 内 文 書 を 包 括 クライアントに 提 出 した 見 積 書 を 包 括 サーバー 情 報 のドキュメントファイルを 包 括 クライアントから 受 け 取 ったファイルを 包 括 Web サイトを 作 るためのファイルを 包 括 ファイルが 多 い 場 合 は png psd などフォルダを 作 って 保 存 納 品 と 返 却 納 品 および 返 却 の 際 は 不 要 なデータ(テストページやテスト 画 像 など)を 削 除 した 状 態 にするこ と パートナーは 納 品 完 了 後 資 料 を 納 品 書 とともに 返 却 すること 返 却 方 法 は 郵 送 または 持 ち 込 み とする 作 業 の 終 了 とチェック 文 字 / 文 章 校 正 交 換 校 正 プログラムの 動 作 確 認 サイト 制 作 作 業 の 終 了 後 必 ず 自 分 で 制 作 物 チェック.xls をチェックし 修 正 作 業 を 行 う 終 了 後 ディレクターに 報 告 する 案 件 終 了 時 案 件 に 参 加 した 人 でミーティングを 行 い 反 省 点 をまとめる 重 要 な 項 目 があった 場 合 全 体 会 議 の 議 題 とする - 6 -
3.2. Web サイトの 構 成 HTML ファイルを 木 構 造 で 構 成 する css ファイル import 用 css ファイル 画 像 ファイルは HTML に 属 した 位 置 に 配 置 する ただし サイト 全 体 で 共 通 のファイルは common 以 下 で 管 理 する 以 下 にディレクトリ 構 成 例 を 図 示 する 表.ディレクトリ 役 割 表 / Web サイト 全 体 を 包 括 /index.html /images/ /css/ /content/ /content/index.html /content/1st.html /content/2nd.html /content/images/ /content/css/ /content/css/content.css Web サイトのトップページ トップページに 使 用 する 画 像 ファイルを 包 括 トップページに 使 用 する CSS ファイルを 包 括 コンテンツディレクトリ コンテンツのトップページ コンテンツの 第 1 ページ コンテンツの 第 2 ページ コンテンツに 使 用 する 画 像 ファイルを 包 括 コンテンツに 使 用 する CSS ファイルを 包 括 コンテンツの CSS ファイル - 7 -
/common/ /common/images/ /common/css/ /common/ css/reset.css /common/ css/base.css /common/ css/modules.css /common/css/import.css /common/ css/print.css /common/js/ Web サイトで 共 通 のファイルを 包 括 Web サイトで 共 通 の 画 像 ファイルを 包 括 Web サイトで 共 通 の CSS ファイルを 包 括 ブラウザの 初 期 設 定 をリセットし 再 定 義 した CSS ファイル Web サイトで 共 通 のスタイルをまとめた CSS ファイル CSS で 頻 繁 に 使 用 する 部 分 を 汎 用 化 し まとめた CSS ファイル reset.css, base.css, module.css をまとめてインポートする CSS ファ イル 印 刷 用 のスタイルをまとめた CSS ファイル( 印 刷 対 応 時 のみ) Web サイトで 使 用 する JavaScript を 包 括 ディレクトリ/ファイル 名 の 範 例 sitemap privacy access company about contact / inquiry link faq recruit history サイトマップ 個 人 情 報 の 取 り 扱 い プライバシーポリシー 交 通 手 段 地 図 アクセス 会 社 概 要 開 催 概 要 お 問 い 合 わせ 当 サイトへのリンク FAQ 採 用 情 報 沿 革 3.3. ユーザビリティ alt 属 性 alt 属 性 を 持 つ 要 素 は alt 属 性 を 必 ず 付 与 すること 画 像 自 体 に 意 味 がない あるいは 直 前 の 文 章 と 重 複 する 内 容 の 場 合 は alt= と 空 にして 対 処 する トップページに 戻 るリンク ヘッダ 部 分 のロゴに index.html に 戻 れるリンクを 設 定 すること - 8 -
4. XHTML ガイドライン 4.1. 基 本 文 書 型 (XHTML のバージョン) XHTML 1.0 Transitional を 基 本 とする <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd"> XML 宣 言 について XML の 仕 様 では XML 宣 言 を 記 述 することが 強 く 推 奨 されているが XML の 標 準 仕 様 に 則 う 事 で 省 略 が 可 能 つまり XHTML の 文 字 コードが Unicode であれば 問 題 ないので 前 述 の 通 り 文 字 コードは UTF-8 を 基 本 とする それ 以 外 の 文 字 コードを 使 用 する 場 合 は 担 当 ディレクターと 相 談 の 上 決 定 する 事 id 属 性 class 属 性 原 則 class 属 性 を 使 用 する 要 素 が 一 意 に 特 定 できる 場 合 (レイアウトにおける header など)に 限 り id を 使 用 する id 属 性 と class 属 性 は 同 一 の 要 素 に 対 して 設 定 可 能 書 式 原 則 以 下 の 書 式 で 統 一 するが 案 件 によって 指 定 がある 場 合 は 適 宜 対 応 する インデントによる 階 層 表 示 は 行 わず 左 詰 めとする コメントは 可 能 な 限 りソース 内 に 分 かりやすく 記 述 していく 終 了 タグに id(または class)の 名 前 をコメントで 記 述 する 書 式 は 下 記 の 例 を 参 照 し スペースの 有 無 などに 気 をつけること また この 記 述 は レイアウトに 使 用 しているタグ(div や table)においては 原 則 とする Rtn <div id="gnav">rtn <dl>rtn <dt> 主 なカテゴリ</dt>Rtn <dd>rtn <ul>rtn <li>...</li>rtn <li>...</li>rtn - 9 -
<li>...</li>rtn </ul>rtn </dd>rtn <! - / id gnav --></div>rtn エラーチェックの 実 施 XHTML は W3C Markup Validation Service(http://validator.w3.org/)で 必 ずエラーチェックする This Page Is Valid XHTML 1.0 Transitional! とならない 場 合 は 問 題 の 箇 所 を 修 正 し 必 ずこの 結 果 になるよう に 調 整 する 参 考 : Firefox 用 アドオン Html Validator でエラーチェックを 簡 易 化 できる Html Validator https://addons.mozilla.jp/firefox/details/249 4.2. レイアウト div 要 素 (または table 要 素 )で 段 組 を 行 い 適 切 な id を 設 定 する 原 則 下 記 の 表 に 従 うものとする やむを 得 ない 場 合 は 他 のスタッフにもわかりやすい 名 前 を 設 定 すること Id 名 layout header pagebody primary secondary gnav lnav content sidebar footer topicpath banner visual 備 考 ページ 全 体 ページのヘッダ ページのボディ content 内 の 主 要 な 要 素 content 内 の 副 次 的 な 要 素 グローバルナビゲーション ローカルナビゲーション 主 要 コンテンツ サイドバー ページのフッタ トップページからの 階 層 構 造 を 示 したリンクリスト ページのバナー 表 示 部 大 きめの 画 像 や Flash - 10 -
4.3. head 要 素 含 める 内 容 head 要 素 に 含 める 内 容 について 次 の 点 に 気 をつける <meta http-equiv="" /> は title 要 素 の 前 に 記 述 する 指 定 するのは Content-Type Content-Style-Type Content-Script-Type の 3 つとする <meta name="" /> は title 要 素 の 直 後 に 記 述 する link 要 素 や script 要 素 は head 要 素 の 中 で 最 後 に 記 述 する タイトル 属 性 など 日 本 語 を 使 用 する 要 素 は 必 ず charset の 指 定 後 に 記 述 する 各 ページ 間 の 移 動 がスムーズに 出 来 るように <link rel="contents" href="/" title=" " /><link rel="index" href="/sitemap/" title="サイトマップ" />などの 記 述 を 追 加 する 前 後 にページがある 場 合 は next prev も 追 加 する 基 本 CSS(base.css, module.css, reset.css)は import.css でまとめて 読 み 込 む フォルダ 毎 の css は 別 途 読 み 込 む これらを 踏 まえ 以 下 を 基 本 的 な 構 成 とする <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" /> <meta http-equiv="content-script-type" content="text/javascript" /> <title>(そのページのタイトル)</title> <meta name="description" content="(そのページの 簡 単 な 説 明 文 )" /> <meta name="keywords" content="(そのページのキーワード 半 角 カンマ 区 切 りで 列 挙 )" /> <link href="common/css/import.css" rel="stylesheet" type="text/css" media="screen,print" /> <link href="css/top.css" rel="stylesheet" type="text/css" media="screen,print" /> <link rel="contents" href="/" title="ホーム" /> <link rel="index" href="/sitemap/" title="サイトマップ" /> <script type="text/javascript" src="common/js/script_top.js"></script> </head> ( 参 考 ) 携 帯 サイトへの 対 応 として Mobile Link Discovery (モバイル リンク ディスカバリー)がある これを 設 定 することで Google モバイル/Yahoo モバイルに 指 定 した URL が 正 しくインデックスさ れるようになる 各 PC ページから 対 応 する 携 帯 ページへの URL を 記 述 するのが 理 想 だが 更 新 の 手 間 などの 理 由 で 不 可 能 な 場 合 はトップページにのみ 入 れ 込 むようにする - 11 -
<link rel="alternate" media="handheld" href="(サイトの URL アドレス)" /> title 要 素 Title 要 素 は SEO を 意 識 して 各 ページ 以 下 のように 記 述 する また 以 下 title タグ 内 のパイプ 及 びスペースはそれぞれ 半 角 とする 株 式 会 社 ユーザー センタード デザインという 会 社 のサイト:トップページの 場 合 <title> 株 式 会 社 ユーザー センタード デザイン</title> 株 式 会 社 ユーザー センタード デザインという 会 社 のサイト: 第 二 階 層 の 場 合 <title>サービス 株 式 会 社 ユーザー センタード デザイン</title> 株 式 会 社 ユーザー センタード デザインという 会 社 のサイト: 第 三 階 層 の 場 合 <title>web 制 作 - サービス 株 式 会 社 ユーザー センタード デザイン</title> 4.4. body 要 素 適 切 な 見 出 し 構 造 h1 要 素 から 出 現 すること 途 中 の 見 出 しレベルを 飛 ばさないこと セクションにおいて h1 h2 h3 と 見 出 しの 出 現 順 序 を 厳 守 する h1 要 素 で 定 義 すべき 内 容 h1 要 素 で 定 義 すべき 内 容 は ページタイトルを 基 本 とする img 要 素 の 注 意 点 img 要 素 には 必 ず alt 属 性 で 代 替 テキストを 指 定 する ( 意 味 のない 画 像 には alt= と 記 述 ) また 更 新 の 際 の 簡 略 化 をはかるため width 属 性 と height 属 性 は 入 力 しない 意 味 のある 画 像 は 置 換 してはいけない ( 例 :グラフ 地 図 等 ) a 要 素 の 注 意 点 title 属 性 ( 補 足 情 報 )は SEO 上 の 特 定 の 指 定 があるときのみ 使 用 する ( 場 合 によっては SEO スパム と 認 識 される 可 能 性 があるため) div 要 素 の 注 意 点 - 12 -
div 要 素 はブロック 要 素 を 包 括 する 汎 用 要 素 なので インライン 要 素 (img 要 素 strong 要 素 a 要 素 な ど)を 直 接 含 んではいけない 隠 しテキストの 設 定 音 声 ブラウザ テキストブラウザなどを 使 用 しているユーザのユーザビリティを 高 める 為 に 必 要 と 考 え られる 要 素 は module.css に 記 述 されている offscreen クラス あるいは offscreen クラスと 同 様 の CSS プロパティを 記 述 して 対 処 する body 要 素 の class の 記 述 複 数 のページで 共 通 のレイアウトやスタイルを 指 定 したい 場 合 body 要 素 に class 属 性 を 設 定 すること で 対 応 しても 良 い また 一 つのページに 特 定 のレイアウトやスタイルを 指 定 したい 場 合 も body 要 素 に class 属 性 を 設 定 す ることで 対 応 し id 属 性 は 極 力 使 用 しないものとする 4.5. 非 推 奨 要 素 / 属 性 非 推 奨 要 素 / 属 性 を 使 用 する 事 は 原 則 禁 止 とする 原 則 外 の 対 処 の 必 要 がある 場 合 事 前 にスタッフ 内 で 協 議 のうえで 使 用 すること 5. CSS ガイドライン 5.1. 基 本 CSS のバージョン CSS2(CSS level 2)を 採 用 する エラーチェックの 実 施 CSS は W3C CSS Validation Service(http://jigsaw.w3.org/css-validator/)で 必 ずエラーチェックする なお チェック 結 果 について エラー は 必 ず 修 正 しなければならないが 警 告 は 無 視 してよい 例 外 として zoom プロパティの 使 用 を 許 可 する ただし 印 刷 対 応 や 本 ガイドラインにおけるブラウザ 対 応 を 円 滑 に 行 う 場 合 のみの 使 用 に 限 る CSS オフ 時 でも 情 報 が 伝 わるページに CSS をオフにした 状 態 でも 情 報 がきちんと 伝 わるページにする Firefox では ツールバー スタイ ルシート スタイルシートを 使 用 しない を 選 択 することで CSS をオフにできるので この 状 態 で 情 報 の 出 現 順 序 や 流 れなどをチェックする - 13 -
style 属 性 (インラインスタイル)は 使 用 せず 必 ず 外 部 CSS に 指 定 する style 要 素 は 使 用 せず 必 ず 外 部 CSS に 指 定 する 5.2. 書 式 インデント( 字 下 げ)は Tab キーで 行 う プロパティごとに 改 行 し インデントして 記 述 する 適 度 に 改 行 (Rtn キー[Enter キー])を 入 れて 見 やすくする 1 行 目 には 必 ず@charset の 記 述 をする XHTML で 指 定 した 文 字 コードに 合 わせ 基 本 UTF-8 とする XHTML の 文 字 コードが UTF-8 以 外 の 場 合 は その 文 字 コードに 合 わせる コメントには 基 本 的 に 日 本 語 は 使 用 しないようにする 適 用 対 象 ごとに 適 切 にコメントで 区 切 り 他 の 部 分 と 区 別 しやすくする コメントの 記 述 の 注 意 点 と して /* のあと */ の 前 に 必 ず 半 角 スペースを 入 れる (Win IE での 不 具 合 回 避 の 為 ) 各 セレクタの 間 は 必 ず 1 行 空 け 区 切 りのコメント 前 は 2 行 空 けるようにする 値 が 0 の 場 合 は px や % などの 単 位 はつけない 原 則 としてプロパティの 順 序 はアルファベット 順 とする Rtn Rtn /*-------------------------------------------------------------------- Rtn ( 各 部 位 の id 名 と 同 じ 名 前 を 書 く) Rtn ( 詳 細 説 明 がある 場 合 はここに 記 述 ) Rtn --------------------------------------------------------------------*/ Rtn Rtn div#header Space { Rtn Tab プロパティ: Space 値 ; Rtn Tab プロパティ: Space 値 ; Rtn Rtn Rtn div#header p{ Rtn Tab プロパティ: Space 値 ; Rtn Tab プロパティ: Space 値 ; Rtn Rtn Rtn - 14 -
デフォルトの 記 述 CSS ファイルの 冒 頭 には その CSS のファイル 名 作 成 日 更 新 日 更 新 者 などが 分 かるようにコメン トを 記 述 する またその 続 きとして そのファイルの 内 容 が 分 かる 目 次 をコメントとして 記 述 すること その 際 に 各 目 次 行 頭 は#つきで 記 述 する [ 例 ] @charset "UTF-8"; /* **************************************************** Title: base.css Created: 2010 01 07 Last Modified: 2010 01 07 Editor(s): Hiroto Inukai Last Editor: Hiroto Inukai ***************************************************** */ /* Table Of Contents ---------------------------------------- # General Elements # body # layout ----------------------------------------*/ ショートハンドプロパティ margin border padding background プロパティはショートハンドで 記 述 するのが 望 ましい font プロ パティはショートハンドで 記 述 しない Dreamweaver の 環 境 設 定 も 以 下 のように 変 更 しておくこと - 15 -
p.note { background: #ddd url(../images/ico_note.gif) no-repeat; border: 1px solid #000; font-family: Verdana, Arial, sans-serif; font-size: 83%; font-weight: bold; line-height: 1.5; margin: 10px 15px; padding: 5px 0; 色 関 連 プロパティ background-color color などの 色 関 連 プロパティの 値 は 16 進 数 の 小 文 字 表 記 にする ( 例 :#000, #fc3360) font-size プロパティ フォントサイズ 指 定 は 次 のルールに 基 づいて 指 定 する 単 位 は%を 使 用 する 基 本 サイズは 75%(12px 相 当 )とする line-height プロパティ 行 高 の 指 定 は 値 に 単 位 をつけず 小 数 点 以 下 まで 記 述 する - 16 -
( 例 :line-height: 1.5) 5.3. スタイルレイヤー HTML ファイルによる CSS 参 照 5.4. セレクタ id/class はなるべく 使 わず 子 孫 セレクタを 使 う 以 下 のようにセレクタの 影 響 範 囲 が 広 すぎる 使 用 の 仕 方 はしない 以 下 の 例 では div#content 以 下 の 全 ての div に 対 してスタイルが 影 響 してしまう 適 宜 id/class を 指 定 して 対 処 すること [ 悪 い 例 ] div#content div { width: 300px; - 17 -
[ 良 い 例 ] div#content div#news { width: 300px; 子 孫 セレクタは 各 部 位 からはじめる たとえば div#header div#gnav div#content div#sidebar div#footer などから 子 孫 セ レクタをはじめる 子 孫 セレクタで 示 すツリー 構 造 は 不 必 要 な 表 現 を 省 く [ 悪 い 例 ] div#pagebody div#sidebar ul#lnav li a {...; [ 良 い 例 ] div#sidebar ul#lnav li a {...; 原 則 class を 使 用 一 意 に 特 定 できるときは id を 使 用 4.1 を 参 照 id/class には 意 味 的 な 名 前 を id/class には 意 味 的 な 名 前 をつける たとえば red などの 視 覚 的 な 名 前 をつけない 詳 しくは 6 章 を 参 照 [ 悪 い 例 ] div#content ul.red {...; [ 良 い 例 ] div#content ul.photolist {...; - 18 -
id/class には 要 素 タイプをつける [ 悪 い 例 ] #request {...;.examples {...; [ 良 い 例 ] form#request {...; pre.examples {...; id/class 名 の 区 切 り 記 号 id/class 名 に 単 語 の 区 切 りが 有 る 場 合 shoplist や searchbox のように 後 ろの 単 語 を 大 文 字 では じめる 5.5. 予 備 知 識 プロパティの 継 承 ( 要 画 像 差 し 替 え) 明 示 的 に 値 を 宣 言 しなくても プロパティには 何 らか の 値 がセットされる プロパティに 対 して 宣 言 を 行 わなかった 場 合 そのプ ロパティの 値 はプロパティごとに 次 のいずれかの 方 法 で セットされる 親 要 素 における 値 がそのまま 使 われる プロパティごとに 定 められた 初 期 値 を 使 う 前 者 をプロパティの 値 の 継 承 という 継 承 されるプロパティは color, font-size, text-align, text-indent, - 19 -
line-height, font-family, font-style および font-weight の 各 プロパティである 一 方 background-color text-decoration および text-shadow の 各 プロパティは 継 承 されない ただし text-decoration と text-shadow は 装 飾 は 継 続 されるという 例 外 がある IE の width/height の 誤 解 釈 案 件 により XML 宣 言 を 記 述 せざるを 得 ない 場 合 または DOCTYPE になんらかの 欠 落 があり 修 正 を 行 えない 場 合 以 下 の 後 方 互 換 モードが 適 用 される 点 に 配 慮 する IE の 後 方 互 換 モードにおけるブロック 要 素 の width/height の 解 釈 にはバグがあり 他 のブラウザと 表 示 に 差 異 が 生 じる このバグの 対 処 方 法 は width/height と padding/border を 同 一 の 要 素 に 指 定 しないこと である 以 下 に 標 準 の 解 釈 と IE の 解 釈 の 違 いと 対 処 方 法 の 具 体 例 を 示 す 図 1 は 標 準 の 解 釈 である 図 2 は IE の 後 方 互 換 モードにおける 誤 解 釈 であり width の 値 に padding と border も 含 まれる これは ブロック 要 素 を 二 重 にし 外 側 のブロック 要 素 で width/height を 指 定 し 内 側 のブロック 要 素 で padding(あるいは margin)を 指 定 することで 対 処 できる このとき 内 側 のブロックの width/height は 指 定 しない(auto にする) margin の 相 殺 (collapsing margins) 隣 接 あるいは 入 れ 子 の 関 係 にある 複 数 のボックス 要 素 において 間 に padding/border の 領 域 を 挟 まずに 隣 接 する 上 下 の margin は 結 合 して 一 つの margin になる (= 値 の 大 きい 方 の margin をとる) 隣 接 する 左 右 の margin は 結 合 しないので 注 意 - 20 -
画 像 のロールオーバー(カーソルオン 時 の 画 像 切 り 替 え) グローバルナビゲーション ローカルナビゲーション 等 の 主 要 パーツ 以 外 は 基 本 的 に JavaScript を 用 い て 対 処 する 例 えば 以 下 の 様 にする [ 例 ]Jquery を 使 用 した 例 class 名 に imgover を 指 定 する 事 で 画 像 を 切 り 替 える //script.js $(function() { $('.imgover').each(function() { var osrc = $(this).attr('src'); var hsrc = osrc.replace(/(\.gif \.jpg \.png)/, '_o$1'); $.data(this, 'osrc', osrc); $.data(this, 'hsrc', hsrc); $('<img>').attr('src', hsrc); ).hover(function() { $(this).attr('src', $.data(this, 'hsrc'));,function() { $(this).attr('src', $.data(this, 'osrc')); ); ); 5.6. ハック ハックは 基 本 的 には 使 用 しないよう 努 力 する 止 むを 得 ない 場 合 に 限 り 以 下 のハックの 使 用 を 推 奨 する Windows 版 IE6 への 対 応 Windows 版 IE6 のみを 対 象 とするハックは * html という 記 法 を 利 用 する [ 例 ] p { font-size: 116%; * html p { font-size: 116%; Windows 版 IE 7 への 対 応 Windows 版 IE 7 のみを 適 用 対 象 とするハックは *:first-child+html という 記 法 を 利 用 する たと - 21 -
えば 次 の 様 にする [ 例 ] *:first-child+html p { font-size: 116%; - 22 -
6. 命 名 規 則 6.1. 基 本 ユーザにわかりやすい 名 前 をつける 原 則 英 単 語 を 使 用 する( koushin update) 同 義 の 単 語 はサイト 内 で 統 一 する(product manufacture goods commodity goods) 下 記 の 略 語 対 応 表 にある 単 語 については 略 語 表 記 で 統 一 する 基 本 的 に 下 記 の 略 語 対 応 表 以 外 の 略 語 を 使 用 しない 下 記 に 単 語 の 略 語 対 応 表 を 示 す background banner button footer header Icon image source text 英 単 語 bg bnr btn f h ico img src txt 統 一 する 表 記 6.2. ディレクトリ ディレクトリ 名 は 略 さない コンテンツを 包 括 するディレクトリの 場 合 は 最 も 適 した 英 単 語 を 用 いる 同 一 のディレクトリ 名 が 複 数 存 在 してはいけない ディレクトリ 名 に 大 文 字 は 使 用 しない 6.3. HTML/CSS ファイル ファイル 名 に 大 文 字 は 使 用 しない コンテンツのトップページである 場 合 は index.html とする - 23 -
上 位 階 層 の 単 語 は 重 複 になるため 使 用 しない 原 則 として 同 一 のファイル 名 が 複 数 存 在 してはいけない( index.html を 除 く) 6.4. レイアウトの 部 位 Id/class にアンダーバーは 使 用 しない 複 数 の 単 語 が 連 なる 場 合 2 つ 目 以 降 の 単 語 の 頭 文 字 を 大 文 字 にする( 例 usercenterddesign) 上 位 階 層 の 単 語 は 重 複 になるため 使 用 しない 6.5. 画 像 ファイル 画 像 ファイルに 大 文 字 を 使 用 しない 画 像 ファイル 名 は 使 われている 箇 所 がわかるように 画 像 用 途 レイアウトの 部 位 名 (id/class など) 名 前 で 構 成 する レイアウトの 部 位 名 に 大 文 字 が 使 われている 場 合 は アンダーバー+ 小 文 字 に 変 換 する 命 名 にあたっては 5.7 の 略 語 と 以 下 の 表 を 参 考 にする 背 景 画 像 バナー ボタン アイコン 基 本 画 像 大 見 出 し 中 見 出 し 小 見 出 し 小 見 出 し 以 降 用 途 参 考 表 記 bg_ bnr_ btn_ ico_ img_ bh_ mh_ sh_ ssh_ (s を 追 加 していく) or sh_を 使 用 例 bh_service.jpg mh_solution.jpg sh_solution.jpg bg_service_commodity.jpg gnav_about_o.gif ico_pdf.gif - 24 -