プロパティのルール
「プロパティのルール」の項目では、プロパティの記述順序、ショートハンドプロパティの扱い方などを規定しておくと良いでしょう。
プロパティの記述順序
CSSの書式上、プロパティの記述順序に決まりはありませんが、順序に統一性がない場合、プロパティの重複や脱漏などといったミスや無駄が発生しがちです。こうした問題を未然に防ぐために、プロパティの記述順序を決めておきましょう。記述順序の案としては、アルファベット順、W3Cの仕様書に出てくる順などが考えられます。
アルファベット順は、最もシンプルで順序のルールを覚える必要がないというメリットがありますが、例えば「height」と「width」など、一度に指定したい記述が離れてしまいますので、コードを見ただけではスタイルのイメージが湧き難く、少々違和感があるかもしれません。
仕様書に出てくる順番としておけば、クライアントのような外部の人間に、手っ取り早く順序のルールを伝えることができますが、慣れるまでは順番を覚えるのに苦労するかもしれません。仕様書の順番をそのまま採用するのではなく、これをベースにして、実作業を進めるうえで自然な順番を考慮しながら規定するというのも一つの手です。
他に、有名なところでは「Mozilla.org」の外部スタイルシートの中で提案されているプロパティの順序があります。こちらを参考にして考えてみるのも良いでしょう。
/* Suggested order: * display * list-style * position * float * clear * width * height * margin * padding * border * background * color * font * text-decoration * text-align * vertical-align * white-space * other text * content * */
実際のところ、ここで規定した記述順序を守りながらコーディング作業を進めるのは大変だと思います。体が覚えるまでは、コーディングを一通り終えたあとでプロパティの並び替えをして、最後に記述順序のルールを適用するようにするのが、効率よく作業を進めるためのポイントです。
ショートハンドプロパティの扱い方
「background（背景関連の一括指定）、font（フォント関連の一括指定）、margin（マージンの一括指定）、padding（パディングの一括指定）、border-color（ボーダー色の一括指定）、border-width（ボーダーの太さの一括指定）、border-style（ボーダー形式の一括指定）、border（ボーダー関連の一括指定）、list-style（リストマーカー関連の一括指定）」といったショートハンドプロパティは、類似するプロパティのスタイルを一括して指定することができるため、コードの簡略化や作業効率のアップに有効です。例えば、marginプロパティでは、margin-top、margin-right、margin-bottom、margin-leftプロパティを一括して指定することができます。
p {
margin-top: 1em;
margin-right: 2em;
margin-bottom: 3em;
margin-left: 4em;
}
p {
margin: 1em 2em 3em 4em;
}
しかし、なんでもかんでもショートハンドを使用すれば、効率化が図れるというわけではないため、ショートハンドに関するルールも規定しておくと良いでしょう。例えば、先の例でのp要素を対象としたスタイルに加え、「endというclass名のp要素の下マージンだけを5em」にしたい場合は、margin-bottomプロパティを使用して個別にスタイルを指定した方がコードがすっきりします。
p {
margin:1em 2em 3em 4em;
}
p.end {
margin:1em 2em 5em 4em;
}
p {
margin:1em 2em 3em 4em;
}
p.end {
margin-bottom:5em;
}
従って、一つの案として「値が1～2個程度の場合には、ショートハンドプロパティを使用せず、個別のプロパティで指定する」とするのも良いでしょう。
また、ショートハンドプロパティには、margin、padding、border-color、border-width、border-styleのように上下左右の値を一括して指定するタイプと、background、border、list-styleのように必要な値を任意の順で指定するタイプがあります。
前者の場合、指定する値の数によって、スタイルの適用箇所が異なる点に注意しましょう。これをうまく活用することでコードの簡略化を図ることができます。
| 値の数 | 適用箇所 | 効果的な使い方 |
| 値が1つ | 上下左右 | 上下左右の値が同じスタイルを指定する場合に使用 |
| 値が2つ | 上下／左右 | 上下が同じ値、左右が同じ値のスタイルを指定する場合に使用 |
| 値が3つ | 上／左右／下 | 上下が異なり、左右が同じ値のスタイルを指定する場合に使用 |
| 値が4つ | 上／右／下／左 | 上下左右の値が異なるスタイルを指定する場合に使用 |
必要な値を任意の順で指定するタイプのショートハンドプロパティの場合、「省略された値には初期値が割り当てられる」という点に注意してください。先に指定したスタイルに初期値が上書きされ、再度スタイルを指定するようでは効率が良いとは言えません。
また、fontプロパティに関しては、仕様上のルールがやや複雑なため、扱い方には特に注意が必要です。使いこなすうえでミスが生じやすいため、「fontプロパティは使用せず、個別のプロパティで指定する」としておいた方が無難かもしれません。
fontプロパティで設定するこのできるプロパティは、「font-style、font-variant、font-weight、font-size、line-height、font-family」の6種類です。他のショートハンドプロパティと異なり、指定順序には決まりがあり、さらに、省略不可のプロパティも存在します。具体的には、下記のようなルールになります。
fontプロパティで一括指定することのできるプロパティと指定方法のルール
- font-style（1～3まで任意の順／省略可）
- font-variant（1～3まで任意の順／省略可）
- font-weight（1～3まで任意の順／省略可）
- font-size（省略不可）
- /line-height（半角スラッシュが必要／省略可）
- font-family（省略不可）
加えて、省略した値は、初期値が適用される点に注意してください。例えば、
h1 {
font-style: normal; /* 初期値 */
font-variant: normal; /* 初期値 */
font-weight: bold;
font-size: 1em;
line-height: 2em;
font-family: Verdana, sans-serif;
}
のような指定は、fontプロパティを使用して次のように一括指定することができます。この例では「font-variantプロパティ」および「font-styleプロパティ」はもともと初期値ですので、記述を省略することができます。
h1 {
font: bold/1em Verdana sans-serif;
}
また、fontプロパティを使用した場合、一括指定することのできない「font-stretchプロパティ」と「font-size-adjustプロパティ」の値についても、初期値に戻されるため注意が必要です。これらのプロパティについて、初期値以外の値を指定したい場合には、個別に指定しなおす必要があります。
h1 {
font: bold/1em Verdana sans-serif;
/* 以下、fontプロパティの使用で初期値に戻されるため再指定 */
font-stretch: extra-expanded;
font-size-adjut: 0.58;
}
fontプロパティについては、他にもシステムフォントを指定する仕様がありますが、ここでの説明は割愛します。要するに、fontプロパティについてはルールがやや難しく、使いこなすうえでミスが生じやすいということです。
値のルール
ショートハンドプロパティには「必要な値を任意の順で指定する」ものがあります。書式を統一するために、これらの順序についても定めておくと良いでしょう。
border: [style] [width] [color]; list-style: [type] [image] [position]; background: [color] [image] [repeat] [position] [attachment];
また、値の単位についても、特にアクセシビリティに関する部分は規定しておくと良いでしょう。例えば、
サイズを可変にするため、font-sizeやline-height指定する場合は、emまたは「%値」を使う
というような例が挙げられます。
CSSハックのルール
CSSハックについては、本連載とは別の以前の記事「CSSハックで、クロスブラウザ対応のCSSを記述する」の中でも紹介していますが、使わないで済むのであれば、極力使用しない方が望ましいと言えます。しかしながら、クロスブラウザな表示を実現するという目的のためには、やむを得ないという現状もあります。
ブラウザはバージョンアップを繰り返しながら、Web標準完全準拠に向けて精度を上げていくはずですから、時代の流れと共に、その時の状況に合わせて柔軟に対応する必要があります。対応する必要が出てきたときになって慌てることのないように、まず、どのような方針でCSSハックを利用するのかを「CSSガイドライン」に明記しておきましょう。例えば「CSSの書式上、妥当なものを使用する」「他のブラウザに影響を与えない」などが挙げられます。さらに具体的に、
- どのブラウザのどのような不具合に対してどのようなCSSハックを適用しているのか
- どのCSSファイルのどこで、そのCSSハックを記述しているのか
といったことも明記しておくと良いでしょう。
