画像を使わずにCSSのみで表現する方法があります。
<div style="background:red;color:white;width:200px;">
<div style="background:white">
<div style="background:red;margin: 0 5px;height:1px;overflow: hidden;">
</div>
<div style="background:red;margin: 0 3px;height:1px;overflow: hidden;">
</div>
<div style="background:red;margin: 0 2px;height:1px;overflow: hidden;">
</div>
<div style="background:red;margin: 0 1px;height:2px;overflow: hidden;">
</div>
</div>
<p style="padding:2px;">
本文本文本文本文本文本文本文本文本文本文<br />
本文本文本文本文本文本文本文本文本文本文
</p>
<div style="background:white">
<div style="background:red;margin: 0 5px;height:1px;overflow: hidden;">
</div>
<div style="background:red;margin: 0 3px;height:1px;overflow: hidden;">
</div>
<div style="background:red;margin: 0 2px;height:1px;overflow: hidden;">
</div>
<div style="background:red;margin: 0 1px;height:2px;overflow: hidden;">
</div>
</div>
</div>
2006/4/8 IEで正しく表示されないバグを修正(赤字が修正部分)
Browser View
本文本文本文本文本文本文本文本文本文本文
本文本文本文本文本文本文本文本文本文本文
でもこれだけでは芸がありません。
javascriptを使ってソースの中に余分なタグを極力書かないようにして
CSSで角丸を表現する方法がNifty Cornersで公開されています。
//角丸を付けたいdiv
<div id="nifty">
<p>
本文本文本文本文本文本文本文本文本文本文<br />
本文本文本文本文本文本文本文本文本文本文
<p>
</div>
//追加するjavascript
<script type="text/javascript" src="nifty.js"></script>
<script type="text/javascript">
Rounded("div#nifty","red","whte"); //Rounded(要素名, 背景色, 前景色)
</script>
//追加するCSS
.rtop, .rbottom{display:block}
.rtop *, .rbottom *{display: block; height: 1px; overflow: hidden}
.r1{margin: 0 5px}
.r2{margin: 0 3px}
.r3{margin: 0 2px}
.r4{margin: 0 1px; height: 2px}
つまりjavascriptファイルやcssファイルを外部化している場合
ソースコードのdivにidを付けるだけで角丸が実現できます。
すごく便利です。
是非普、及してほしいものです。
ちょっと、いやかなり尊敬しまうまよ。
いや、そんなことないですよ。
でも尊敬してくれるとありがたいです
すごく便利です。
Nifty Cornersさんのサイトはどうもリンク切れになってるみたいなので、その内js部分の解析もやってみたいと思っていますのでよろしくお願いします。
もはや画像を使った角丸テーブルは過去のものなんですね……。
リンク先のNifty cornerもとても参考になりました。
Nifty cornerが角丸を意味することも発見でした。
普及するのも時間の問題ですね。もう普及してるのかしら……。
web標準化やXHTMLの普及によりビジュアル表現にtableタグを使用するのはよろしくないとされています。
その為、まめぞうさんの言うとおり画像を使った角丸テーブルは過去の産物になってきていますね。
ただ、CSS3ではCSSで角丸を表現するプロパティーが盛り込まれる予定でもありますので、現在いろいろな所で開発されている角丸手法もやはりCSS3が実装されるまでも代替方法としての位置付けになると思います。
CSS3の実装まで後数年かかることから当分の間はjavascriptなどを使用したh表現はどんどん普及していくのじゃないかなと私は考えます。
他の角丸表現とかも特集していきたいと思ってますのでろしくお願いします。