システム開発ブログ

Webコンサルティング部

Webサイト構築・Web戦略

CSS3で画像を使用せずに角丸を実装する

CSS3を使用し、画像を使用せずに角丸を実装するCSSを紹介します。

この方法は(2010年7月26日現在)、Internet ExplorerやOperaでは角丸にはなりません。
しかしその場合、角丸の部分は、普通の四角として表示されるだけですので、使っても特に不具合は起きません。
将来的には、すべてのブラウザで角丸が表示できるようになるでしょう。

まず、通常のHTMLのソースです。
任意のテキストや画像を入力。
次に、CSSのソースです。(角丸の半径を10ピクセルにする場合)

CSSを使用した角丸には『border-radius』プロパティを使用し、また、各ブラウザ用の拡張機能を加えます。
div.kadomaru {
   border-radius: 10px;         /* CSS3 */
   -moz-border-radius: 10px;    /* Firefox */
   -webkit-border-radius: 10px; /* Safari,Chrome */

   border: 1px solid #333333;   /* 枠線の装飾 */
   background-color: #ffffff;   /* 背景色 */
   width: 500px;                /* 以下任意のCSS */
   padding: 10px;
}
プレビュー
(Firefox,Safari,Chromeに対応)

デザイン的に自由が効きやすいのは、やはり画像を使用した角丸ですが、

●画像を使用してコーディングするのが面倒
●角丸のデザインを変更しやすくしたい(角丸の半径の大きさ等)
●ブラウザによって見え方が違っても良い

という場合にはこの方法を使用しても良いかもしれません。



以下の記事を参考にさせていただきました。

●スタイルシートを使用する方法
http://allabout.co.jp/internet/hpcreate/closeup/CU20090723A/index2.htm

システム周りのお悩みを解決します

まずは無料ダウンロード

この記事に関連する記事の一覧


システム開発ブログ

Twitterでilovex_officialをフォローしてください

カテゴリー

以前の部署別ブログ

ページのトップ