四角を描く

今回のテクニックは非常に単純で、四角を描く。それだけです。 文法的にはあまり好ましい使い方ではないので、使いたい人だけどうぞ。

テクニック使用後

ソースとしては、widthとheightを指定しただけです。

スタイルシート
div.box{
    background-color:#CCCCFF;
    width:200px;
    height:100px;
}

HTML
<div class="box"></div>

非常に単純ですね。デザインのアクセントなどにお使いください。

---

使いこなすための＋α

今回のテクニックは単体ではほとんど役に立ちませんが、positionやz-indexなどの他のテクニックを組み合わせると、 いろいろと応用できます。

ボックスは、使われている文字サイズ以上の幅を作ろうとするので、 幅の細いものを作るときは「overflow:hidden;」を設定してあげてください。

使いすぎは、ソースが複雑になるので避けたほうがいいと思います。

---