前回のトレーニングでBLOCKQUOTEを再定義することで飾りの枠囲いができました。
すごく便利なのですが、状況に応じてデザインを使い分けることはできないのでしょうか。
たとえば、催し物の案内にはカラフルな点線の枠囲いで、重要な書き込みの時は実線の枠囲いでというように使い分けができるととても便利です。
CSSの書式はセレクターと中カッコで囲われた宣言から成り立っています。
BLOCKQUOTEのバリエーションを作るには、
BLOCKQUOTE.a01{
・・・・・・・・
・・・・・・・・
}
BLOCKQUOTE.a02{
・・・・・・・・
・・・・・・・・
}
のように定義し呼び出す時は、
<BLOCKQUOTE class=a01>お知らせの場合</BLOCKQUOTE>
や
<BLOCKQUOTE class=a02>重要な書き込みの場合</BLOCKQUOTE>
のように記述します。
前回のカラフルなBLOCKQUOTEを次のように書き直してみましょう。
BLOCKQUOTE.a01
エンジ色の点線でピンクの背景色を囲う(前回と同じ)
BLOCKQUOTE.a02
枠線 黒の実線で1px
背景色 薄い緑色(#F0FFF0)
外余白 上下10px、左右20px
内余白 10px
BLOCKQUOTE.a01 {
margin: 10px 20px 10px 20px;
padding: 10px;
border: 6px dotted #CC0000;
background: #FFF0F5;
}
BLOCKQUOTE.a02 {
margin: 10px 20px 10px 20px;
padding: 10px;
border: 1px soloid #000000;
background: #F0FFF0;
}