====== コーディング規約 ======
Revizeは下記のコーディング規約に基づいて制作されています。Revizeをベースにしたテーマ、Revizeに対応したプラグインを制作するには同様のコーディング規約に倣う必要があります。

===== HTML =====


==== 準拠規格 ====
  *[[http://www.w3.org/TR/html401/|HTML 4.01 Specification]]
  *[[http://www.w3.org/TR/2000/REC-xhtml1-20000126/|XHTML 1.0: The Extensible HyperText Markup Language]](XHTML化機能の有効時)
文書型にはTrasitionalを採用します。
XHTML化機能へ対応するためには、変換後にXHTML 1.0 Transitionalの基準を満たすHTMLを記述する必要があります。



==== サイト名とメインブロック ====
原則として、サイト名と記事などを含むメインブロックは、[[http://www.w3.org/TR/xhtml2/|XHTML 2.0]]の[[http://www.w3.org/TR/xhtml2/mod-structural.html#sec_8.8.|section要素]]に倣い、下記の構造に基づいてマークアップします。
  -h1(サイト名)
    -div.section(メインブロック全体 - レベル1)
      -h2.title(メインブロックのタイトル - レベル1)
      -div.text(メインブロックの内容 - レベル1)
      -div.section(メインブロック全体 - レベル2)
        -h3.title(メインブロックのタイトル - レベル2)
        -div.text(メインブロックの内容 - レベル2)
        -div.section(メインブロック全体 - レベル3)
          -h4.title(メインブロックのタイトル - レベル3)
          -div.text(メインブロックの内容 - レベル3)
          -div.section(メインブロック全体 - レベル4)
            -h5.title(メインブロックのタイトル - レベル4)
            -div.text(メインブロックの内容 - レベル4)
            -div.section(メインブロック全体 - レベル5)
              -h6.title(メインブロックのタイトル - レベル5)
              -div.text(メインブロックの内容 - レベル5)

  <div class="section story featured story-featured">
    <h2 class="title story-title">メインブロックのタイトル - レベル1</h2>
    <div class="text story-text">
      (メインブロックの内容 - レベル1)
    </div>
  </div>
  <div class="section story">
    <h2 class="title story-title">メインブロックのタイトル - レベル1</h2>
    <div class="text story-text">
      (メインブロックの内容 - レベル1)
    </div>
    <div class="section">
      <h3 class="title">メインブロックのタイトル - レベル2</h3>
      <div class="text">
        (メインブロックの内容 - レベル2)
      </div>
    </div>
  </div>

Heading(見出し)要素はサイト名とメインブロックのタイトル以外では使用しません。

クラス名が複数ある場合は、CSS2のセレクタに未対応のユーザーエージェント(IE等)にも配慮するため、「section」以外のそれぞれのクラス名を「-」(ハイフン)でつなげたクラス名も指定します。また、子要素は、必要に応じて、親要素のクラス名の一部と子要素のクラス名を「-」(ハイフン)でつなげたクラス名も指定します。









==== サブブロック ====
原則として、左右ブロックなどを含むサブブロックは、1つのブロックごとに下記の構造に基づいてマークアップします。

  -dl.utility(ブロック全体)
    -dt.title(ブロックのタイトル)
    -dd.text(ブロックの内容)

  <dl class="utility user_block">
    <dt class="title">ブロックタイトル - ブロック1</dt>
    <dd class="text">ブロックの内容 - ブロック1</dd>
  </dl>
  <dl class="utility admin_block">
    <dt class="title">ブロックタイトル - ブロック2</dt>
    <dd class="text">ブロックの内容 - ブロック2</dd>
  </dl>


==== ナビゲーション ====
原則として、ページナビゲーションなどを含むナビゲーションは、1つのナビゲーションごとに下記の構造に基づいてマークアップします。

  -ul(ナビゲーション全体)
    -li.first(最初のナビゲーション)
      -a
    -li(通常のナビゲーション)
      -a
    -li.current(選択中のナビゲーション)
      -strong
    -li.last(最後のナビゲーション)
      -a

  <ul class="navigation page navigation-page">
    <li class="first"><a href="first.html">最初のナビゲーション</a></li>
    <li><a href="normal.html">通常のナビゲーション</a></li>
    <li class="current"><strong>選択中のナビゲーション</strong></li>
    <li class="last"><a href="last.html">最後のナビゲーション</a></li>
  </ul>

クラス名が複数ある場合は、CSS2のセレクタに未対応のユーザーエージェント(IE等)にも配慮するため、それぞれのクラス名を「-」(ハイフン)でつなげたクラス名も指定します。




==== フォーム ====
原則として、全てのフォームは下記の構造に基づいてマークアップします。

  -form#Form(フォーム全体)
    -fieldset(フォームの内容)
      -legend(フィールド名)
      -dl.field(入力フィールド全体)
        -dt(ラベル)
          -label
        -dd(入力フィールド)
          -input,textarea等
      -ul.submit(hiddenフィールドと送信ボタン)

あるいは

  -form#Form(フォーム全体)
    -fieldset(フォームの内容)
      -legend(フィールド名)
      -dl.field(入力フィールド全体)
        -dt(ラベル)
          -label
        -dd(入力フィールド)
          -input,textarea等
    -fieldset(フォームの内容)
      -legend(フィールド名)
      -dl.field(入力フィールド全体)
        -dt(ラベル)
          -label
        -dd(入力フィールド)
          -input,textarea等
    -ul.submit(hiddenフィールドと送信ボタン)

  <form action="action.php" method="post" id="FormAction">
    <fieldset>
      <legend>フィールド名</legend>
      <dl class="field">
        <dt><label for="FormAction-Field1">ラベル</label></dt>
        <dd><input type="text" name="field1" value="" id="FormAction-Field1" class="text"></dd>
      </dl>
      <ul class="submit">
        <li><input type="hidden" name="name" value="value"><input type="submit" value="{lang_register}" class="submit"></li>
      </ul>
    </fieldset>
  </dl>

  <form action="action.php" method="post" id="FormAction">
    <fieldset>
      <legend>フィールド名1</legend>
      <dl class="field">
        <dt><label for="FormAction-Field1">ラベル</label></dt>
        <dd><input type="text" name="field1" value="" id="FormAction-Field1" class="text"></dd>
      </dl>
    </fieldset>
    <fieldset>
      <legend>フィールド名2</legend>
      <dl class="field">
        <dt><label for="FormAction-Field2">ラベル</label></dt>
        <dd><input type="text" name="field2" value="" id="FormAction-Field2" class="text"></dd>
      </dl>
    </fieldset>
    <ul class="submit">
      <li><input type="hidden" name="name" value="value"><input type="submit" value="{lang_register}" class="submit"></li>
    </ul>
  </dl>

form要素のid属性値は「Form」から始まる[[http://ja.wikipedia.org/wiki/%E3%82%AD%E3%83%A3%E3%83%A1%E3%83%AB%E3%82%B1%E3%83%BC%E3%82%B9|アッパーキャメルケース]]にします。

input要素・textarea要素には、label要素のfor属性用にid属性を付けます。id属性値は、form要素のid属性値とinput要素・textarea要素のname属性値の1文字目を大文字にしたものを「-」(ハイフン)でつなぎます。

また、CSS2のセレクタに未対応のユーザーエージェント(IE等)にも配慮するため、input要素にはtype属性値と同じ値をclass属性値として追加します。


==== システムメッセージ ====
原則として、全てのシステムメッセージは下記の構造に基づいてマークアップします。

  -dl.message(システムメッセージ全体)
    -dt.title(システムメッセージのタイトル)
    -dd.text(システムメッセージの内容)
      -p,ul,ol等

  <dl class="message">
    <dt class="title message-title">システムメッセージのタイトル</dt>
    <dd class="text message-text">
      <p>システムメッセージの内容</p>
    </dd>
  </dl>

CSS2のセレクタに未対応のユーザーエージェント(IE等)にも配慮するため、子要素は、必要に応じて、親要素のクラス名の一部と子要素のクラス名を「-」(ハイフン)でつなげたクラス名も指定します。






===== CSS =====
==== 準拠規格 ====
  *[[http://www.w3.org/TR/REC-CSS2/|Cascading Style Sheets, level 2 CSS2 Specification]]
または
  *[[http://www.w3.org/TR/CSS21/|Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification]]

場合によっては、[[http://www.w3.org/TR/css3-roadmap/|CSS3]]やユーザーエージェントの独自仕様も使用します。






==== 規則集合の定義 ====
原則として、規則集合は次のように記述します。

  selector,
  selector
  {
    property: value;
    property: value;
  }

セレクタはセレクタごとに改行し、宣言ブロックの開始と終了を表す「{」・「}」の前後には改行を入れます。宣言(プロパティと値)は宣言ごとに改行し、プロパティの後ろには「:」と1つの半角スペースを入れ、値の後ろには「:」を入れます。




==== 規則集合の記述順序 ====
原則として、規則集合は[[http://www.w3.org/TR/CSS21/cascade.html#specificity|specificity]]が低い順に記述します。

  element
  {
    property: value;
  }
  element>element,
  element+element,
  element[attr]
  {
    property: value;
  }

また、CSS2のセレクタに未対応のユーザーエージェント(IE等)にも配慮するため、未対応セレクタ(子セレクタ・隣接兄弟セレクタ・属性セレクタ等)を含む規則集合は通常の規則集合と分けて記述します。セレクタの結合子(「>」・「+」等)の前後には空白文字は入れません。


==== プロパティの記述順序 ====
原則として、プロパティは[[http://www.w3.org/TR/CSS21/|Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification]]に出現する順序で記述します。