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

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

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

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

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

ではサイトの紹介です。

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

roundedcorn1.jpg


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

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

roundedcorn2.jpg



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

roundedcorn3.jpg


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

roundedcorn7.jpg


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

roundedcorn4.jpgのサムネール画像


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

roundedcorn5.jpg

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

roundedcorn6.jpg

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

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

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




Trackbacks:0

TrackBack URL for this entry
http://webpersons.jp/mt/mt-tb.cgi/473
Listed below are links to weblogs that reference
角丸のHTML・CSSコードを生成してくれる「RoundedCornr」 from Web Persons [ウェブパーソンズ]|Web担当者向け情報サイト

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

サイト内検索
最近のエントリー
注目のキーワード
Feeds

ページTOPへ