Web標準準拠のホームページ制作・ウェブサイト制作・Webデザイン

XHTML・CSSコーディングガイドライン

ディ・スピカがXHTML・CSSコーディングする際のガイドラインです。

基本方針

  • 具体的な内容（Contents）と文書の構造（Structure）はXHTMLに、見せ方（Presentation）はCSSに、振る舞い（Behavir）はJavascriptに、それぞれ別ファイルとして分離する。
  • 多様な環境（特に非視覚系ユーザーエージェント）に配慮して、アクセシビリティを向上させる。
  • 制作・更新を効率的に行えるようにディレクトリ・ファイルを命名し、構成する。

XHTML

宣言

  • 特に事情がない場合は、文字コードをUFT-8にして、XML宣言を省略する。
  • DOCTYPEは原則的にXHTML 1.0 Strict 。 ただし、更新スタッフの事情に合わせてXHTML 1.0 Transitional, HTML 4.01 Strict, HTML 4.01 Transitionalにする場合もある。 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

head

  • ページの性質・概要、他ページ・他ファイルとの関連を示す。
  • 最初に 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  • title要素は必須。サイトタイトル、カテゴリタイトル、ページタイトルを明記する。
  • meta要素として、name="keywords", name="description"を記述する。
  • link要素でトップページ、サイトマップとの関連づけを行う。連続するページは前後のページとの関連づけを行う。

body

  • body以下の各要素は、文書の構造・各要素が持つ役割を的確に示すようにマークアップする。
  • body要素にはclassと必要に応じてidをふり、ページを特定してCSS、Javascriptが適用できるようにする。 
    <body class="gallery" id="g1002">......</body>

div

  • 構造壁、間仕切りとしての役割をはたす。
  • ページ内に以下のエリアを設ける。 
    <div id="area-page">
  <div id="area-header">......</div>
  <div id="area-navigation">......</div>
  <div id="area-contents">
    <div id="area-main">......</div>
    <div id="area-sub">......</div>
  </div>
  <div id="area-footer">......</div>
</div>
  • サイト全体を通して、div要素の基本的構造は統一させる。ページごとの内容（Contents）のみを容易に入れ替えられるようにする。（制作・更新を効率化するとともに、システムを導入しやすくするため）
  • 視覚的デザインを実現させるために、文書構造上意味のないdiv要素を増やさない。
  • div要素の最初の子要素はできるだけheadeing（見出し）にする。

id, classの命名

  • 位置・役割を一意的に特定し、フラグメントとして用いる場合idをふる。
  • もの、人、出来事などすでに固有の識別子を持っていれば、idとして用いる。
  • 上記以外のものは、性質を分類するためにclassをふる。
  • 必要に応じてひとつの要素にidとclassをふる。classに複数の値をふることもありうる。
  • 視覚的デザインの状況を示すような命名はしない。
    悪い例） red, bold, left, right
    良い例） sales-copy, footnote, linkList, tel
  • id, classで情報をフィルタリングする可能性が十分にあることを承知して命名する。
  • id, classを無用に増やさないために、できるだけ祖先要素のほうにふる。CSSは子孫セレクタで対応。 
    <div>
  <h3 class="section-title">......</h3>
  <p class="section-body">......</p>
  <ul>
    <li class="link">......</li>
    <li class="link">......</li>
    <li class="link">......</li>
  </ul>
</div>

    よりも

    <div class="section">
  <h3>......</h3>
  <p>......</p>
  <ul class="linkList">
    <li>......</li>
    <li>......</li>
    <li>......</li>
  </ul>
</div>

代替コンテンツ

  • 画像やFlashなどのオブジェクトが表示されない場合、JavascriptやCSSが有効ではない場合も、判読・操作ができるようにする。
  • alt属性が使える場合は、必ず記述する。単なるマークのような場合はalt=""。
  • alt属性では十分な代替テキストとならない場合は、別途コンテンツを記述し、CSSなどで邪魔にならないように処理する。
  • Flashを用いる場合、原則としてFlashファイルはSWFObjectで読み込み、十分な代替コンテンツを用意する。
  • Javascriptは、機能しなくても判読・操作に大きな支障が出ない範囲で用いる。

よく使うブロックレベル要素

  • h1〜h6
    h1から順に階層に気をつけてとばさないように
  • p
  • ul, li
  • ol, li
  • dl, dt, dd
  • table, tr, th, td
    th要素は有効活用する
  • p, ul, ol, dl, tableの使い分けをチェックする。

よく使うインライン要素

  • span
    特定のテキストに意味、役割を与える。例）<span class="tel">055-284-4381</span>
  • strong
  • em
  • a
    サイト内リンクは、URLが一意に定まるようにパスを記述する。（ / と /index.html が混在しないように）
    target属性は基本的に使用しない。ウインドウ、タブの開閉は、ユーザーの意志で制御できるようにする。
  • img

その他留意点

  • 視覚的デザインを変更する際、できるだけXHTMLに手を加えず、CSSの対応のみで行えるようにしておく。
  • 視覚的デザイン上の余白をとるためにbr要素を連続して使うことや、空の要素、スペースを挿入することは避ける。
  • 見出し、リスト、区切りなどの意味で●■・などの記号を使うことは避ける。
  • <!--  -->コメントを活用。
    例）<!-- 新着情報：更新2007-04-22 -->
    子入れが深くなるところでは、 
    <!-- /#area-main --></div>
    などと終了タグの直前にコメント入れておくとわかりやすい。
  • 子入れ要素はインデントを下げて。
  • 各要素の属性の記述順序を統一させておく。（検索・置換の際に分かりやすい）

CSS

ブラウザへの対応

  • プロパティはブラウザの対応状況とバグを理解して使う。
  • 最低限IE6〜、Firefox3〜、Opera9〜、 Safari3〜、Chromeに対応させる。
  • 未対応ブラウザのあるプロパティは、適用されなくても支障のない範囲で用いる。
  • CSSハックは必要最低限とし、極力使わない。

CSSファイル構成

  1. 全サイトに共通するもの。例）default.css
    ブラウザ間のデフォルトスタイルをリセットし、初期設定を行う。
  2. サイト内の全ページに共通するもの。例）base.css
    基本的なレイアウト・デザイン。ヘッダーやフッターの部分。
  3. 更新時に参照したり、修正・追加が必要になるもの。例）parts-main.css
    主にメインコンテンツの部分。
  4. レイアウトパターンによって異なるもの。例）page-top.css, page-info.css
    特定のレイアウトパターン。1〜3をインポートする。
  5. その他、必要に応じて。例）print.css, ie.css

XHTMLファイルからは4、5にリンク

<link href="css/page-info.css" rel="stylesheet" type="text/css" media="screen, tv, projection" />
<link href="css/print.css" rel="stylesheet" type="text/css" media="print" />

記述順

@charset "UTF-8";

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

 CSSファイル名
 制作日時・制作者
 インポート先

-------------------------------------------------

階層構造
#area-page
  #area-header
  #area-navigation
  #area-contents
    #area-main
    #area-sub
  #area-footer

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

@import url( );

これ以降、

  • セレクタは祖先要素から子孫要素へ（階層順）、同じ階層のものは上から下へ（出現順）
  • プロパティはボックスモデルの外側から内側へ
    • disply, float, visibility, position, oveflow
    • margin, padding, width, height
    • border, background
    • list-style
    • line-height, white-space
    • text
    • font
    • color

その他留意点

  • 支障がない限りショートハンドで記述する。
    例）background: #FFFFFF url(......) no-repeat center top;
  • 子孫セレクタで要素のデザインを振り分ける。
    #area-navigation ul {......}
#area-main ul {......}
#area-sab ul {......}
    同じulでも違う装飾ができる。
  • 記述の無駄を省くためにセレクタのグループ化を活用する。
  • /* */コメントの活用。

XHTML・CSSコーディングのみのご依頼も承ります。Service：コーディング

更新履歴

2010-02-27
現状に合わせて全項目を加筆・修正しました。