Lesson 01 border-radiusで手軽に角丸を実装する - Webデザイン表現&技法の新・スタンダード・CSS3&HTML5編

Webデザイン 表現&技法の 新・スタンダード

Lesson 1

border-radiusで 手軽に角丸を実装する

	制作・文			比留間和也（面白法人カヤック）
＞	To Use			CSS
＞	Browser			IE 9over | Firefox 2over | Safari 4over

InternetExplorer9でも対応することが表明されているborder-radius。現在では主要なブラウザはほぼ対応している。これまでは少し手間がかかった角丸を利用して、手軽にデザイン性の高いボックスを作ってみよう。

まずは通常の角丸の例として、iPhoneの標準UIであるリストを作成してみる。作成イメージは【1-1】だ。この角丸をborder-radiusを使用して実装する。




【1-1】標準的なiPhoneのリストデザイン

サンプルのマークアップは全体を囲むdivひとつとul 要素のみ。マークアップは【2-1】のようになる。

これまでの角丸の実装は複雑なマークアップが必要だったが、border-radiusを使用することによって不必要なdivを追加することなくスマートに実装できることがわかる。divはあとでなにか別の要素を追加する要件ができたときの備えだ。必要なければul要素に直接CSSを指定してしまっても問題ない。


【2-1】とてもシンプルなマークアップ。必要ないと判断できれば、divすらも必要ない


【2-2】ナビゲーションの各画像にはリンクを設定するが、href属性は後で設定するので現時点では「#」にしておこう

続いてCSSを書いていく。といっても大した指定はない。

"listBorderRadius" クラスに「borderradius」を指定すれば角丸が実現できる。値は丸みを表す数値をpxなどで指定すればOKだ。

注意点としては、現時点ではまだベンダープレフィクスを必要としているブラウザもあるため、それらのブラウザでも表示されるよう数行多く書く必要があることだ【3-1】。


【3-1】-moz-や-webkit-などのベンダープレフィクス付きの指定も含めておく必要がある

続いてもう少し複雑な角丸を実装してみよう。角丸は四隅それぞれ個別に指定することもできる。四隅の角丸の値をそれぞれ違う数値を指定すれば、通常の角丸とは一味違うデザインにすることもできる。【4-1】のようなおもしろい形のデザ インも簡単に実現できてしまう。


【4-1】四隅の角の丸みを個別に指定できるのもborderradiusの強みだ

こちらのサンプルはさらにシンプルなソースになる【5-1】。角丸と背景を指定している「<div class= "listBorderRadius2">」とp要素のみだ。こちらもulのときと同様に、p要素のみでも実現可能だ。運用フェーズも見据えて適切に設定しよう。


【5-1】border-radiusを使えばデザインに左右されず、HTMLをしっかりと構造化できるのもメリットのひとつだろう

CSSは【6-1】のように指定する。角丸を個別に指定している箇所は「border-topleft-radius: 20px;」などがそれだ。指定が細かく単語の並びを忘れてしまいそうだが、上(下)左(右)の順番に指定する、と考えると覚えやすい。


【6-1】個別の指定はやや長くなる。 上(下)左(右)の順番に指定すると覚えよう

border-radiusを個別に指定する際に注意点がある。【6-1】を見て気づいた人もいると思うが、webkitとmozでの指定方法が異なる。webkitの指定が現在策定中 の仕様に則したものだ。それぞれの指定方法は【7-1】となる。ちなみに、四隅すべてに値を設定したい場合は、ほかのCSSプロパティと同様、ショートハンドが存在する。その場合は「border-radius: 5px 5px 5px 5px;」のように指定しよう。


【7-1】webkit、mozどちらも上(下)左(右)の順番に指定する点は変わらない