CSS3でボックス要素の角を丸くする


CSS3ではグラデーションやシャドウなど、
webページの見た目をリッチにする機能が沢山用意されています。

その中でも今回は、ボックス要素の角を丸くする方法について、
簡単にまとめてみました。

基本

これだけです。
値の単位には、pxem%などが使えます。

実際にやってみましょう。
わかりやすくするためにbackground-color等を合わせて指定しています。

数値を大きくすれば、角丸の半径が大きくなります。
以下は20pxに設定した例です。

コーナーそれぞれに対応させる

上記のborder-radiusで値を一つだけ指定すると、ボックスの角4箇所全てに反映されます。
コーナー毎に設定したい場合の方法としては、例えば以下のようなプロパティ使う方法があります。

  • border-top-left-radius(左上)
  • border-top-right-radius(右上)
  • border-bottom-left-radius(左下)
  • border-bottom-right-radius(右下)

以下のようにすれば左上と右下だけ丸角にできます。

楕円にする

値をスペースで区切って2個指定すると、
それぞれ水平方向、垂直方向の半径に反映され、
楕円形の角が作れます。

capture

古いブラウザでも対応させる

上記はCSS3標準の書き方で、
最新のブラウザであればこれで大丈夫ですが、
古いブラウザも対応させようと思ったら、以下のような書き方が必要になります。

なぜこんな書き方をしなければならないのか

私も詳しいことは知りませんので、間違ってたらごめんなさい……
上記の「border-radius」の前にくっついてる「-moz-」や「-webkit-」は
ベンダープレフィックスと呼ばれているもので、
ブラウザそれぞれに独自に用意されたCSSプロパティです。

これは、CSS3の仕様がまだ正式に策定されていない為、
仕様が変わった際にデザインが崩れないように、
ブラウザベンダーそれぞれが用意しているんだとか。

ただ、最新のブラウザではベンダープレフィックスを付与しない方でも
動くようになっている来ているので、
「もう付けなくても良いんじゃないか」っていう意見もあるようです。

よって、最新のブラウザのみを対応にするのであれば、
一つだけ用意すれば良いんじゃないかと思います。
古いブラウザでも同じデザインにしたいって場合は、
付けておいた方が無難かもしれませんね。

以前紹介したコード記述をリアルタイムで閲覧できるサイトcode playerでは、
まず標準の書き方をした後、
行をコピペして各ベンダープレフィックスを付与しているサンプルが多かったです。
とりあえずはそんな感じでいくのが無難かな。

HTMLやCSSのテクニックをリアルタイムで閲覧できる「The Code Player」

The Code Player

The Code Playerは、
HTML5やCSS3を使ってカッコイイ演出を作る様子を
リアルタイムで閲覧できるサイトです。

サイトにアクセスすると、完成品のサムネイルが並んでいます。
見たいものをクリックすると個別ページに遷移し、完成品を見ることができます。

完成品のサンプル

ここで「Play Walkthrough」をクリックすると、
サンプルを作成する過程の再生が始まります。
まっさらな状態から、HTML、CSS、JSを記述していく様子がリアルタイムで閲覧できます。

過程をアニメーションで閲覧できる

画面下部のコントローラで、
一時停止・再生、再生速度の変更も可能。
速すぎてついていけなくなったら、一時停止したり再生速度を落としてみたりしましょう。

一時停止してブラウザの開発ツールで確認してみると、
右側に表示されているのは、HTMLやCSSなどが実際に反映された状態のものみたいです。

先輩がコーディングしているのを、横から見てるようなイメージ。
一時停止はさしずめ、「ちょっと待った! 今のところもう1回見せてください!」ってお願いしているかのよう。

手順を文章で説明してくれるサイトは多いですが、
こういう感じで途中経過が目に見えると頭に入ってきやすいですね。

まだサンプル数が少ないのはベータ版だからなのかな。
もっとサンプルがどんどん増えていくと良いですねー。

The Code Player