２つのクラスを同時に適用させバリエーションを作る方法

動画講座で、２つのクラスを同時に適用させてバリエーションを作る例をやってみました。

背景画像を使った見出し（DreamweaverでCSS）



例で作ったのは見出し５パターンなので、本来ならh2などでマークアップすると思いますが
クラスを２つ適用させてバリエーションを作ってみる見本ということで
div.midasiというクラスにしてみました。
見出しとしてマークアップする場合は
h2 class="green"
になるわけです。
同じパターンのボックスで、一部の要素にバリエーションをつけたい場合
div class"box2 green"
div class"box2 pink"
div class"box2 yellow"
みたいにして、複数のクラスを同時に指定することができます。


ソースはこちら
――――――――――――――――――――――――――――――――――
（CSS）

body{margin:40px;}
.midasi{
width:400px;
padding:2px;
margin:20px 0px;
font-size:16px;
font-weight:bold;
text-align:center;
}
.green{background:url(img2/green.gif) repeat-x;}
.pink{background:url(img2/pink.gif) repeat-x;}
.blue{background:url(img2/blue.gif) repeat-x;}
.orange{background:url(img2/orange.gif) repeat-x;}
.purple{background:url(img2/purple.gif) repeat-x;}

――――――――――――――――――――――――――――――――――
（HTML）

<div class="midasi green">イタリアン</div>
<div class="midasi pink">和食</div>
<div class="midasi blue">中華</div>
<div class="midasi orange">焼肉・韓国料理</div>
<div class="midasi purple">居酒屋・ダイニング</div>
――――――――――――――――――――――――――――――――――
背景で使用した画像の一つはこちら

これを変更して５色のバリエーションを作ってみました。

作例はこちら
京橋タウンガイド
こちらの見出しでこの画像を使っています。見てみてください。

このサイトはxoopsで制作しています。
URLの静的生成と正しいマークアップでseo対策済み。
xoopsサイトの型にはまったデザインを一新して、オールCSSコーディング。
今風のテイストに変えてしまってますので、そのへんも見てくれると嬉しいなぁ～。。。。
オールCSSにしてあることで、携帯表示にも対応できるというわけです。

xoopsを使った様々なポータルサイトの構築も受けていますのでお気軽にご相談ください。
デザイン：webの森
協力／xoopsシステム構築：A-XYZ