人気ブログランキング | 話題のタグを見る

ブログ活用のヒントを満載
by vlsasaki2
S M T W T F S
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31

CSSのトレーニング(11)・BLOCKQUOTE再定義のバリエーション
前回のトレーニングでBLOCKQUOTEを再定義することで飾りの枠囲いができました。
すごく便利なのですが、状況に応じてデザインを使い分けることはできないのでしょうか。
たとえば、催し物の案内にはカラフルな点線の枠囲いで、重要な書き込みの時は実線の枠囲いでというように使い分けができるととても便利です。
CSSの書式はセレクターと中カッコで囲われた宣言から成り立っています。
CSSのトレーニング(11)・BLOCKQUOTE再定義のバリエーション_a0034054_16562317.gif

BLOCKQUOTEのバリエーションを作るには、
BLOCKQUOTE.a01{
        ・・・・・・・・
        ・・・・・・・・
        }

BLOCKQUOTE.a02{
        ・・・・・・・・
        ・・・・・・・・
        }

のように定義し呼び出す時は、
<BLOCKQUOTE class=a01>お知らせの場合</BLOCKQUOTE>

<BLOCKQUOTE class=a02>重要な書き込みの場合</BLOCKQUOTE>
のように記述します。

前回のカラフルなBLOCKQUOTEを次のように書き直してみましょう。
BLOCKQUOTE.a01
        エンジ色の点線でピンクの背景色を囲う(前回と同じ)
CSSのトレーニング(11)・BLOCKQUOTE再定義のバリエーション_a0034054_1739743.gif

BLOCKQUOTE.a02
        枠線 黒の実線で1px
        背景色 薄い緑色(#F0FFF0)
        外余白 上下10px、左右20px
        内余白 10px
CSSのトレーニング(11)・BLOCKQUOTE再定義のバリエーション_a0034054_17395525.gif
 



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;
        }

by vlsasaki2 | 2004-10-02 16:50 | CSSのトレーニング Top↑
<< CSSのトレーニング(12)・... ダイハード >>