CSS Nite in OSAKA ザ・ルールズ・オブ・スタイルシート by 益子貴寛
ついにCSS Nite が大阪に上陸しちゃいました。
以下のような内容でした。
まずは益子貴寛さんのセッションから
(もうすぐCSS Nite公式ブログで当日の資料/セミナー内容のポッドキャスティングを公開するらしいので興味がある方、詳しい内容が知りたい方はそちらをご覧ください。)
ザ・ルールズ・オブ・スタイルシート by 益子貴寛
CSS NiteなんでCSSネタをと始まった『カニの貴公子』のセッションです。
「プログラムとはコンピュータへの命令ではなく、コンピューターに何をしてほしいか、人に説明することだ」という有名なプログラマの言葉を引用し「CSSもそうあるべきではないか」と始まりました。
まずはCSSの基本ルールの再確認。
- スタイルの特殊性がカスケーディングより優先されるます
- ボックスタイプの領域について再確認
- 要素間の上下マージンの相殺
- min-/max-width/heightの矛盾
- font-sizeとline-heightについて
- baselineとbottomの違い
- displayとvisibility
- img要素の文字色、背景の意味
などの説明。
min-/max-width/heightはIE6が対応してないので、普段使わないですがIE7で対応している為これから使ってい
かないといけないですね。
line-heightを行間と説明しているのは間違いとの指摘も印象的でした。ついつい「line-heightで行間空けて」とか注文してしまうところです。
次はテクニックとして
- positionの説明
- floatと親ボックスの高さの問題
positionはあんまり使わないほうがいいのでないかとのこと。
個人的にはpositionは好きで多用するんですけど・・・
興味がある方はpositionプロパティの考察を参考にしてください。
floatと親ボックスの高さの問題はoverflow:autoを使って解決する方法が書かれています。
Web creators 2006年 12月号で書かれてた『すぐ使えるCSSデザインテクニック』のネタですね。
僕もこれを見たときは衝撃でした。
次はCSS2 vs CSS2.1と題して
CSS2からCSS2.1への変更点がまとめられてます。
そして本題『ザ・ルールズ・オブ・スタイルシート 』へ
- ザ・ルールズ・オブ・セレクタ
- id/class名はわかりやすく
- d/classには要素名を
- 原則id / 例外class
- 区切り記号の統一
- id/classより子孫セレクタ
- 子孫セレクタはわかりやすく
- セレクタは見やすくグループ化く
- 擬似クラスはLV(F)HAの順で
- ザ・ルールズ・オブ・プロパティ
- プロパティは1行ごとに
- プロパティの順序を明確に
- ショートハンドは節度を持って
- 前景色と背景色はなるべくセットで
- font-fmailyでは必ず一般ファミリー名で
- floatにはwidthをセットで
- ザ・ルールズ・オブ・値
- プロパティごとに値を決めておく
- 0には単位をつけない
- urlパスを決めておく
- 色の指定方法を決めておく
- ザ・ルールズ・オブ・構成
- CSSは外部ファイル化する
- すべての外部CSSに@キャラセット
- ブラウザスタイルを初期化しておく
- 主要インターフェース名を決めておく
- コンテナ名を決めておく
- コメントを有効活用する
- ザ・ルールズ・オブ・確認
- まずはcssサポートのよいブラウザで確認
- バリデーションは必ず行う
- CSSカット時をチェックする
- DDTTを実地する
- ザ・ルールズ・オブ・CSSハック
- CSSハックの前にバリデーションを
- まずセレクタ/プロパティの工夫を
- なるべく構文的に問題をないハックを
- できればターゲットブラウザの絞込みを
意外と羅列されると守れてないルールもありますね。
『プロパティの順序を明確に』などは早い目に自分ルールを確立しておかないと後々の自分の作業の首を絞めてる感じがします。
『色の指定方法を決めておく』などは結構しっかりした自分ルールがあり『基本はキーワード』というルールがあります。
でもデザインする際にはRGB(キーワードが対応してないカラー)になるのが多いですね。
ただキーワードはレンダリングを行わなくても直感的に色が予想できるので愛用しています。
コメントは
/*
header
----------------------*/
と記述します。(益子さんに西畑式とか名付けられてしまいましたが)
鷹野さんもこの方法で記述されますね。
この記述の可読性の高さは自信を持ってお勧めできます。
基本の職業がプログラマーなので『読みやすいコメント』というのは命題でもありますから。
興味がある方はもうすぐ公開される資料とポッドキャスティングでお楽しみください。
次回は長谷川恭久さんのエコなWebデザイナーになろう。をエントリーします。
関連エントリー
web標準の日
CSS Nite in OSAKA
CSS Nite inOSAKA 前夜祭 in Apple Store 心斎橋
CSS Nite in OSAKA エコなWebデザイナーになろう by 長谷川恭久
CSS Nite in OSAKA Dreamweaverの作業効率を高める小技30発 by 鷹野雅弘
スポンサードリンク
«CSS Nite inOSAKA 前夜祭 in Apple Store 心斎橋 | メイン | javascriptで文字にドロップシャドウをつける方法»