HTML／CSSのコーディング規約 - 【discontinue development 】SetucoCMS Wiki - 【discontinue development 】Setuc...

コーディング規約 > HTML／CSSのコーディング規約

HTML／CSSのコーディング規約

SetucoCMSのHTML／CSSのコーディングをする時は、このHTML／CSSのコーディング規約に沿ってコーディングしてください。

Outline

1. HTMLのコーディング規約
   1. 基本記法
   2. 改行
   3. インデント
   4. 空行

HTMLのコーディング規約

基本記法

「XHTML 1.0 Strict」に沿ってください。

改行

一つのタグの途中で改行を入れてはいけません。

×例）

 <img src="sample.jpg"
  width="80%" />

○例）

 <img src="sample.jpg" width="80%" />

開始タグと閉じタグの間に子タグが存在しない場合は改行を入れてはいけません。
HTML構造上の改行の意味を持つ箇所には<br />を使用してください。
<br />を入れた場合にもソース上では改行を入れないでください。
子タグを持つタグでも短文で済むものは改行を入れずに一行で記述してください。
（ケースバイケースで）

×例）

 <p>テキストテキストテキスト
 テキストテキストテキストテキストテキスト</p>

×例）

 <p>テキストテキストテキスト<br />
 テキストテキストテキストテキストテキスト</p>

○例）

 <p>テキストテキストテキスト<br />テキストテキストテキストテキストテキスト</p>

○例）

 <p><em>強調テキスト</em>テキストテキスト</p>

○例）

 <p><span><img src="sample.jpg" width="" height="" alt="" /></span></p>

○例）

 <p>
     <span>テキスト</span>
     <img src="sample.jpg" />
     テキストテキストテキスト
 </p>

インデント

抱合されるタグの前にはインデントを入れてください。

○例）

 <div>
     <ul>
         <li>テキスト</li>
         <li>
             <div>
                 <p>テキスト</p>
             </div>
         </li>
         <li>テキスト</li>
     </ul>
 </div>

空行

HTMLインデントの深さが0のブロックは、空行で区切ってください。

○例）

 <div>
     <ul>
         <li>テキスト</li>
         <li>テキスト</li>
     </ul>
 </div>
 
 <div>
     <p>テキスト</p>
 </div>
 
 <p>テキスト</p>