2006年04月07日

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 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を付けるだけで角丸が実現できます。

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

posted by ねこまんま at 01:19
Comment(6) | TrackBack(1) | JavaScript
この記事へのコメント
まんまさんすごい!
ちょっと、いやかなり尊敬しまうまよ。
Posted by ぱんな at 2006年04月13日 14:31
>ぱんなさん
いや、そんなことないですよ。
でも尊敬してくれるとありがたいです
Posted by ねこまんま at 2006年04月17日 14:36
始めまして。これはなかなか便利です!画像でわざわざ角丸にしていました。ありがたい〜。
Posted by 通りすがりです at 2006年04月20日 01:37
>通りすがりです
すごく便利です。
Nifty Cornersさんのサイトはどうもリンク切れになってるみたいなので、その内js部分の解析もやってみたいと思っていますのでよろしくお願いします。
Posted by ねこまんま at 2006年04月27日 02:32
CSS 角丸テーブルで検索してきました。

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

リンク先のNifty cornerもとても参考になりました。
Nifty cornerが角丸を意味することも発見でした。
普及するのも時間の問題ですね。もう普及してるのかしら……。
Posted by まめぞう at 2006年04月29日 03:22
>まめぞう
web標準化やXHTMLの普及によりビジュアル表現にtableタグを使用するのはよろしくないとされています。

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

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

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

他の角丸表現とかも特集していきたいと思ってますのでろしくお願いします。
Posted by ねこまんま at 2006年04月29日 19:27
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

※半角英数字のみのコメントは投稿できません。

この記事へのトラックバック

やっぱり時代は丸カド♪
Excerpt: Ploneプロダクト「Plone Nifty Corners」をインストールして、カドを丸くしてみました。 Plone Nifty Corners ? plone.orghttp://plone.o..
Weblog: Triconf Blog
Tracked: 2006-05-25 20:55