ボックスモデルとは2

今回もボックスの基本を紹介します。

ボーダー

まず紹介するのはボーダーです。ボーダーとは枠線のことです。

ボーダーを特徴付けるのは、border-color（線の色）・border-style（線の種類）・border-width（線の幅）という3つのプロパティです。試してみましょう。

<div style="width:200px;height:100px;background-color:#aaffff;border-color:#ff0000;border-style:solid;border-width:8px">div</div>

ここでまず、border-typeにどんな値があるのかを紹介しておきます。

solid

ふつうの一本線。

dotted

丸いドットが並んだ線。

dashed

破線。

double

二重線。

inset

中が彫り込まれたような陰影がついた線。

outset

逆に中が飛び出したような陰影がついた線。

groove

彫ったような陰影がついた線。

ridge

飛び出したような陰影がついた線。

none, hidden

ボーダー無し。

ボーダーが無いやつがnoneとhiddenの2種類ある理由はのちに紹介します。また、ブラウザによってはdottedが丸じゃなくて四角だったりします。

気づいたとおもいますが、border-color,border-style,border-widthの3つのプロパティは、上下左右の枠線を一括で指定していました。ちゃんと別々に指定することも可能です。

それぞれ、border-top-color, border-right-color, border-bottom-color, border-left-color・border-top-style, border-right-style, border-bottom-style, border-left-style・border-top-width, border-right-width, border-bottom-width, border-left-widthという計12個のプロパティで表すことができます。

実はborder-color,border-style,border-widthはこれらを一括で指定する意味を持つプロパティです。margin・paddingと同様に、1つなら上下左右一括、2つなら上下と左右、…というように指定できます。例を見てみましょう。

<div style="width:200px;height:100px;background-color:#aaffff;border-color:#ff0000 #0000ff;border-style:double dashed;border-width:6px 8px">div</div>

例えばこのように2つを指定したら、上下と左右で別々のボーダーになります。

border-color系は、初期値がcurrentColorとなっていますね。これは、ボーダーの色が省略された場合は文字色と同じ色になることを示しています。

border-style系の初期値はnoneです。これはボーダーが無いということです。特に何も書かないとボーダーが出ないのはこのためです。

border-widthは上の例では全てpx指定でしたが、emとかの他の単位も当然全て使えます。また、border-width用に、thin,medium,thickというキーワードも用意されています。これはそれぞれ「細い」「普通」「太い」という意味で、具体的な幅にはこだわらないあいまいな指定です。

さて、ボーダー関係のプロパティはまだあります。例えば、ボックスの左だけボーダーを付けたいと思ったらどうしましょう。border-left-color,border-left-style,border-left-widthの3つのプロパティを使うのがひとつの手ですが、これは長くて面倒です。ということで、1方向に特化して三種類をまとめて指定できるプロパティがあります。それがborder-top,border-right,border-bottom,border-leftです。

これは、対応するborder-width,border-style,border-colorの値を3つ、スペースで区切って好きな順番で指定します。例えば、左だけ枠をつけたければ次のようにします。

<div style="width:200px;height:100px;background-color:#aaffff;border-left:6px solid blue">div</div>

これはけっこうよく使います。

そして最後に、borderプロパティを紹介します。これはborder-topなどの4つと対応しているようにも見えますが、実は少し違います。このborderプロパティは、4方全部に同じ枠線を適用したいときに使います。border-topなどと同様に3つの値を並べてやると、4方向の枠が全部一気に指定出来ます。

<div style="width:200px;height:100px;background-color:#aaffff;border:6px solid blue">div</div>

borderプロパティでは、2組を指定して上下と左右を分けるとか、そういうことはできません。上下左右全部一括です。

ボーダー・パディングとボックスの大きさ

同じ大きさでボーダー有りのボックスとボーダー無しのボックスを比べてみましょう。

<div style="width:200px;height:100px;background-color:#aaffff;margin:10px">ボーダーなし</div>
<div style="width:200px;height:100px;background-color:#aaffff;border:30px solid blue;margin:10px">ボーダーあり</div>

widthとheightが同じなのに、ボックス全体の大きさが違います。これは、widthやheightの指定がボーダー部分を含まず、内部のコンテンツが実際に表示される部分のみの大きさを指定することになっているからです。

この場合、実際の大きさは、横幅は200px＋30px×2=260px, 縦は100px+30px×2=160pxになっています。前回もみたように、パディングがある場合それもwidthやheightの指定には含まれませんので、ボックスの大きさはさらに大きくなります。

しかしこの動作はときには、ボックスの実際の大きさが把握しにくくて不便だったりします。そこで、widthやheightの指定にパディングとボーダーも含めることが可能です。そのためにはbox-sizingプロパティを使います。

それぞれの値の意味は以下の通りです。

content-box

従来通りの動作。width・heightは中身の大きさのみで、パディングやボーダーは含めない。

padding-box

パディングは大きさに含めるが、ボーダーは含めない。

border-box

パディングとボーダーを大きさに含める。

例えば上の例では、box-sizing:border-boxを追加してやると大きさが同じになります。試してみましょう。

<div style="width:200px;height:100px;background-color:#aaffff;margin:10px">ボーダーなし</div>
<div style="width:200px;height:100px;background-color:#aaffff;border:30px solid blue;margin:10px;box-sizing:border-box">ボーダーあり</div>

このように下の例ではwidth・heightがボーダーも含めた指定になり、その分中の領域が小さくされています。

では、さらにパディングも加えたボックスを用意して、3種類の値を並べてみましょう。

<div style="width:200px;height:100px;background-color:#ffffaa;padding:20px;border:20px solid #ff8000;margin:10px;box-sizing:content-box">content-box</div>
<div style="width:200px;height:100px;background-color:#ffffaa;padding:20px;border:20px solid #ff8000;margin:10px;box-sizing:padding-box">padding-box</div>
<div style="width:200px;height:100px;background-color:#ffffaa;padding:20px;border:20px solid #ff8000;margin:10px;box-sizing:border-box">border-box</div>

どうでしょうか。2013年7月現在、どのブラウザもcontent-boxとpadding-boxが同じになっていますね。本来ならpadding-boxのほうはパディングの20px×2=40pxがwidth・heightに組み入れられてその分だけ小さくなるはずです。

このように、box-sizingではcontent-boxとborder-boxのみ対応が進んでおり、padding-boxは使えない状況になっています。そのため、将来的にpadding-boxは削除されるかもしれないことになっています。padding-boxは使わず、content-boxとborder-boxだけ使うのが無難です。といっても、デフォルトのcontent-boxを明示的に指定する場面は少なく、もっぱらbox-sizing:border-boxの形で使うことが多いでしょう。box-sizingは、ボックス全体の大きさをしっかりと制御できるようになるので便利です。

ボックスの角を丸くする

最後に紹介するのはボックスの角を丸くするためのプロパティです。

それはborder-radiusプロパティです。さっそく例を見てみましょう。

<div style="width:200px;height:100px;background-color:#ffaaff;border-radius:40px">角が丸いボックス</div>

ボックスの形が丸くなっていることが、背景色から分かります。しかし表示領域自体は実は四角いままなので、文字がはみ出てますね。適当にパディングをつけることで中に入れましょう。

<div style="width:200px;height:100px;background-color:#ffaaff;border-radius:40px;padding:30px">角が丸いボックス</div>

この丸い部分は円に沿った形になっています。その円の半径を定めるのがborder-radiusプロパティというわけです。

さて、角は4つありますから、案の定、4つ別々に指定できます。これはmarginやpadding,borderでお馴染みですね。ただし、今回は角ですから、上下左右というわけにはいきません。左上、右上、右下、左下です。それぞれborder-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radiusプロパティを使います。

例えば、右下だけ丸くするには次のようにします。

<div style="width:200px;height:100px;background-color:#ffaaff;border-bottom-right-radius:40px;padding:30px">角が丸いボックス</div>

実は、今まで角は円でしたが、楕円にもできます。x方向の半径とy方向の半径をスペースで区切って別々に指定するのです。例えば次のようにします。

<div style="width:200px;height:100px;background-color:#ffaaff;border-bottom-right-radius:100px 40px;padding:30px">角が丸いボックス</div>

何かカーブが横長になりましたね。これは横の半径が100px、縦の半径が40pxの楕円にそったカーブになっているのです。

さて、そうなると、最初に紹介したborder-radiusは、4つの角の個々のプロパティを一括で指定する役目をもったプロパティだったということになります。

border-radiusは、marginやpaddingと同様に、1つから4つ指定できて、それぞれの意味は次の通りです。

1つ

4つの角全部

2つ

(左上と右下) (右上と左下)

3つ

(左上) (右上と左下) (右下)

4つ

(左上) (右上) (右下) (左下)

試してみましょう。

<div style="width:200px;height:100px;background-color:#ffaaff;border-radius:40px 30px 20px 10px;padding:30px">角が丸いボックス</div>

4つの角で大きさが違いますね。

ところで、これはどの角もx方向とy方向の半径が同じになっていますね。個別のプロパティでは順に指定することでx方向・y方向を別々に指定できましたが、border-radiusでは方法が違います。border-radiusでは、x方向 / y方向 というように、スラッシュで区切ります。それぞれに1つから4つを指定できます。例えばx方向に2つ、y方向に1つのように数が違っても構いません。これを使って、真円ではなく楕円にしてみましょう。

<div style="width:200px;height:100px;background-color:#ffaaff;border-radius:40px 30px 20px 10px / 20px 40px;padding:30px">角が丸いボックス</div>

これは、左上が40px 20px、右上が30px 40px、右下が20px 20px、左下が10px 40pxというのと同じ意味です。

ちなみに、border-radiusというくらいですから、ボーダーがあるとちゃんと曲線になります。

<div style="width:200px;height:100px;background-color:#ffaaff;border-radius:40px 30px 20px 10px / 20px 40px;border:4px #666666 solid;padding:30px">角が丸いボックス</div>

出典:CSS Backgrounds and Borders Module Level 3 W3C Candidate Recommendation 24 July 2012, CSS Basic User Interface Module Level 3 (CSS3 UI) W3C Working Draft 17 January 2012