Cascading Style Sheet

Part 4

ここでは、ボックスの各プロパティについて説明します。

ボックスについて

各要素はボックスと呼ばれる四角い領域を生成します。ボックスは、外側から以下の４つの領域で構成されています。

• マージン（margin）
• 枠（border）
• 内容と枠の間の空間（padding）
• 内容（content）

マージンを指定する。

スタイルシートで、タグに対してマージン（余白）を指定することが出来ます。次のプロパティを使います。

値は次のようなものがあります。

1. 数値＋単位
2. パーセント
3. auto（要素やボックスのタイプに応じて自動的に調整されます。）
4. inherit（親（祖先）要素の値を継承します。）

また、上下左右のマージンをまとめて設定することも可能です。次のプロパティを使います。

プロパティの値がいくつ与えられるかによって、以下のようにその値が割り当てられます。

具体的には次のように指定します。

ボックスを作る

ボックスを作る最も簡単な方法をまずご紹介します。次のプロパティを使います。

ここで、各値は任意の順序でスペースで区切って指定します。

例えば、

を実際に表示してみると、次のようになります。

枠の形式がoutesetで、幅が20pxで、色がyellowのボックスです。

上下左右の枠の形式を個別に指定する。

上下左右の枠の形式を個別に指定することが出来ます。次のプロパティを使います。

形式には次のものがあります。

• none（枠を表示しません。枠の太さも０に設定されます。テーブルのセルの枠どうしが重なった場合には、他の値が優先されます。）
• hidden（枠を表示しません。枠の太さも０に設定されます。テーブルのセルの枠どうしが重なった場合には、この値が優先されます。）
• dotted（枠を点で表示します。）
• dashed（枠を点線で表示します。）
• solid（枠を線で表示します。）
• double（枠を２本線で表示します。）
• groove（枠が引っ込んでいるように立体的に表示します。）
• ridge(枠が出っ張っているように立体的に表示します。）
• inset（ボックス全体が引っ込んで見えるように枠を立体的に表示します。）
• outset（ボックス全体が出っ張って見えるように枠を立体的に表示します。）

また、上下左右の枠の形式をまとめて設定することも可能です。次のプロパティを使います。

プロパティの値がいくつ与えられるかによって、以下のようにその値が割り当てられます。

上下左右の枠の太さを個別に指定する。

上下左右の枠の太さを個別に指定することが出来ます。次のプロパティを使います。

値の設定の仕方は次の３通りがあります。

• 色
• thin、medium、thick
• inherit

また、上下左右の枠の太さをまとめて設定することも可能です。次のプロパティを使います。

プロパティの値がいくつ与えられるかによって、以下のようにその値が割り当てられます。

上下左右の枠の色を個別に指定する。

上下左右の枠の色を個別に指定することが出来ます。次のプロパティを使います。

値の設定の仕方は次の３通りがあります。

• 色
• transparent（枠の色を透明にします。）
• inherit

また、上下左右の枠の色をまとめて設定することも可能です。次のプロパティを使います。

プロパティの値がいくつ与えられるかによって、以下のようにその値が割り当てられます。

上下左右の内容と枠の間の空間を個別に設定する。

上下左右の内容と枠の間の空間を個別に設定することが出来ます。次のプロパティを使います。

値の指定の仕方は次の３通りがあります。

• 数値＋単位で指定
• パーセントで指定
• inherit

また、上下左右の内容と枠の間の空間をまとめて設定することも可能です。次のプロパティを使います。

プロパティの値がいくつ与えられるかによって、以下のようにその値が割り当てられます。

具体例を次に示します。

を実際に表示してみると、次のようになります。

枠の形式がsolidで、幅が5pxで、色がyellowのボックスに、上下1emのpadding、左右2emのpaddingを指定した場合です。

Part 1 | Part 2 | Part 3 | Part 4 | Part 5 | Part 6 | Part 7