綺麗なコードの書き方｜クロノドライブ

2009年01月05日

はじめに

綺麗なコードを書くためには、以下の二つに気をつけながらコーディングしましょう

統一感
シンプルで無駄のないコード

統一感を出すために

統一感を出すために、コードフォーマットのガイドラインを作ります。

改行の入れ方
タブの入れ方
コメントの入れ方
スタイルプロパティの順番

この4つをガイドラインとして定めることで綺麗なコードになります。

以下はこのガイドラインを元にしたサンプルです。

(X)HTML

01<div id="container">
02　　　<!--▼コンテンツ▼-->
03　　　<div id="conts">
04　　　　　<p>一行で終わるような短いテキストなら要素の改行なし。</p>
05　　　　　<p>
06　　　　　何行にも渡るような長いテキストは要素の始めと終わりに改行を入れる。<br />
07 
08　　　　　こんな感じです。<br />
09　　　　　文頭が揃った方が綺麗ですよね。
10　　　　　</p>
11　　　　　<img src="" width="" height="" alt="" title="" target="" />
12　　　</div>
13　　　<!--▲コンテンツ▲-->
14　　　<!--▼サイドナビ▼-->
15 
16　　　<div id="side_navi">
17　　　サイドナビ
18　　　</div>
19　　　<!--▲サイドナビ▲-->
20</div>

CSS

01/*--------------------------------------
02　基礎設定
03---------------------------------------*/
04* {
05　　margin: 0px;
06　　padding: 0px;
07}
08 
09body {
10　　text-align: center;
11　　line-height: 1;
12 
13　　overflow: auto;
14}
15 
16/*--------------------------------------
17　大枠囲み
18---------------------------------------*/
19#container {
20　　margin: 0px auto;
21　　width: 700px;
22 
23　　text-align: left;
24}
25 
26/*--------------------------------------
27　コンテンツ
28---------------------------------------*/
29#conts {
30　　width: 500px;
31 
32　　float: right;
33}
34 
35/*--------------------------------------
36　サイドナビ
37---------------------------------------*/
38#side_navi {
39　　width: 200px;
40 
41　　float: left;
42}

解説

改行の入れ方: 要素の始めと終わりに入れる。例外として一行で画面に収まるような長さの場合は改行を入れません。
タブの入れ方: ネスト要素をタブで一段下げます。
コメントの入れ方: コメントの入れ方は、開始－終了で囲むと分かりやすくなります。例えばヘッダーを構成しているdiv要素がどこで開始され、どこで閉じられているか一目でわかります。また、このときコメント内に記号を入れることで目につき易くなります。
スタイルプロパティの順番: これについてはスタイルプロパティの記述順番ガイドラインをご覧ください。

シンプルで無駄のないコードにするために

以下のことに気をつけてコーディングしましょう。

ネストは最低限にする
スタイルプロパティの2重記述をしない
装飾系の画像は出来る限りCSSを使い、要素の背景として指定する
外部ファイル化できるものは外部ファイル化する

どれも守らなくてもコーディングは出来ますので、妥協してしまいがちです。
しかし、これらを守ることで綺麗なコードに出来るだけではなく、無駄がないコードにするということは、コードの量が減る…つまりコーディングスピードも速くなります。