画像なしで角を丸くするCSSテク: Nifty Corners

2005年03月17日

普通は「画像 + DIV要素を入れ子 or TABLE」で無理矢理実現させる角が丸いボックス要素を、一切画像を使わずにCSSだけで実現する手法が紹介されててちょっと感動したので実験。その名も Nifty Corners 。

このテクを使うと、このように、角が丸く表示されます。画像は一切使っていません。

タグ打ちが死ぬほど複雑＆面倒臭いが、同ページで紹介されているJavaScriptを使えば、適用する対象のブロック要素の名前と背景色・前面色を指定するだけでタグを自動生成してくれる。これは便利かも。

中身のないインライン要素（<b>）を大量に使っていてW3C的にアウトだからこのサイトでは多分使わないけど、どっかで使えるかもだから覚えておこう。

この記事に関連する記事を書かれた方は気軽にトラバって下さい。
Trackback URL: http://www.playnote.net/mt/mt-tb.cgi/390

角を丸めたいのは分かるが（『適宜覚書』）: MMやはてなブックマークでNifty Corners: rounded corners without imagesやCSSで角を丸くするや画像なしで角を丸くするCSSテク: Nifty Cornersが随分取り上げられている。「へえ、Mozilla独自実装のことを今更取り上げているのか？」と思って暫く無視していたのだが、「...（2005年03月19日 09:46）
[IT]CSSで角が丸いWEB要素を作る（『informal blog - IT,メンタル,思想,雑記』）: http://www.playnote.net/archives/000392.html WEBデザイナーって角が丸いデザインが好きだねえ。俺も好きだ。「丸い！　丸いよ、母さん！」と叫びたくなるぐらい、サンプル見て感動したよ。たかだか角が丸いだけで。...（2005年03月21日 18:33）
四隅コーナーを丸くする　JavaScript　＋CSS （『ゆうすけブログ（Yahoo!版）』）: ウェブページ内で「角の丸い矩形の中に文字を書く」ために、四隅に画像（主に透過ＧＩＦファイル）を配置するテクニックは１０年近く前から使われてきたけど、今では、画像を使わずに角を丸くできるのね。例）　http://pro.html.it/esempio/nifty/nifty8js.html 使...（2005年03月22日 10:29）