CSSフレームワーク
CSS Niteビギナーズ東京版の最後の質疑応答にて話題に上ったCSSのフレームワークについて補足いたします。
参考記事
Blueprint
参考記事
emastic
参考記事
* 複雑なCSSレイアウトもサクッと実装できるCSSフレームワーク「emastic」:phpspot開発日誌
YUI Grids CSS
参考記事
CSS Niteビギナーズ東京版の最後の質疑応答にて話題に上ったCSSのフレームワークについて補足いたします。
参考記事
参考記事
参考記事
* 複雑なCSSレイアウトもサクッと実装できるCSSフレームワーク「emastic」:phpspot開発日誌
参考記事
IE 6には「フロートした要素にマージンを指定すると、フロート方向のマージンが倍近くに増加する」というバグが存在します。
そのため、横並びにしたふたつのボックス間のマージンが広がってしまったり、並ばずに「落ちてしまう」ことがあります。
次のふたつのような対処法がありますので、状況によって使い分けましょう。
ブラウザがサポートしていないセレクタを使用すると、当然、スタイルが反映されません。特にInternet Explorer(以下、IE)7と6は次のセレクタをサポートしていないため、注意が必要です。
| IE 7がサポートしていないセレクタ | IE 6がサポートしていないセレクタ |
| :focus :lang() :before :after |
:focus :lang() :before :after |
| E > F(子セレクタ) E + F(隣接セレクタ) E[attr] E[attr="value"] E[attr|="value"] E[attr~="value"] :first-child |
CSSでスタイルを設定する際には、セレクタの「詳細度」を意識することが大切です。ユニバーサルセレクタは影響せず、タイプセレクタ(要素名)よりもクラスセレクタや属性セレクタが、さらにIDセレクタが優先される、というのが詳細度のルールです(p.078)。指定したスタイルがうまく適用されない問題は、すでに指定されているスタイルの詳細度が高いことが原因になっていることが多いものです。
CSS Niteビギナーズ(の内容)、および、『現場のプロから学ぶXHTML+CSS』に関するご質問などがありましたら、こちらにポストしてください。
追記:コメントへの返信の際、「敬称飛ばし」になってしまっており、申し訳ありません。ご容赦ください。