目次

様々な種類の箱

ブロック要素とインライン要素、置換要素

箱の構造

マージン

マージンの相殺

パディング

ボーダー

箱の基礎 後編 -箱の特性-

ここまで来れば、後は特性の解説だけでござるぞ。ささ、どんどんお進み下され。

マージン

margin-top, margin-right, margin-bottom, margin-left

この特性を使って、それぞれ上、右、下、左のマージンの大きさを指定し候。
blockquote { margin-top: 0.3em }

負の値も使えるでござる。

マージンは透明なのだが、htmlやbodyに指定すると、背景はマージンにも表示されるでござる。

margin

この特性を使うと、'margin-top'、'margin-right'、'margin-bottom'、'margin-left'という4つの特性を1箇所で指定出来るのでござる。値の書き方は、以下の通りでござるよ。
div { margin: 2em }            /* 四辺とも 2em */
div { margin: 1em 2em }        /* 上と下が 1em、右と左が 2em */
div { margin: 1em 2em 3em }    /* 上1em、右と左2em、下3em */
div { margin: 1em 2em 3em 4em }/* 上1em、右2em、下3em、左4em */

負の値も使えるでござる。

マージンの相殺

隣り合うボックス同士でマージンが縦方向に重なり合った場合の事でござる。その場合、マージンの値が大きい方を採って、体裁を整え候。正負の値が混在している場合、最大値と最小値を足し合わせた値を用いるでござる。正の値が存在しない場合、隣接するマージンの最小値を使うでござる。

値として[auto]を使用した場合の計算方法

マージンは、パディング・ボーダーと異なり、[auto]を許されているのでござる。

その解釈は、状況によってかなり細かく分かれるでござる。詳細は、水平方向に値として[auto]を使用した場合、垂直方向に値として[auto]を使用した場合をご覧下され。

パディング

padding-top, padding-right, padding-bottom, padding-left

この特性を使って、それぞれ上、右、下、左のパディングの大きさを指定し候。
blockquote { padding-top: 0.3em }

マージンと違って、負の値は使えないでござるよ。

padding

この特性を使うと、'padding-top'、'padding-right'、'padding-bottom'、'padding-left'という4つの特性を1箇所で指定出来るのでござる。値の書き方は、margin と同じでござるよ。
body { padding: 2em }            /* 四辺とも 2em */
body { padding: 1em 2em }        /* 上と下が 1em、右と左が 2em */
body { padding: 1em 2em 3em }    /* 上1em、右と左2em、下3em */
body { padding: 1em 2em 3em 4em }/* 上1em、右2em、下3em、左4em */

あと、パディング領域表面の色と画像は、背景関連の特性で指定し候。その際は、そちらを参照するでござる。

負の値は使えないでござる。

ボーダー

これはたくさんあるでござるぞ。覚悟して当って下され。

ボーダーの幅

border-top-width, border-right-width, border-bottom-width, border-left-width

それぞれ上、右、下、左のボーダーの幅を決めるでござる。

今回は、鍵言葉(キーワードの事を言いたいらしい)が出て来たでござるな。[thin]、[medium]、[thick]の3つでござるな。それぞれ、細いボーダー、通常のボーダー、太いボーダーでござる。が、これは表示する ゆぅえぇ 依存の値で、最悪太さが変わらないでござる。ものは試し、実例を見れば、どの程度の太さかは分かるでござろう。

border-width

この特性を使うと、'border-top-width'、'border-right-width'、'border-bottom-width'、'border-left-width'という4つの特性を1箇所で指定出来るのでござる。値の書き方は、'margin' と同じでござるよ。
cite { border-width: 2em }            /* 四辺とも 2em */
cite { border-width: 1em 2em }        /* 上と下が 1em、右と左が 2em */
cite { border-width: 1em 2em 3em }    /* 上1em、右と左2em、下3em */
cite { border-width: 1em 2em 3em 4em }/* 上1em、右2em、下3em、左4em */

ボーダーの色

border-top-color, border-right-color, border-bottom-color, border-left-color

初期値に'color'の値を使うというのは、つまり、該当要素の文字の色に緑が指定されていれば枠も緑になる、という事でござる。

今回の鍵言葉(キーワードの事)は [transparent] でござるな。直訳すると「透明な」「透き通った」という意味で、この値の場合、正に透過GIFのように、透けて見えるのでござるよ。透明であっても、幅はあるでござるよ。見えないだけで、境界線はあるのでござるから。"displey:none" では無く、"visibility:hidden" という事でござる。

border-color

この特性を使うと、'border-top-color', 'border-right-color', 'border-bottom-color', 'border-left-color'という4つの特性を1箇所で指定出来るのでござる。値の書き方は、'margin' と同じでござるよ。
VAR { border-color: red }                /* 四辺とも red */
VAR { border-color: red green }          /* 上と下が red、右と左が green */
VAR { border-color: red green blue }     /* 上red、右と左green、下blue */
VAR { border-color: red green blue gray }/* 上red、右green、下blue、左gray */

ボーダーの種類

border-top-style, border-right-style, border-bottom-style, border-left-style

四辺のボーダーの種類を指定するでござる。

鍵言葉の解釈は、以下の通りでござる。

none

ボーダーを無しにする。この値を指定するとボーダーの幅の値は強制的に"0"(ゼロ)になる。

hidden

[none]とほぼ同じ。ただし、結合ボーダーモデルでは、該当する辺にボーダーを表示するのを禁止するでござる。（詳細は結合によって起こる競合の解決方法を参照）

dotted

ボーダーを点線にする。

dashed

ボーダーを破線にする。

solid

ボーダーを切れ目の無い実線にする。

double

ボーダーを二重線にする。2本の実線とその間の空白との合計幅がボーダーの幅の値と等しくなる。

groove

窪みに見えるボーダーを表示する。

ridge

[groove]の逆で、隆起して見えるボーダーを表示する。

inset

箱のボーダーより内側全体が窪みになるように表示する。

outset

[inset]の逆で、箱のボーダーより内側全体が隆起になるように表示する。

実例を見るのが、最も手っ取り早いでござるな。

上で書いたとおり、ボーダーはすべて箱の背景の上に描かれるでござる。つまり、二重線の間などからは、背景関連特性で定めたものが見えるでござるよ。

border-style

この特性を使うと、'border-top-style', 'border-right-style', 'border-bottom-style', 'border-left-style'という4つの特性を1箇所で指定出来るのでござる。値の書き方は、'margin' と同じでござるよ。
em { border-style: solid }                     /* 四辺とも solid */
em { border-style: solid dotted }              /* 上と下が solid、右と左が dotted */
em { border-style: solid dotted groove }       /* 上solid、右と左dotted、下groove */
em { border-style: solid dotted groove outset }/* 上solid、右dotted、下groove、左outset */

ボーダーの簡略表記特性

今まで紹介して来た特性を、一つの特性で指定しようというものでござるよ。

border-top, border-right, border-bottom, border-left

これらは簡略化特性で、各々上下左右のボーダーの幅、種類、色を一箇所で指定出来るでござる。
h1 { border-bottom: thick solid red }

省略された項目には初期値が指定され候。次の例では色を指定していないので、ボーダーは'color'で指定された色で表示されるでござる。
h1 { border-bottom: thick solid }

border

箱四辺のボーダーを同じ幅、色、種類に指定するでござる。この特性は、'margin'や'padding'と異なり、四辺別々に指定する事は出来ないでござる。そうしたい場合は、各辺の特性を使って指定するでござる。

尚、ほかの簡略化特性同様、省略された項目には初期値が指定され候。

では最後に、少々複雑な例を見てみる事にしよう。
blockquote {
  border-style: solid;
  border-color: red;
  border-left: double;
  color: black;
}

この場合、左ボーダーの色が黒の二重線、それ以外のボーダーは赤の実線になるでござる。理由は分かるでござるかな。'border-left'で、色の値が指定されていないので、その色の値は'color'から採られるでごさるよ。

前編へ