Web プログラマになる

:: be web programmer ::

ボックスと標準的なスタイル

スタイルシートにおいて、全ての要素は長方形の領域として扱われます。
この領域を「ボックス」といいます。

ボックスは、次の４つで構成されます。

• マージン … 枠線より外側の余白
• ボーダー … 枠線
• パディング … 枠線とコンテンツの間の余白
• コンテンツ … 実際の内容（文章やデータ）

マージン、ボーダー、パディングの３つは、標準的なスタイルです。

• 標準的なスタイル(1)　マージン
• 標準的なスタイル(2)　ボーダー
• 標準的なスタイル(3)　パディング

---

●標準的なスタイル(1)　マージン

マージンは、ボーダーの外側の余白を表します。

マージンをまとめて指定する場合は、margin プロパティを使います。
指定できる値は、次のとおりです。

値	内容
数値 + 単位	余白の絶対的な大きさ 例： 1px, 2ex, 3mm
数値 + %	余白の相対的な大きさ（一つ外側のボックスに対する割合） 例： 10%, 20%, 30%
auto	自動調整

マージンを適用する場所の対応は、指定する値の個数によって変わります。

値を１つ指定 … margin: [上下左右]
値を２つ指定 … margin: [上下] [左右]
値を３つ指定 … margin: [上] [左右] [下]
値を４つ指定 … margin: [上] [右] [下] [左]

値と値の間は、半角スペースで区切ります。

/* 上下左右のマージン： 1px */
margin: 1px;

/* 上下のマージン： 3px */
/* 左右のマージン： 5px */
margin: 3px 5px;

/* 上のマージン  ： 2px */
/* 左右のマージン： 4px */
/* 下のマージン  ： 6px */
margin: 2px 4px 6px;

/* 上のマージン： 10px */
/* 右のマージン： 7px */
/* 下のマージン： 12px */
/* 左のマージン： 9px */
margin: 10px 7px 12px 9px;

マージンを個別に指定することもできます。
その際、次のいずれかのプロパティを使います。

margin-top     … 上のマージン
margin-bottom  … 下のマージン
margin-left    … 左のマージン
margin-right   … 右のマージン

指定できる値とブラウザ上の表示は、margin プロパティと同じです。

/* 上のマージン： 10px */
/* 下のマージン： 12px */
margin-top: 10px;
margin-bottom: 12px;

/* 左のマージン： 9px */
/* 右のマージン： 7px */
margin-left: 9px;
margin-right: 7px;

---

●標準的なスタイル(2)　ボーダー

ボーダーは、枠線を表します。

上下左右のボーダーをまとめて指定する場合は、border プロパティを使います。
値の書式は、次のとおりです。

border: [太さ] [スタイル] [色]

ボーダーの太さに指定できる値は、次のとおりです。

値	内容
数値 + 単位	線の絶対的な太さ 例： 1px, 2ex, 3mm
thin	細い線
medium	中くらいの太さの線
thick	太い線

ボーダーのスタイルには、次の値のいずれかを指定します。

値	内容
none	線を表示しません。 太さは 0 になります。（初期値）
hidden	線を表示しません。 太さは 0 になります。
solid	１本の直線で表示します。
double	２本の直線で表示します。
dashed	破線で表示します。
dotted	点線で表示します。
groove	立体的にくぼんだ線で表示します。
ridge	立体的に盛り上がった線で表示します。
inset	上と左の線を暗い色、下と右の線を明るい色で表示します。 ボックス全体が立体的にくぼんだように表示されます。
outset	上と左の線を明るい色、下と右の線を暗い色で表示します。 ボックス全体が立体的に盛り上がったように表示されます。

≪サンプル≫

ボーダーの色に指定できる値は、次のとおりです。

値	内容
カラーコード	色を表す16進数 例： #990000, #006600, #0000cc
カラーネーム	色を表す名前 例： red, green, blue
transparent	透明色

値と値の間は、半角スペースで区切ります。

/* 青色の１本線 */
border: 1px solid #000099;

/* 緑色の破線 */
border: 2px dashed #006600;

/* 赤色の点線 */
border: 3px dotted #990000;

ボーダーを個別に指定することもできます。
その際、次のいずれかのプロパティを使います。

border-top     … 上のボーダー
border-bottom  … 下のボーダー
border-left    … 左のボーダー
border-right   … 右のボーダー

指定できる値とブラウザ上の表示は、border プロパティと同じです。

/* 緑色の破線（上下） */
border-top: 2px dashed #006600;
border-bottom: 2px dashed #006600;

/* 青色の１本線（左右） */
border-left: 1px solid #000099;
border-right: 1px solid #000099;

太さ、スタイル、色を別々に指定できるプロパティも用意されています。

≪太さのプロパティ≫

値を１つ指定 … border-width: [上下左右]
値を２つ指定 … border-width: [上下] [左右]
値を３つ指定 … border-width: [上] [左右] [下]
値を４つ指定 … border-width: [上] [右] [下] [左]

border-top-width    … 上のボーダーの太さ
border-bottom-width … 下のボーダーの太さ
border-left-width   … 左のボーダーの太さ
border-right-width  … 右のボーダーの太さ

≪スタイルのプロパティ≫

値を１つ指定 … border-style: [上下左右]
値を２つ指定 … border-style: [上下] [左右]
値を３つ指定 … border-style: [上] [左右] [下]
値を４つ指定 … border-style: [上] [右] [下] [左]

border-top-style    … 上のボーダーのスタイル
border-bottom-style … 下のボーダーのスタイル
border-left-style   … 左のボーダーのスタイル
border-right-style  … 右のボーダーのスタイル

≪色のプロパティ≫

値を１つ指定 … border-color: [上下左右]
値を２つ指定 … border-color: [上下] [左右]
値を３つ指定 … border-color: [上] [左右] [下]
値を４つ指定 … border-color: [上] [右] [下] [左]

border-top-color    … 上のボーダーの色
border-bottom-color … 下のボーダーの色
border-left-color   … 左のボーダーの色
border-right-color  … 右のボーダーの色

---

●標準的なスタイル(3)　パディング

パディングは、ボーダーとコンテンツの間の余白を表します。

パディングをまとめて指定する場合は、padding プロパティを使います。
指定できる値は、次のとおりです。

値	内容
数値 + 単位	余白の絶対的な大きさ 例： 1px, 2ex, 3mm
数値 + %	余白の相対的な大きさ（一つ外側のボックスに対する割合） 例： 10%, 20%, 30%

パディングを適用する場所の対応は、指定する値の個数によって変わります。

値を１つ指定 … padding: [上下左右]
値を２つ指定 … padding: [上下] [左右]
値を３つ指定 … padding: [上] [左右] [下]
値を４つ指定 … padding: [上] [右] [下] [左]

値と値の間は、半角スペースで区切ります。

/* 上下左右のパディング： 1px */
padding: 1px;

/* 上下のパディング： 3px */
/* 左右のパディング： 5px */
padding: 3px 5px;

/* 上のパディング  ： 2px */
/* 左右のパディング： 4px */
/* 下のパディング  ： 6px */
padding: 2px 4px 6px;

/* 上のパディング： 10px */
/* 右のパディング： 7px */
/* 下のパディング： 12px */
/* 左のパディング： 9px */
padding: 10px 7px 12px 9px;

パディングを個別に指定することもできます。
その際、次のいずれかのプロパティを使います。

padding-top     … 上のパディング
padding-bottom  … 下のパディング
padding-left    … 左のパディング
padding-right   … 右のパディング

指定できる値とブラウザ上の表示は、padding プロパティと同じです。

/* 上のパディング： 10px */
/* 下のパディング： 12px */
padding-top: 10px;
padding-bottom: 12px;

/* 左のパディング： 9px */
/* 右のパディング： 7px */
padding-left: 9px;
padding-right: 7px;

---