ボックス
Updated
内容領域、パディング(枠内余白)、ボーダー(外枠)、マージン(周辺余白)のボックスに関するプロパティ。
- border
- borderプロパティは上下左右のボーダーの幅、種類、色をまとめて設定するショートハンド(CSSにおいて値を簡略化できる記法のこと)です。まとめることができるのはボーダーの幅を指定する border-widthプロパティ, ボーダーの種類を指定する border-styleプロパティ, ボーダーの色を指定する border-colorプロパティの3つです。
- border-color
- border-colorプロパティは上下左右の四辺のボーダー(枠線)の色をまとめて設定するショートハンド(CSSにおいて値を簡略化できる記法のこと)です。上・下・左・右の四辺のボーダーの色を個別に指定する場合は、border-top-color, border-bottom-color, border-left-color, border-right-color が用意されています。
- border-style
- border-styleプロパティは上下左右の四辺のボーダー(枠線)の種類(スタイル)をまとめて設定するショートハンド(CSSにおいて値を簡略化できる記法のこと)です。値は1つ以上4つ以下のキーワードを半角スペースで区切って続けて指定し、キーワードには none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset があります。
- border-width
- border-widthプロパティは上下左右の四辺のボーダー(枠線)の幅(太さ)をまとめて設定するショートハンド(CSSにおいて値を簡略化できる記法のこと)です。値には単位識別子を伴った数値で指定する長さの他に、thin(細め), medium(標準), thick(太め)の3つのキーワードを指定できます。
- height
- heightプロパティは要素の生成するボックスの内容領域の高さを指定します。適用対象は、表の列・列グループ要素と非置換インライン要素を除くすべての要素です。
- margin
- marginプロパティはボックスの上下左右のマージン領域(他の要素と見分けをつけるための最も外側にある余白)をまとめて設定するショートハンド(CSSにおいて値を簡略化できる記法のこと)です。上・下・左・右の四辺のマージンを個別に指定する場合は、margin-top, margin-bottom, margin-left, margin-right が用意されています。
- max-height
- max-heightプロパティは要素の生成するボックスの最大の高さ(これ以上は高くしない設定)を設定します。最大の高さに対して、最小の高さ(これ以上は低くしない設定)は、min-heightプロパティで設定します。両プロパティは同時に指定可能で、画像の拡大・縮小などに活用されています。
- max-width
- max-widthプロパティは要素の生成するボックスの最大の横幅(これ以上は広げない設定)を設定します。幅広いデバイスや環境に対応できる融通性の高いデザインを実現するのに有用です。
- min-height
- min-heightプロパティは要素の生成するボックスの最小の高さ(これ以上は低くしない設定)を設定します。単位識別子を伴う数値で指定する長さと包含ブロックの内容領域の高さを基準とするパーセンテージ(%)による割合で指定するパーセンテージ値を値にできます。いずれも負の値は不正です。
- min-width
- min-widthプロパティは要素の生成するボックスの最小の横幅(これ以上は縮めない設定)を設定します。たとえば、大きな一枚の画像を背景画像として使う場合に、その画像の全体が見えるように、背景画像が表示される要素の内容領域を指定の値以下に縮めないようにするのに有用でしょう。
- padding
- paddingプロパティは上下左右のパディング領域(枠内余白)をまとめて設定するショートハンド(CSSにおいて値を簡略化できる記法のこと)です。パディングとは、詰め物という意味であるように内容とボーダーとの間に詰め物をしてできる枠内の余白のことを指します。背景領域の調節などに役立てることができます。
- width
- widthプロパティは要素の生成するボックスの内容領域の横幅を指定します。適用対象は、非置換インライン要素と表の行・行グループ要素を除くすべての要素で。