Home > Web制作 > 角丸のHTML・CSSコードを生成してくれる「RoundedCornr」

角丸のHTML・CSSコードを生成してくれる「RoundedCornr」

Posted by: WebPersons編集部
2008年4月25日 13:31
Web制作

皆さんはwebページのテーブルはどのように作成しているでしょうか。
特に「テーブルの角を丸くしたい」時などはそれぞれ角丸になっている画像を作成したりととてもに面倒だったりしますよね。

そんなときに便利なのが今回紹介する「RoundedCornr」です。
このサイトは角の半径や背景色などを入力してボタンを押すだけで必要になるHTMLコードやCSSコード、そのテーブルに必要な画像までを自動で生成してくれます。

ではサイトの紹介です。

サイトにアクセスします。

3つあるサンプルから好きなデザインを選んで必要な項目に入力します。
今回は線の付いたものを作ってみます。

本当に簡単で、入力部分に設定内容を入力し「Create RoundedCornr」をクリックします。

各入力項目こちらを参考に入力して下さい。

このようにサンプルが表示されます。

このサンプルのテーブルで良ければサンプル下に表示されているHTMLのコードやCSSのコードが生成されるのでコピーして保存してください。

テーブルに必要な画像も最下部からダウンロード出来ますので画像も保存します。

他にもシンプルなテーブルとグラデーションの付いたテーブルを生成する事が出来ます。
これでHTMLコードやCSSコードに関しての説明は終わりですが、トップページ最下部には角丸の画像を自動生成してくれる機能もあります。

こちらも使い方は簡単で画像の高さや幅、色などを指定して「Create RoundedCornr」をクリックするだけで角丸の画像を作成してくれます。

Top Left 、Top Right、Bottom Left、Bottom Rightと四つの角を指定できるのでメニュータブのような画像を作る事も出来るので重宝します。

基本的に色と大きさを指定するだけでもいろいろ作れるので「RoundedCornr」をぜひ一度つかってみて下さい。