javascriptとcssで角丸を表現する方法

このエントリーをはてなブックマークに追加

webサイト作成の際に手間になってくる角丸での表現ですが
画像を使わずに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 1px;height:2px;overflow: hidden;">
</div>
<div style="background:red;margin: 0 2px;height:1px;overflow: hidden;">
</div>
<div style="background:red;margin: 0 3px;height:1px;overflow: hidden;">
</div>
<div style="background:red;margin: 0 5px;height:1px;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を付けるだけで角丸が実現できます。

すごく便利です。
是非普、及してほしいものです。

関連エントリー

AjaxやJavaScriptのライブラリー
角丸javascriptライブラリ『curvyCorners』を使ってみる
XHTML+CSSに足りない5つのコト

スポンサードリンク

«最強のCSS編集ツール by Firefox | メイン | FireFox1.502リリース»

このエントリーのトラックバックURL
http://blog.webcreativepark.net/cgi/mt/mt-bt.cgi/1464
コメント

まんまさんすごい!
ちょっと、いやかなり尊敬しまうまよ。

投稿者:ぱんな | 2006年4月13日 14:31

>ぱんなさん
いや、そんなことないですよ。
でも尊敬してくれるとありがたいです

投稿者:西畑 | 2006年4月17日 14:36

始めまして。これはなかなか便利です!画像でわざわざ角丸にしていました。ありがたい〜。

投稿者:通りすがりです | 2006年4月20日 01:37

>通りすがりです
すごく便利です。
Nifty Cornersさんのサイトはどうもリンク切れになってるみたいなので、その内js部分の解析もやってみたいと思っていますのでよろしくお願いします。

投稿者:西畑 | 2006年4月27日 02:32

CSS 角丸テーブルで検索してきました。

もはや画像を使った角丸テーブルは過去のものなんですね……。

リンク先のNifty cornerもとても参考になりました。
Nifty cornerが角丸を意味することも発見でした。
普及するのも時間の問題ですね。もう普及してるのかしら……。

投稿者:まめぞう | 2006年4月29日 03:22

>まめぞう
web標準化やXHTMLの普及によりビジュアル表現にtableタグを使用するのはよろしくないとされています。

その為、まめぞうさんの言うとおり画像を使った角丸テーブルは過去の産物になってきていますね。

ただ、CSS3ではCSSで角丸を表現するプロパティーが盛り込まれる予定でもありますので、現在いろいろな所で開発されている角丸手法もやはりCSS3が実装されるまでも代替方法としての位置付けになると思います。

CSS3の実装まで後数年かかることから当分の間はjavascriptなどを使用したh表現はどんどん普及していくのじゃないかなと私は考えます。

他の角丸表現とかも特集していきたいと思ってますのでろしくお願いします。

投稿者:西畑 | 2006年4月29日 19:27

ども、はじめまして何時も為になる情報有難うございます。
>画像を使わずにCSSのみで表現する方法があります。
ブラウザをIE6でテストしてみたのですが
このソースで打ち込んでも左右下2スミが角丸にならなず
左右下2スミが”逆角丸”で表示されるのは私だけでしょうか?

初心者ですので、可笑しなことを言っていたらすいません。

投稿者:年末もホームラン王 | 2007年12月31日 20:26

>年末もホームラン王さん

ご指摘ありがとうございます。
サンプルコードに一部、ミスがありました。
修正したものに変更しておりますので。

投稿者:西畑一馬 | 2008年1月 4日 17:59
コメントを投稿