22nd
3 月
2007
CSSコードを組むにあたって知っておくべき10の知識
｢John Manoogian III｣で(The Only) Ten Things To Know About CSSというエントリーを見つけました。CSSコードを組むにあたって知っておくべき10の知識ということのようです。
- CSSを使用する意味：デザインをCSSで定義することでHTMLを簡潔なものに出来る。そして、ブラウザ、モバイルの両方に正常に表示させることができるというのが、CSSを使用する意義である。CSSは正しく定義される必要がありそれはかなり頭を悩ませることになる。
- 一般的な指定と特定の指定：たとえばh1を使うさいに#headerの中に書く際にこの#headerにidを指定し、このid内のh1であるタグのみに反映させたい場合、#header h1のスタイルを記述する。そうすれば、他のｈ1では一般的な指定のみ反映される。もしくはh1自身にidもしくはclassを指定してやる。
- 目標を得る：CSSが正しく反映されているか知るために、ターゲットのテキストを一旦赤字で書く。きちんと反映されていればこの赤字を除く。※赤は見つけやすい色だからだそうです。
- マスターパターンを決める：CSSを定義するのは大きなかばんの中身を配置することと同じです。ブラウザによって左右されないようにしましょう。オブジェクトをしっかり管理して平衡を保つようにしましょう。たとえば、中央表示をさせる場合、marginを指定することで平衡を保ちます。
- 推論：特定の座標を決めることで絶対的な位置を決めることができますが、これはしないほうがよいでしょう。レイアウトに時間がかかることと、今後デザインの変更があった場合それにともなって変更が必要になります。
- Rule A：divとspanはスタイルを設定する上で総括的な役目を果たします。
- Rule B：divはブロック要素、spanはインライン要素ということなので使用方法を間違えないようにしましょう。
- グローバルか、あるいはローカルか、もしくは内的に：3レベルにCSS特性を適用することができます。全てのページに単一のCSSを適応させたり、CSSを分割してそれぞれのページに個別に適応させたり、CSSを扱うことで開発が容易になります。
- 簡潔さを保とう：簡潔なHTMLを書くことは簡単です。ですが、CSSを簡潔で効率の良いコードで書くことは難しいです。効率の良いCSSはページのロード時間などにかかわる重要項目となります。fontやmarginの指定はまとめて1行で書く。同じ規則で書く。
- CSSハックは愚か：多くのチュートリアルがあり各ブラウザのハックの方法を知ることができますが、全く必要のないことです。
内容がかなり難しかったのでかなり意訳になってしまいましたので、気になる方は是非原文を読んでみてください。
