マーカーネット株式会社

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

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

関連記事

jqueryを利用した、facebookのアルバムから写真一覧の取得について

jqueryを利用した、facebookのアルバムから写真一覧の取得について

jQueryを利用して、 facebookの指定のアルバムから写真の一覧を取得する方法を紹介します。 ※ まず、facebookからアルバム一覧します。 var name = “markernet”; …

失敗しないSEOサイトリニューアル16のポイント!

SEOで失敗しないサイトリニューアル16のポイント! 簡単のようで簡単ではない、いつも心掛けるべきWEBサイトリニューアル時のポイントを記載しました。 WEBサイトのリニューアルは、成功の是非がはっき …

ホームページのリニューアルを考えたときに意識すること

早稲田大学のオフィシャルサイトが5日にリニューアルされたのはご存知でしょうか? 見ていただけるとすぐに分かると思うのですが、このリニューアルがスゴイ! 大学のサイトとは思えないですよね。 あまりにもお …

【コーダーには常識!?】あなたのコーディングをチェック!

【コーダーには常識!?】あなたのコーディングをチェック!

コーディングをしたけど、エラーや間違いがないか不安に感じたりしませんか? リンク切れやソースの間違いなどを一つ一つ調べていくのは大変です。 そこで、コーディングエラー、リンク切れなどを調べてくれるお勧 …

ワードプレスをブルートフォースアタックからまもるために必要なプラグイン

ワードプレスをブルートフォースアタックからまもるために必要なプラグイン

WordPressをインストールするとユーザー名「admin」が自動的に割り振られ 変更できないバージョンもございました。 ハッキングする側はパスワードを当てるだけでログインすることが可能になります。 …