CSS3で画像を使わず角丸をつくる

CSS on ,

まだ需要は少ないですが、SafariやOpera、Firefoxなどの新しいWebブラウザでは、すでにCSS3の仕様が実装されています。
現行のブラウザのシェア率がもう少し上がらないと、一般的なサイトで「CSS3+HTML5」なんていう仕様で作るのは、もう少し先なのかなと思っていたら、スマートフォンサイトの作成案件が入りブラウザのシェアを気にしなくて良いので「CSS3+HTML5」を使ってみました。

CSS3から色々な事ができるようになりましたが、CSSを使用しWEBサイトを作ったことがある人なら、まず「角丸」これに感動したことでしょう。
今まで角丸のエリアを作る為には、角丸の部分の画像を作成し背景に指定するという一般的なやり方から開放され、CSSの記述ひとつで作れてしまうというのは素晴らしい!の一言につきます。

今まで画像で角丸を表現していた部分を border-radius これをCSSで記述する事で簡単に角丸を表現出来ちゃいます!

■例:ボックスの四隅すべてを丸くする。

border-radius: 20px;

これだけ?と思った人も多いでしょう。
そうです、これだけで20px角丸ボックスが作れてしまいます!

しかし、注意点がいくつかあります。
Safari、Chrome、Firefox などにも対応させるためには、これだけでは不十分。
各ブラウザの独自拡張するには、プロパティ名の先頭に「-moz-」や「-webkit-」を加えて以下のように記述しなければなりません。

■例:ボックスの四隅すべてを丸くする。(Safari、Chrome、Firefox にも対応)

border-radius: 20px; /* CSS3 */
-webkit-border-radius: 20px; /* Safari,Chrome */
-moz-border-radius: 20px; /* Firefox */

う~ん、ちょっと量が増えてメン・・
まぁ、今までの画像作成の手間に比べれば全然楽なのでガマンガマン。

次に、四隅ではなく部分的に角丸にしたい場合を紹介します。
例としてボックスの左上と右上を角丸にしタブのような形を作ると仮定します。

■例:ボックスの左上と右上を丸くする

border-top-left-radius: 20px; /* 左上 CSS3 */
border-top-right-radius: 20px; /* 右上 CSS3 */

角丸にしたい部分を部分的に記述しなくてはなりません。
4箇所だと一行で済みますが、2箇所だと二行になるんですね。
さらに、この記述に対しても、Safari、Chrome、Firefox などにも対応させるためには追加記述をしなくてはなりません。

■例:ボックスの左上と右上を丸くする。(Safari、Chrome、Firefox にも対応)

border-top-left-radius: 20px; /* 左上 CSS3 */
border-top-right-radius: 20px; /* 右上 CSS3 */
-webkit-border-top-left-radius: 20px; /* 左上 Safari,Chrome */
-webkit-border-top-right-radius: 20px; /* 右上 Safari,Chrome */
-moz-border-radius-topleft: 20px; /* 左上 Firefox */
-moz-border-radius-topright: 20px; /* 右上 Firefox */

ふむ、ちょっと量が増えてきましたね。
部分的に角丸を作る場合はborderradiusの間に角丸にしたい部分を追加記述するんですね。

あれ?ちょっと記述の仕方が違う箇所があるぞ?
そうなんです、Firefoxに対応にさせる記述の時だけborder-radiusの後ろに、部分を-で区切らず繋げて記述するんですね。

-moz-border-radius-topright: 20px;

角丸を使えるようになり確かに便利にはなったのですが、使い慣れないと追加記述を忘れたり、間違ったりしやすいですね。
そして、願わくは各ブラウザ毎の追加記述なしで済むようになってほしいものです。

コメントを残す