マーカーネット株式会社

WEB制作ブログ WEBデザイン、HTMLコーディング、PHP、スマートフォン制作などWEB制作全般に役立つ情報を発信していきます。

CSS WEB制作

角丸のコーディングは大変?CSS3で簡単に角丸を再現する方法!

投稿日:2014年7月8日 更新日:

今まで角丸のデザインにするには画像を背景に設定したりしていましたが、
幅や高さが変わるとそれに沿った画像を作成しなくてはならない場合があります。

それだと効率も悪く、修正もしづらいためコーディングが大変です。
スマホなどで画面を横にした場合にも伸ばすのは難しいです。

でも、角丸をCSS3で作成すれば横など気にしなくても大丈夫です。
しかも、各角ごとに角度を設定できるので、応用が利きます。

これを使用すればコーディングの幅が広がると思いますので、
角丸をCSS3で再現する方法をお教えいたします。

まず、角丸に設定したいタグにCSSで下記のように設定してください。

border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;

「border-radius」の前にベンダープレフィックスが付いています。
ベンダープレフィックスは各ブラウザで違う場合があります。
これを付けないと効かない場合がありますので、ご注意ください。
下記がそれぞれの主要ブラウザのベンダープレフィックスです。

—————————————————-
-webkit- : Safari,Google Chrome用です。
-moz- : Firefox用です。
-ms- : Internet Explorer用です。
-o- : Opera用です。
-khtml- : KHTMLを利用したウェブブラウザ用です。
—————————————————-

下記のように個々に指定する方法もあります。

border-radius: 10px 20px 30px 40px / 10px 20px 30px 40px;
-webkit-border-radius: 10px 20px 30px 40px / 10px 20px 30px 40px;
-khtml-border-radius: 10px 20px 30px 40px / 10px 20px 30px 40px;
-moz-border-radius: 10px 20px 30px 40px / 10px 20px 30px 40px;
-ms-border-radius: 10px 20px 30px 40px / 10px 20px 30px 40px;
-o-border-radius: 10px 20px 30px 40px / 10px 20px 30px 40px;

水平方向の 左上、右上、右下、左下 / 垂直方向の 左上、右上、右下、左下
の順で指定しています。
下記はさらに個別に指定しています。

/* 標準 */
border-top-left-radius: 10px;
border-top-right-radius: 20px;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 40px;
/* Safari,Google Chrome用 */
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 20px;
-webkit-border-bottom-right-radius: 30px;
-webkit-border-bottom-left-radius: 40px;
/* Firefox用 */
-moz-border-top-left-radius: 10px;
-moz-border-top-right-radius: 20px;
-moz-border-bottom-right-radius: 30px;
-moz-border-bottom-left-radius: 40px;
/* Internet Explorer用 */
-ms-border-top-left-radius: 10px;
-ms-border-top-right-radius: 20px;
-ms-border-bottom-right-radius: 30px;
-ms-border-bottom-left-radius: 40px;
/* Opera用 */
-o-border-top-left-radius: 10px;
-o-border-top-right-radius: 20px;
-o-border-bottom-right-radius: 30px;
-o-border-bottom-left-radius: 40px;
/* khtml用 */
-khtml-border-top-left-radius: 10px;
-khtml-border-top-right-radius: 20px;
-khtml-border-bottom-right-radius: 30px;
-khtml-border-bottom-left-radius: 40px;

これを駆使すればレスポンシブなどでも活躍できます!
一度使ってみるととても簡単なので、是非ご活用頂ければと思います!

-CSS, WEB制作

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

【CSS3】簡単なドロップシャドウや光彩(グロー)の付け方!

【CSS3】簡単なドロップシャドウや光彩(グロー)の付け方!

デザインを格好よくするためにシャドウを付けたりしますよね。 しかし、サイズが異なるたびに画像を背景に指定したりしなければならないのは大変です。 しかも、シャドウの幅の分だけはみ出ているということもあり …

【ワイヤー作成をラクにする!】レスポンシブ・ウェブデザイン(RWD)向けワイヤーツール

【ワイヤー作成をラクにする!】レスポンシブ・ウェブデザイン(RWD)向けワイヤーツール

サイトの設計図とも言えるワイヤーフレームを作成することは、ウェブ制作において大事なステップです。 ワイヤーフレームとはサイトの大まかなレイアウト、必要な要素、コンテンツの優先順位を示したもので、ワイヤ …

中国語サイトのスマートフォンサイト制作 は必要か?必須か?

中国語サイトのスマートフォンサイト制作 は必要か?必須か?

ChiKuu(チークー)という、海外で活躍するスポーツ選手や実業家、アーティストのつぶやきや最新情報などを翻訳してくれるウェブサイトに、新しい表示言語として簡体字中国語が加わりました。 ChiKuu. …

初心者向けWEBデザイン力強化トレーニング法

学生時代デザインを勉強してきて、いいものを作る、作れる自信を持っている新人さんが驚くことは先輩デザイナーの圧倒的なスピードだと思います。 社会に出ると当然「納期」があり、「自分のペースで」なんてことが …

CakePHP2.Xで404 Not Foundエラーをリダイレクトする方法

CakePHP2.Xで404 Not Foundエラーをリダイレクトする方法

CakePHP2.Xでは、404 NOT Foundエラーが発生した場合、 デフォルトでは、 app/View/Errors/error400.ctp の内容が表示されます。 サイトによっては、 40 …