XHTMLソース
<body class="groupA"> … </body>
CSSソース
.groupA {
background: #F00 url(img/bg.gif);
}
.groupB {
background: #0F0 url(img/bg.gif);
}
.groupC {
background: #00F url(img/bg.gif);
}
法則78 透過gif画像を利用してカラーバリエーションを作る
第5章 実践的なCSSデザインの法則 一覧
- 法則71 Webブラウザのデフォルトスタイルをリセットする
- 法則72 1行テキストの上下中央配置にはline-heightプロパティを使用する
- 法則73 画像の下の余白はvertical-alignプロパティで解消する
- 法則74 字下げとぶら下がりはCSSでコントロールする
- 法則75 文字サイズを変更してもテキストが重ならないようにする
- 法則76 定義リストを横並びにしてスマートに見せる
- 法則77 リストの横並びはインラインとして実現する
- 法則78 透過gif画像を利用してカラーバリエーションを作る
- 法則79 背景画像を指定してimg要素の見栄えをよくする
- 法則80 JavaScriptを使わずにロールオーバー時の画像拡大効果を再現する
- 法則81 ステッカーを貼ってプロモーション効果を高める
- 法則82 スクロールバー領域を常に確保してセンタリング位置のズレを避ける
- 法則83 角丸の背景は最低限の要素で実現する
- 法則84 未対応セレクタも状況により使用してかまわない
- 法則85 CSS3セレクタを使用してスマートなCSS を記述する
