CSSで角丸ボックス、の再考
：
：2010.01.16
：
：0件
CSSで角丸ボックスを作る時はボックスの上下に角丸にした画像をCSSで背景にして配置していますが、自分の今までのやり方は、
HTML:
としていました。この方法だとHTML-Lintで、「<div>~</div>の中に要素がありません」と怒られてしまう。表示上問題ないので今までほかっておいたんですが、そろそろ気持ち悪くなってきたのでちょっと考えてみました。要は要素が何か入っていればいいと。
以下のようにblockTopの中にblockBtmを入れ子にし、blockMidは削除。
CSSはこんな感じ。
CSS:
-
.blockTop {
-
padding-top:10px;
-
width:200px;
-
background:url(block_top.gif) no-repeat;
-
}
-
-
.blockBtm {
-
padding-bottom:10px;
-
width:200px;
-
background:#D20000 url(block_btm.gif) no-repeat left bottom;
◆サンプル
角丸ブロックです。
ソースも少しすっきり。
ソースも少しすっきり。
このやり方、きっと既出でしょうね。blockMidがいらなくなるので多少ソースもすっきりします。もっと早く気がつけばね〜。
CSSだけでなく、角丸ボックスにはいろいろな方法があるようで試してはいませんが、角丸ボックス・吹き出し：php & javascript roomにいろいろと載っています。
コメント/トラックバック
トラックバックURL
この投稿へのコメント/トラックバックはありません。
コメントする