マーカーネット株式会社

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

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

関連記事

Dropboxを使ってスタティックサイトを簡単に作れるサービス「Brace」

Dropboxを使ってスタティックサイトを簡単に作れるサービス「Brace」

今ではスタティックなWebサイトからでもHTML5と最新のJavaScript環境(各種の既製ライブラリ、フレームワークなど)があれば、相当複雑高度なサービスを提供できますよね。 そんなスタティックな …

デザイナーなら必ず見ておきたいWEBデザイン(可愛い系統)

デザイナーなら必ず見ておきたいWEBデザイン(可愛い系統)

資生堂のマシェリ公式HP http://www.shiseido.co.jp/macherie/index.html リボンのあしらいと女性が好みそうなお花やフルーツなどをモチーフにしていて、 沢山の …

オンライン上で複数のPDFファイルを結合(連結)させる方法【MERGE PDF】

オンライン上で複数のPDFファイルを結合(連結)させる方法【MERGE PDF】

今日はあんまり面白い記事が見つからなかったので、ちょっと趣向を変えて、日常のWEB制作フローのなかで重宝しているものの中からひとつ紹介します。 WEB制作の業界に限ったことだけではないかもしれませんが …

食べ物の写真を美味しそうにみせるフォトショの小ネタ

こんにちは! デザイナーの木野子です。 マーカーネットブログを、今回初めての担当することになりました! ここでは、私が普段web製作で使っている、 PhotoshopやIllustratorの小ネタな …

制作部隊に仕事を依頼するときに最低限必要な5つのこと。

制作部隊に仕事を依頼するときに最低限必要な5つのこと。 こんにちは。WEBデザイナーのKです。 本日はWEBデザイナーやプログラマーなど制作関係の方に、仕事を依頼するときに、 最低限抑えておかなければ …