Webデザイン |
Lesson 1 | border-radiusで 手軽に角丸を実装する |
制作・文 | 比留間和也(面白法人カヤック) | |||
> | To Use | CSS | ||
> | Browser | IE 9over | Firefox 2over | Safari 4over |
InternetExplorer9でも対応することが表明されているborder-radius。現在では主要なブラウザはほぼ対応している。これまでは少し手間がかかった角丸を利用して、手軽にデザイン性の高いボックスを作ってみよう。 |
01
【1-1】標準的なiPhoneのリストデザイン
02
これまでの角丸の実装は複雑なマークアップが必要だったが、border-radiusを使用することによって不必要なdivを追加することなくスマートに実装できることがわかる。divはあとでなにか別の要素を追加する要件ができたときの備えだ。必要なければul要素に直接CSSを指定してしまっても問題ない。
【2-1】とてもシンプルなマークアップ。必要ないと判断できれば、divすらも必要ない
【2-2】ナビゲーションの各画像にはリンクを設定するが、href属性は後で設定するので現時点では「#」にしておこう
03
"listBorderRadius" クラスに「borderradius」を指定すれば角丸が実現できる。値は丸みを表す数値をpxなどで指定すればOKだ。
注意点としては、現時点ではまだベンダープレフィクスを必要としているブラウザもあるため、それらのブラウザでも表示されるよう数行多く書く必要があることだ【3-1】。
【3-1】-moz-や-webkit-などのベンダープレフィクス付きの指定も含めておく必要がある
04
【4-1】四隅の角の丸みを個別に指定できるのもborderradiusの強みだ
05
【5-1】border-radiusを使えばデザインに左右されず、HTMLをしっかりと構造化できるのもメリットのひとつだろう
06
【6-1】個別の指定はやや長くなる。 上(下)左(右)の順番に指定すると覚えよう
07
【7-1】webkit、mozどちらも上(下)左(右)の順番に指定する点は変わらない