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

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

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

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

div

  • 構造壁，間仕切りとしての役割をはたす。
  • 見た目のレイアウトを整えるためのdivは必要最小限にする。
  • div要素の最初の子要素はできるだけheadeing（見出し）にする。

id, classの命名

  • 位置・役割を一意的に特定するためにidをふる。
    例） banner, main, navigation, contentinfo
  • 性質を分類するためにclassをふる。
  • 必要に応じてひとつの要素に対してidと複数の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>

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

  • 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
  • img
    alt属性の書き方
    代替テキストである。画像が見えないとき何があるかを説明する。
    例）alt="photo:授業風景"（画像の種別:画像のタイトル・説明）
    例）alt="資料請求ページへ"
    単なるマークのような場合はalt=""。（alt属性がないと画像のファイル名が出る）

その他留意点

  • 見た目を整えるためにbrを連続して使うことは避ける。
  • 見た目のために●■・などの記号を使うことは避ける。リストで対応。
  • <!--  -->コメントを活用。
    例）<!-- 新着情報：更新2007-04-22 -->
    子入れが深くなるところでは， 
    <!-- /#main -->
</div>
    などと終了タグの直前にコメント入れておくとわかりやすい。
  • 子入れ要素はインデントを下げて。
  • 各要素の属性の記述順序を統一させておく。
    例）<img class="..." src="..." alt="..." width="..." height="..." />
    1. 名前（id, class）
    2. 必須のもの（src, alt）
    3. あるとよいもの（width, height）
  • 見た目を設定する属性は使わない。
    例）align="center" border="0" bgcolor="#CCCCCC"など。
    これらはCSSで。

CSS

  • 子孫セレクタで階層を示す。
  • 子孫セレクタで要素のデザインを振り分けられる。
    div#main h3 {......}
div#seealso h3 {......}
    同じh3でも違う装飾ができる。
  • ブラウザの対応状況とバグを理解して使う。DOCTYPEスイッチも含めて。
  • 最低限IE6〜，Firefox2〜，Opera9〜， Safari２〜に対応させる。

CSSファイル構成

  1. 全サイトに共通するもの。例）default.css
    ブラウザ間のデフォルトスタイルをリセットする
  2. サイト内の全ページに共通するもの。例）common.css
    基本的なBOXのレイアウト・デザイン
  3. レイアウトパターンによって異なるもの。例）info-page.css
    特定のレイアウトパターン。a〜cをインポートする。
  4. 印刷用。例）print.css
    bを印刷用に修正し，a，cをインポート

XHTMLファイルからはc，dにリンク

<link href="css/import.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ファイル名
 制作日時・制作者
 インポート先

-------------------------------------------------
@import url( );

階層構造
#container
  #header
  #navigation
  #contents
    #main
    #sub
  #footer

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

ここまでを書いたあと，

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

その他留意点

  • 支障がない限りショートハンドで記述
    例）background: #FFFFFF url(......) no-repeat center top;
  • 記述の無駄を省くためにセレクタのグループ化を活用し，階層表現の一部省略を行うこともある。
  • /* */コメントの活用。
  • CSSハックは極力使わない。
  • 未対応ブラウザのあるプロパティは原則的に使わない。

Works

更新履歴

2007-04-26
xhtml，css，xmlを大文字に修正しました。
2007-10-17
「CSSファイル構成」の項に，印刷用CSSに関する記述を含めて書き換えました。

Pge Top