繁體中文翻譯狀態

類別: 軟體 人 PersonalForge Magazine Wiki

搜尋

edit | Title Index |  Recent Changes  | 

Show page source of HTML／CSSのコーディング規約 #63167

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

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

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

[[PageOutline(start=2, depth=2)]]

[[BR]]

== HTMLのコーディング規約

=== 基本記法
「[http://www.doraneko.org/webauth/xhtml10/20000126/Overview.html XHTML 1.0 Strict]」に沿ってください。

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

×例）
{{{ code html
<img src="sample.jpg"
 width="80%" />
}}}

○例）
{{{ code html
<img src="sample.jpg" width="80%" />
}}}
[[BR]]
開始タグと閉じタグの間に子タグが存在しない場合は改行を入れてはいけません。[[BR]]
HTML構造上の改行の意味を持つ箇所には<br />を使用してください。[[BR]]
<br />を入れた場合にもソース上では改行を入れないでください。[[BR]]
子タグを持つタグでも短文で済むものは改行を入れずに一行で記述してください。[[BR]]
（ケースバイケースで）

×例）
{{{ code html
<p>テキストテキストテキスト
テキストテキストテキストテキストテキスト</p>
}}}

×例）
{{{ code html
<p>テキストテキストテキスト<br />
テキストテキストテキストテキストテキスト</p>
}}}

○例）
{{{ code html
<p>テキストテキストテキスト<br />テキストテキストテキストテキストテキスト</p>
}}}

○例）
{{{ code html
<p><em>強調テキスト</em>テキストテキスト</p>
}}}

○例）
{{{ code html
<p><span><img src="sample.jpg" width="" height="" alt="" /></span></p>
}}}

○例）
{{{ code html
<p>
    <span>テキスト</span>
    <img src="sample.jpg" />
    テキストテキストテキスト
</p>
}}}

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

○例）
{{{ code html
<div>
    <ul>
        <li>テキスト</li>
        <li>
            <div>
                <p>テキスト</p>
            </div>
        </li>
        <li>テキスト</li>
    </ul>
</div>
}}}

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

○例）
{{{ code html
<div>
    <ul>
        <li>テキスト</li>
        <li>テキスト</li>
    </ul>
</div>

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

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