CSSデザインノートでタグ「coding」が付けられているもの

CSSを記述する際、余白やインデントに関して、自分なりあるいは複数で管理する場合はプロジェクト単位でルールを決めておくと、見やすさ(可読性)が向上します。

ちなみに私の書き方は以下のとおりです。

CSSコード

selecter {
   property:value;
}
  1. selecter名と「{」の間に半角スペースを空ける
  2. propertyの前に半角3文字分スペースを空ける
  3. propertyおよびvalueと「:」の間にはスペースを空けない
  4. valueと「;」の間にはスペースを空けない
  5. propertyがひとつしかない場合でも、必ずvalueの後に「;」はつける

基本的にスペースは付け忘れが多いため、空けないようにしているのですが、selecterの後には必ずスペースを入れるようにしています。これは、CSSファイル内でselecterを検索する際、スペースを空けておくと便利なことが多いからです。

CSSを記述する際、プロパティの順序を自分なりに決めておくと、二重に指定したりするミスも減り、メンテナンスも楽になります。

私のプロパティの指定順序を紹介します。ワイヤーフレームはidを使い、それ以外にはclassを使うようにしています。ご自分のメンテナンスのしやすい並び順を模索してみてください。

1.ワイヤーフレームに関するプロパティ

CSSコード

div#name {
/* 表示・配置に関する設定 */
   position: ;
   top: ;
   right: ;
   bottom: ;
   left: ;
   z-index: ;
   float: ;
   clear: ;
   text-align: ;
   background: ;

/* 大きさ(ボックス)に関する設定 */
   min-width: ;
   width: ;
   min-height: ;
   height: ;
   max-height: ;
   margin: ;
   padding: ;
   border: ;
}

2.一般的なclass属性

CSSコード

.name {
/* 表示・配置に関する設定 */
   display: ;
   position: ;
   top: ;
   right: ;
   bottom: ;
   left: ;
   z-index: ;
   float: ;
   clear: ;
   overflow: ;
   visibility: ;

/* 大きさ(ボックス)に関する設定 */
   min-width: ;
   width: ;
   max-width: ;
   min-height: ;
   height: ;
   max-height: ;
   vertical-align: ;
   margin: ;
   padding: ;
   border: ;

/* テキスト・背景に関する設定 */
   color: ;
   font-family: ;
   font-style: ;
   font-weight: ;
   font-size: ;
   text-indent: ;
   text-align: ;
   text-decoration: ;
   letter-spacing: ;
   line-height: ;
   background: ;
}

その他の要素特有のプロパティ、例えばul要素の「list-style-type」などは、スタイルの最後に記述するようにしています。

参考サイト

私もきちんとしたものを作ってはいないのですが、ホームページを作る際、コーディングガイドラインがあると、複数人でも統一した書き方が出来、メンテナンスも楽になります。

秀逸なコーディングガイドラインを作っている方がいらっしゃるので今回はそちらを紹介します。

山田あかねさんのCSSのコーディングガイドラインです。山田さんは、エスカフラーチェのWebデザイナーさんで、書籍や雑誌にもよく記事を書いてらっしゃいます。

上ノ郷谷太一さんのCSSのコーディングガイドラインです。上ノ郷谷さんはMovableTypeでお馴染みのシックス・アパートに勤務されている方です。

あと、こちらはガイドラインというか、ガイドラインのまとめのような記事ですが、非常によくまとまっています。

最近のブログ記事