システム開発ブログ/ Webｺﾝｻﾙﾃｨﾝｸﾞ部　Yahoo!ブックマークに登録 Google ブックマーク はてなブックマーク Livedoorクリップ シェア

システム開発ブログ

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

最近の記事

カテゴリー

部署

月別アーカイブ

以前の部署別ブログ

検索

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

川本
川本 (2010年7月26日 18:57)
Webｺﾝｻﾙﾃｨﾝｸﾞ部 / Webサイト構築・Web戦略
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

「システム開発ブログ」へのコメントやご意見等ありましたら、 ファンページまでお願いします。  Facebook のファンページ

[PR]
Movable Typeを使用したWebサイト構築
Movable Typeを使用したWebサイト構築
お問い合せ・情報はこちらの電話番号におかけください：03-3232-2525　お問合せ・資料請求はこちらをクリックしてください
ページのトップ
システム開発・一括受託開発。見積依頼受付中

システム開発専用サイト

システム開発の流れ・手順、実績など。アイロベックスのシステム開発を紹介。

VB .NETを主言語としたWebアプリケーションの開発

要件分析から保守まで、お客様の現場での問題解決だけでなく、IT経営の援護者としてトータルソリューションサービスを提供しています。

MovableType を使ったウェブサイト構築

魅力あるウェブサイトデザイン、構成はもとよりMovableTypeを使用したウェブサイトの作成、JAVA、CGIによる注文フォームの作成等、ビジネスを強力にサポートします。

フォルダーアクセス権限確認ツール『AD-Folder』

Windowsフォルダーアクセス権限確認ツール

フォルダーアクセス権限を一目で確認。使用版を無償でご利用いただけます。

スクール運営を応援する講座情報管理システム『CMS+AD for School』

Webとリアルをつなぐコンテンツマネージメントシステム

Webサイト・モバイルサイト・チラシ（PDF）・カタログ（InDesign）を、簡単かつ正確に作成できます。

「システム開発ブログ」の更新情報をTwitterで。

Twitter公式アカウントに認定されています

「システム開発ブログ」の更新情報をTwitterで。ぜひ、フォローをお願いします。