CSSの基本の最近のブログ記事

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

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

CSSコード

selecter {
   property:value;
}

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

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

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

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

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

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: ;
}

２．一般的な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」などは、スタイルの最後に記述するようにしています。

参考サイト

スタイルシートを分けて管理する方法をまとめる - 2xup.org

CSS記述規則「プロパティ別整理法」の提案 : akiyan.com

DOCTYPE宣言によってCSSのレンダリングが変わるのですが、以下の３つのモードがあります。

1. 完全標準モード（Full Standards Mode）
2. ほぼ標準モード（Almost Standards Mode）
3. 後方（過去）互換モード（Quirks Mode）

これらの違いを見ていきます。

１．完全標準モード（Full Standards Mode）

仕様に則ったとおりにレンダリングされます。ここでいう仕様とはW3C標準仕様のことで、以下の仕様書のことを指します。

Web標準仕様 日本語訳一覧

２．ほぼ標準モード（Almost Standards Mode）

完全標準モードとほぼ標準モードの違いは1点だけです。

画像の表示に違いがあります。完全標準モードでは画像のvertical-alignプロパティの初期値はbaselineなのですが、ほぼ標準モードではvertical-alignプロパティの値はbottomとなります。

vertical-alignプロパティの値がbaselineであると、画像の下に空白が生じます。この理由は当blogの以下の記事を参考にしてください。

imgタグで指定した画像の下にわずかな隙間（空白）が空いてしまう - CSSデザインノート

３．後方（過去）互換モード（Quirks Mode）

完全標準モードと後方互換モードにはかなり違いがあります。

最も知られているのはボックスモデルの違いです。ボックスにwidthとpaddingとborderを指定した場合、完全標準モードでは横幅 = width + padding + borderになるのに対し、後方互換モードでは横幅 = widthとなってしまいます。

その他にもいろいろあるのですが、量が多いのでここでは割愛します。以下のサイトなどを参考にしてみてください。

Mozilla Quirks Mode Behavior - MDC

標準準拠・後方互換モード各々の CSS 解釈の違いをまとめたドキュメントを共有

DOCTYPEスイッチ一覧表

DOCTYPEスイッチによるモードの違いを表にしたものです。以下のサイトをご覧ください。また、同時に「表示モードごとの CSS 解釈検証表」も載っているので合わせて参考にしてください。

disply mode

最近のモダンブラウザは、W3Cで勧告されていないCSSでも先行して実装しています。それによりソースコードが簡潔でよりリッチなデザインが可能となりました。

ただし注意しなければならないことは、勧告されていないCSSプロパティや独自プロパティはプレフィックス（接頭辞）を指定しなければなりません。つまり、IEの場合は先頭に｢-ms-｣が、Mozilla系では｢-moz-｣が、Operaでは｢-o-｣を、SafariやChromeの場合先頭に｢-webkit-｣はをつけなければなりません。

これは、CSS2.1でも定められていることらしいです。

Syntax and basic data types

IEでは独自実装でもプレフィックスがついていなかったのですが、IE8からプレフィックスの使用が可能になったようです。

それぞれのブラウザの独自実装CSSプロパティは以下を参考にしてください。

Mozilla系

Mozilla CSS 拡張仕様 - MDC

IE8

IEBlog : Microsoft CSS Vendor Extensions

参考サイト

各ブラウザで先行実装しているCSS3プロパティまとめ | CSS-EBLOG

CSS3は2009年7月8日現在、Working Draftの段階ですが、モダンブラウザでは先行して実装されています。

Webサイトを制作する際、IEがネックとなっていますが、IE8ではよりWeb標準に近づいた動作をしますので、積極的に新しいCSSに挑戦するのも面白いと思います。

さて本題ですが、CSS3を含むCSSセレクタを一覧にしました。ご参考ください。

参考サイト

Selectors Level 3

CSS セレクタに関するおさらい

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

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

CSS(Cascading Style Sheets) コーディングガイドライン

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

スタイルシートを書く時のガイドライン

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

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

hxxk.jp - CSS の記述ルール記事のまとめ

ショートハンドプロパティとは、1つのプロパティタグを使用して複数のプロパティ値を指定するプロパティのことです。よくわからないと思うので、サンプルを交えながら説明していきます。

１．margin関連プロパティを一括指定する

marginでは個別にtop、bottom、left、rightを指定することができますが、これをmarginというショートハンドプロパティを用いることで一括で指定できます。

その際、以下のような組み合わせで指定できます。

CSSコード

/* 上下左右、全て10px */
margin:10px;

/* 上下10px、左右20px */
margin:10px 20px;

/* 上10px、左右20px、下30px */
margin:10px 20px 30px;

/* 上10px、右20px、下30px、左40px */
margin:10px 20px 30px 40px;

/* 上下左右、全て10px */
padding:10px;

/* 上下10px、左右20px */
padding:10px 20px;

/* 上10px、左右20px、下30px */
padding:10px 20px 30px;

/* 上10px、右20px、下30px、左40px */
padding:10px 20px 30px 40px;

list-style:none;

background:transparent url(img.gif) no-repeat 0 100% fixed;

/* 線の幅が上1px、右2px、下3px、左4px */
border-width:1px 2px 3px 4px;

/* 線のスタイルが上solid、右solid、下solid、左dotted */
border-style: solid solid solid dotted;

/* 線の色が上red、右#ddd、下green、左#000000 */
border-color: red #ddd green #000000;

/* 線の上下左右が幅1px スタイルsolid 色red */
border:1px solid red;

/* 線の上が幅1px スタイルsolid 色red */
border-top:1px solid red;

/* 線の下が幅1px スタイルsolid 色red */
border-bottom:1px solid red;

/* 線の左が幅1px スタイルsolid 色red */
border-left:1px solid red;

/* 線の右が幅1px スタイルsolid 色red */
border-right:1px solid red;

font:italic small-caps 100%/1.4 Osaka, verdana, sans-serif;