マーカーネット株式会社

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

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

関連記事

クオリティの高い“フリー写真素材サイト”まとめ編!

皆さん! こんばんは!! 株式会社マーカーネットでwebデザインを修行をしている新人デザイナーKです。 今回、私が皆さんにご紹介したいのはweb制作は欠かせない「素材」についてです。正確には、クオリテ …

要素がガクガクブルブル震える変わった動き!

要素がガクガクブルブル震える変わった動き! https://www.markernet.co.jp/blog/2015/09/04/post-6077/ Facebook

【スタイル次第で変幻自在!】巷で話題のSVG3つのポイントご紹介

【スタイル次第で変幻自在!】巷で話題のSVG3つのポイントご紹介

「SVG」というイメージフォーマットをご存知でしょうか? SVG(Scalable Vector Graphics)とはIllustratorで制作されるような、ベクターデータをWEB上で表示すること …

Phalcon PHPフレームワーク試しました

Phalcon PHPフレームワーク試しました

Phalcon(http://phalconphp.com/ja/)フレームワークは、PHPエクステンションとして利用する非常に高速なフレームワークとのことです。 動作確認までの手順です。 1. Ph …

面白い動きや便利な機能をJSで実装! その1:簡単にグラフを作成する方法!

折れ線グラフ、棒グラフ、円グラフ、レーダーチャートなどを 作成することができる「Chart.js」をご紹介致します。 今回は一番汎用性の高いと思われる折れ線グラフを作成してみたいと思います。 表示の瞬 …