マーカーネット株式会社

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

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

関連記事

10月のPYPLプログラミング言語人気ランキング

10月のPYPLプログラミング言語人気ランキング

10月のPYPLプログラミング言語人気ランキング PYPL PopularitY of Programming Language index 10月のプログラミング言語人気ランキングの発表によりますと …

【Fireworks】Flashなしで簡単に作れるGifアニメーション

【Fireworks】Flashなしで簡単に作れるGifアニメーション

サイトにちょっとした動きがほしい時、Flashを使わず、Fireworksでも簡単にGifアニメーションを作成できます。 ここで画面読込中のローディングアニメーションを作る手順をご紹介したいと思います …

オンライン上でPDFファイルをWordファイルに変換する

オンライン上でPDFファイルをWordファイルに変換する

WEBディレクターとして働いていますと、PSDやPNGなどのデザインデータ以外にもパワーポイントやエクセル、PDFなどのファイルなどクライアント様からさまざまな素材をいただいたり、こちらが資料を作成し …

動物や人物の写真を一瞬で切り抜き?!すごすぎる無料ツール「remove.bg」

こんにちは、デザイナーのAです。 今回は人物や動物が映った写真の背景だけを一瞬で切り抜いてくれる無料ツール「remove.bg」をご紹介します。 ※6月のアップデートデートでかなり対象の幅が広がったよ …

【Illustrator】写真を簡単にモノクロベクター画像にする方法

【Illustrator】写真を簡単にモノクロベクター画像にする方法

みなさまこんにちは、新人Aです。 今日は、写真をIllustratorでモノクロにしてイラストっぽくベクター画像を仕上げたいと思います! 【1.Illustratorにベクター化したい画像を配置します …