サポートブログ

CSSフレームワーク

CSS Niteビギナーズ東京版の最後の質疑応答にて話題に上ったCSSのフレームワークについて補足いたします。

参考記事

Blueprint

参考記事

emastic

参考記事

* 複雑なCSSレイアウトもサクッと実装できるCSSフレームワーク「emastic」:phpspot開発日誌

YUI Grids CSS

参考記事

フロートしたはずの要素が横並びにならない(IE 6)

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』に関するご質問

CSS Niteビギナーズ(の内容)、および、『現場のプロから学ぶXHTML+CSS』に関するご質問などがありましたら、こちらにポストしてください。

追記:コメントへの返信の際、「敬称飛ばし」になってしまっており、申し訳ありません。ご容赦ください。

9章「トラブルシューティング」サンプルファイル(4)

フロートした要素の親要素の背景が表示されない(p.284)

短いページでは縦スクロールバーが表示されない(p.285)

ズーム時にレイアウト崩れが発生する(IE 7)(p.288)

上記のデータをまとめてダウンロード

9章「トラブルシューティング」サンプルファイル(3)

透過PNGが透過されない(IE 6):9-3 文字色と背景のトラブル

長い英数字や記号、URLを含めるとテーブルセルが広がってしまう:9-6 テーブルのトラブル

フォームパーツが適切な位置に配置されない(IE 6/7):9-7 フォームのトラブル

フォームパーツにフォーカスしたときに背景色が変わらない(IE 6/7)

jQueryで解決する方法


このページの上部に戻る