CSS 利用テクニック
CSSの本領は、デザインとコンテンツの分離です。
デザインとコンテンツを分離することで、変更に対する柔軟性が格段に上がり、総じて品質アップにも繋がります。
しかし、デザインを良いCSSとして書き出すには、多少なりとも経験がなくてはいけません。その作業は、プログラミング（オブジェクト指向のクラス設計など）にも通じるものがあります。
本稿では、CSSで抑えておくべき基本的・応用的な事柄をまとめてみました。
目次
- セレクタは全て暗記
- スタイルは細かい単位でクラスとしてまとめる
- 階層セレクタを有効に活用する
- display特性の理解
- inline
- block
- inline-block
- table関連
セレクタは全て暗記
まず第一歩として、CSSセレクタの全貌を把握し、手早く記述できるよう、暗記しておくようにしましょう。
全てのクラスに適用
* { color : red; }
タグに適用
タグ名 { color : red; }
IDに適用
#ID名 { color : red }
クラスに適用
.クラス名 { color : red }
属性に適用
[attribute=value] { color : red }
直系の子要素に適用
parent > child { color : red }
子孫要素に適用
parent child { color : red }
隣接要素に適用
parent + sibiling { color : red }
以上に示したセレクタは、IEでいうと、ver7以上およびモダンブラウザなら問題なく利用できるようです。
スタイルは細かい単位でクラス化する
低レベルなAPIほど、ラッパーメソッドとして括っておくと、何かと便利なことが多いです。
それと同じように、スタイルは細かい単位でクラス化しておくと利便性が向上します。
例えば、WEB上の入力項目などで、特定のデータ型に紐づくような項目には、CSSクラスとして名前を付けましょう。スタイルとして定義するものがなくとも、とりあえずクラス化しておくことが重要です。
/* 数値 */
.integer {}
/* 小数点数値 */
.numeric {}
/* 金額 */
.money {}
/* 郵便番号 */
.zip {}
/* 電話番号 */
.tel {}
/* メールアドレス */
.mailaddr {}
/* URL */
.url {}
/* フリーテキスト */
.freetext {}
/* 日付 */
.date {}
/* 時刻 */
.time {}
例えば、数値や金額は右揃えにすることが多いです。また、IMEをオフにするという制御も仕様として求められることがあるかもしれません。
そんな事が、開発の後半になって発覚することも間々あります。しかし、あらかじめ特定の項目にスタイル名を付けて置く事で、以下のように影響範囲を最小化して、容易な変更が可能になります。
/* 数値 */
.integer {
text-align: right;
ime-mode: disabled;
}
また、そのように、細かくCSSクラスをつけておけば、JavaScriptと連動させてフォーカスアウト時に動的にフォーマットを実施する、なんてことも可能です。
階層セレクタを有効に活用する
階層セレクタを使うと、セレクタにマッチする複数のタグにスタイルを適用することができます。
例えば、tableタグのように階層構造が明確であればあるほど、階層セレクタは大きな効果を発揮します。
以下のように書くことで、class=”my”が付与されたtableタグにスタイルを適用する事ができます。
table.my {
border : 1px solid silver;
}
table.my tr {
background-color: green;
}
table.my th {
text-align: center;
}
table.my td {
text-align: left;
}
たまに、全てのtdにclassを付与して、スタイルを整えるコードを見かける事がありますが、それはNGパターンと言えます。
ある特定の表現でスタイルが決まるということは、特定の階層でスタイルが決定していると言い換えることができます。すなわち、階層セレクタで表現できるスタイルが、そこにはあるということになります。
スタイルを定義する際には、とにもかくにもスタイル表現を汎用化して考えることが重要です。
display特性の理解
displayとは、CSSスタイルのプロパティの一つで、タグ要素の領域を決定する、重要な要因の一つです。
inline
inlineは、簡単に言うと文字の固まりです。ただし、行全体を表すものではありません。inlineの特性として、widthやheightを設定することができません。inlineがデフォルト値になっている代表的なタグとしてspanが挙げられます。
block
blockは、行全体を表します。widthは自動で親要素に対して、100%になるように調整されます。heightは、特に指定しない限り、block要素内のコンテンツのサイズに依存します。displayがデフォルト値になっている代表的なタグとしてdivが挙げられます。
inline-block
inline-blockは、inlineとblockを合わせた複合的な要素です。widthとheightを明示的に指定することができます。inline-blockがデフォルト値になっている代表的なタグとしてinputが挙げられます。
