「いちいち画像でかっちょいいの作るのは面倒だけど、少しくらい外見を気にしたい」ってとき使ってください。

1 画像を使わないでシンプルな枠を作るXHTML+CSS

dl.nsflame {padding:5px; margin:0; display:block; background:#000; border:1px solid #aaa;}
dl.nsflame dt {padding:0 0 5px 0; margin:0; display:block; color:#fff;}
dl.nsflame dd {padding:10px; margin:0; border:1px solid #aaa; display:block; background:#fff;}
dl.nsflame span.fig {padding:1px 2px; color:#fff; background:#c00; font:bold 9px Verdana;}

CSSソース
dl.nsflame {padding:5px; margin:0; display:block; background:#000; border:1px solid #aaa;} dl.nsflame dt {padding:0 4px 5px 5px; margin:0; display:block; color:#fff;} dl.nsflame dd {padding:10px; margin:0; border:1px solid #aaa; display:block; background:#fff;} dl.nsflame span.fig {padding:1px 2px; color:#fff; background:#c00; font:bold 9px Verdana;}
HTMLソース
<dl class="nsflame"> <dt><span class="fig">1</span> 画像を使わないでシンプルな枠を作るXHTML+CSS</dt> <dd> dl.nsflame {padding:0; margin:0; border:1px solid #aaa;} dl.nsflame dt {padding:5px 4px; background:#;} dl.nsflame dd {padding:10px;} dl.nsflame span.fig {padding:2px 3px; color:#fff; background:#c00;} </dd> </dl>
色々カスタマイズしてみてください。

• タグ
• CSS
• HTML
• 枠