CSSだけで角丸を表現するには

0 050
CSS だけで
角丸を表現するには
Chapter: 03
10 0 N ew c o m m o n s e n s e o f
We b D e s i g n
C H A P T E R : 0 3 C S S での装飾・デザインに関する新常識
C SSレイアウトにおいて難関の1つが角丸のデザインだ。通常は画像を利用するが、
JavaScript や、C SS3 で実装予定の border-radiusプロパティを利用した、画像を使
わない方法も広まってきている。border-radiusプロパティを使った方法が最もスマート
と言えるが、まだ対応しているブラウザが少ないので注意が必要だ。
03 bor der- r adiu s プロパティを利
用して角丸を再現
b o r d e r - r a d iu s プロパティを
利用して角丸を再現
■ X H T ML
CSS3 で実装予定の border-radiusは、CSSのみ
で角丸を再現することのできるプロパティだ。本書
執筆時点ではFirefox、Safari、Google Chorome
が先行実装している。レンダリングエンジンとして
Webkitを採用しているSafari、Google Chorome
には「-webkit-」という接頭語を、Gecko系の
Firefoxでは「-moz-」という接頭語をブロパティの
前に付けて指定することで角丸を実現できる。03
< div class ="radius-box" > … < /div >
■CSS
# id0 4 5 .radius-box {
padding: 10px ;
border : 4px solid # 6 6 9;
-webkit-border-radius: 10px ;
/ * Safari 、 Google Chorome 用 */
-moz-border-radius: 10px ;
/ * Firefox 用 */
border-radius: 10px ;
/ * C SS 3 での指定 */
background: # 2 2 6;
color : # f f f;
}
02 Jav aSc r ip t を利用して角丸を再現
画像を利用して再現する
1つのボックスに1つの背景画像しか指定できない
現在の状況では、4つのボックスを用意して左上、
右上、左下、右下それぞれに背景画像を指定するこ
とで角丸の図形を表現する。もし、角丸の背景の
幅もしくは高さが決まっているのであれば、2 つのボ
ックスでも表現できる。ここでは幅が決まっている
場合の例を示そう。まず、1つ目のボックスに角丸
の上の部分となる画像を指定する。次にボックス内
で最後に出現するボックスに角丸の下の部分になる
画像を指定すれば完成だ。01
Ja v a S c r i p t を利用して
角丸を再現
角丸を再現するJavaScriptライブラリはたくさんあ
るが、ここでは単独で動作する curvyCornersを紹
介しよう。まずはcurvyCornersダウンロードペー
ジ（http://www.cur vycorners.net/downloads.
php）からファイル一式をダウンロードする。多くの
ファイルが入っているが必要なのはcurvycorners.
jsのみだ。curvycorners.jsをhead要素内で読み
01 画像を利用して角丸を再現
■ X H T ML
< div class ="radius-box" >
< h1> …… < / h1>
< p > …… < /p >
< p class ="last- child" > …… < /p >
< /div >
■CSS
.radius-box {
padding-top: 10px ;
/ * 角丸の大きさ分 */
background: # 2 2 6 url(../ 0 4 5/
radius01.gif ) lef t top no-repeat ;
/ * 角丸の上部分 */
color : # f f f;
}
.radius-box .last- child {
padding-bot tom: 10px ;
/ * 角丸の大きさ分 */
background: # 2 2 6 url(../ 0 4 5/
radius0 2.gif ) lef t bot tom no-repeat ;
/ * 角丸の下部分 */
}
■ X H T ML
< head >
……
< script t ype =" tex t /JavaScript" src ="cur v ycor ners.js" > < /script >
< script t y pe =" tex t /JavaScript" >
window.onload = func tion ()
{
/*
T he new ' valid Tags' set ting is optional and allows
you to specif y other H T ML elements that cur v y Cor ners
can at tempt to round.
T he value is comma separated list of html elements
in lowercase.
valid Tags: ["div ", " for m"]
T he above example would enable cur v y Corners on F ORM elements.
*/
set tings = {
tl: { radius: 2 0 },<!- - 左上の角丸 - ->
tr : { radius: 4 0 },<!- - 右上の角丸 - ->
bl: { radius: 6 0 },<!- - 左下の角丸 - ->
br : { radius: 8 0 },<!- - 右下の角丸 - ->
antiAlias: true,<!- - アンチエイリアスの設定 - ->
autoPad: true,<!- - 余白の自動設定 - ->
valid Tags: ["div "] <!- - 角丸にする要素 - ->
}
/*
Usage:
new Cor nersObj = new cur v y Cor ners (set tingsObj, classNameStr);
new CornersObj = new cur v y Corners (set tingsObj, div Obj1[ ,
div Obj2 [ , div Obj3 [ , . . . [ , div ObjN] ] ] ]);
*/
var my Box Objec t = new cur v y Cor ners (set tings, "radius-box");<!- 角丸にする要素のクラス名 - ->
my BoxObject.apply CornersToAll();
}
< /script >
…
込み、適宜必要な設定をしよう。02 使用方法の詳細
< / head >
は元サイト（ht tp://w w w.cur v ycorners.net /
< div class ="radius-box" > … < /div >
usage.php）も参考にしていただきたい。
118
TS_C03.indd 118-119
…
…
Google Chorome
Firefox
Safari
※ 02 リスト続き
■CSS
.radius-box {
padding: 2 0px ;
background: # 2 2 6;
color : # f f f;
}
│ C h a p t e r ：0 3 C S S での装飾・デザインに関する新常識 │
119
09.2.3 6:29:17 PM

Download Report