CSS講座
幅・高さ・マージン・パディング・ボーダー
width - ブロック要素の幅
ブロック要素の幅を指定する場合に使用します。インライン要素に指定しても効果はありません。
幅は、100pxとか、10em、60% のように単位付きの数字で指定を行います。%（パーセント）を指定した場合は、親要素の幅を基準とした割合の指定となります。
規定値は auto です。auto は、ブロック要素の標準の表示の仕方のことですから、マージン・ボーダー・パディングを含めた横幅が、親要素の横幅100%になるように調節されます。
分かりにくいですが、例を挙げておきます。HTMLとCSSでは表現しにくいので、画像を使用しました。（分かりやすいように要素には高さを持たせてあります。）
- auto（規定値）
- ブロック要素のデフォルトの表示
width: auto;
- 50%
- 親要素の50%の幅で表示
width: 50%;
外側の四角形が、親要素を表しています。内側の四角形が子要素です。子要素のようにwidthプロパティを指定してあると考えてください。
height - ブロック要素の高さ
ブロック要素の高さを指定する場合に使用します。インライン要素に指定しても効果はありません。
基本的に、widthプロパティと同じです。単に高さの指定に変わっただけです。つまり、高さは、100pxとか、10em、60% のように単位付きの数字で指定を行います。%（パーセント）を指定した場合は、親要素の高さを基準とした割合の指定となります。
ただし、%（パーセント）での指定の場合は、気をつけなければいけないのが、heightプロパティを付ける親要素は、あらかじめheightプロパティを使って高さを指定しておく必要があると言うことです。
つまり、親要素がデフォルトのheight:auto;であった場合、いくら子要素にheight: 100%;などと指定しても、子要素の高さは auto になってしまいます。これは、親要素の高さがはっきりと決められていないため、子要素の高さも決めることができないのです。したがって、何を指定しようと高さはデフォルトの auto になります。
- auto（規定値）
- ブロック要素のデフォルトの表示
height: auto;
- 50%（親要素の高さが指定されている場合）
- 親要素の50%の高さで表示
height: 50%;- 親要素の高さがはっきりと示されている場合は、親要素の高さを基準として高さが決められます。
- 50%（親要素の高さが指定されていない場合）
- 親要素の50%の高さで表示
height: 50%;- 親要素の高さが auto（規定値）の場合は、子要素の高さは自動的に auto になります。
-
外側の四角形が、親要素を表しています。内側の四角形が子要素です。子要素のようにheightプロパティを指定してあると考えてください。
では、body要素の50%の高さのブロック要素を作るには、どうしたらよいでしょうか？この場合、html要素と、body要素の両方にheight: 100%;を指定する必要があります。
html, body { height: 100%; margin: 0; padding: 0; }
.box { height: 50%; background: #999; }
<html>
<head>
<title>body要素の50%の高さのボックス</title>
</head>
<body>
<div class="box">ウインドウの丁度半分の高さのボックスが表示されます。</div>
</body>
</html>
margin - マージンの設定
要素のマージンを設定します。
マージンは、要素の外側の余白のことです。backgroundプロパティの対象にはなりません。（つまり、マージンに色を付けることはできません。）単位付きの数値で、マージン幅を指定します。
マージンは、デフォルトで設定されている要素もあります。例えば、段落を意味する p というタグで囲んだ文字列の周りに空白ができるのは、マージンのおかげです。試しに、
p { margin: 0; }
と設定してみてください。pタグで囲んでも、pタグの周りに空白はできなくなります。
実線で描かれているのがマージンを設定した要素です。分かりやすいようにマージン部分には点線と薄い色が付いていますが、実際は何も表示されません。（単なる空白です。）
margin: 20px;
上の例だと、要素の４辺に20pxのマージンが設定されます。
４辺をそれぞれ指定したい場合は、
margin: 20px 30px 10px 15px;
のようにします。これは、上・右・下・左の順番（上から時計回り）にマージンを設定していることになります。この場合は、上 20px、右 30px、下 10px、左 15px のマージンを設定しています。
margin: 20px 30px 15px;
と書くこともできます。この場合、上・左右・下のマージンを設定していることになります。よって、上 20px、左 30px、右 30px、下 15pxのマージンを設定していることになります。
margin: 20px 30px;
また、二つしか値を設定しない場合、それぞれ上下・左右のマージンを設定していることになります。この場合は 上 20px、下 20px、左 30px、右 30pxということです。
分かりにくいですか？整理してみます。
- 値が１つの場合
- ４辺全てに同じ幅のマージンを設定します。
margin: 20px;- 値が２つの場合
- 上下・左右 の順番でマージンを設定します。
margin: 20px 30px;- 値が３つの場合
- 上・左右・下 の順番でマージンを設定します。
margin: 20px 30px 15px;- 値が４つの場合
- 上・右・左・下（上から時計回り）の順番でマージンを設定します。
margin: 20px 30px 10px 15px;
上の４つの指定方法は、とても便利です。覚えておいて損は無いでしょう。
単位は、px（ピクセル）を使っていますが、他の単位でもOKです。
ただし、使うときに気をつけるのは、「単位を統一する」ということです。
- Good!
margin: 20px 30px 25px;- Bad!
margin: 20px 3em 2%;
一応・・・実は、marginプロパティは
- margin-top
- margin-right
- margin-left
- margin-bottom
という４つの属性の省略形です。使い方は、
margin-top: 40px;
のようにします。（上の例は margin-top だけですが、他の３つも同じ様に使います。）簡単ですよね。
左のマージンだけ設定したい！のように、特定の辺のマージンのみを設定し、それ以外のマージンはそのままにしておきたい場合には、これらを使ってください。それ以外の場合は、省略形のmarginの方が楽だと思います。
padding - パディングの設定
要素のパディングを設定します。
パディングは、要素の内側の余白のことです。backgroundプロパティの対象になり、背景色などを指定することができます。単位付きの数値で、パディング幅を指定します。
実線で描かれているのがパディングを設定した要素です。分かりやすいようにパディング部分には点線と薄い色が付いていますが、実際は何も表示されません。（単なる空白です。）
paddingプロパティは、marginプロパティと同じように、
- padding-top
- padding-right
- padding-left
- padding-bottom
という４つのプロパティの省略形です。（これら４つのプロパティの使い方も、マージンの場合と同じです。）
padding-right: 10px;
paddingプロパティの場合も、設定する値の数によって、どこのパディングを設定するか決まります。
- 値が１つの場合
- ４辺全てに同じ幅のパディングを設定します。
padding: 1em;- 値が２つの場合
- 上下・左右 の順番でパディングを設定します。
padding: 3em 2em;- 値が３つの場合
- 上・左右・下 の順番でパディングを設定します。
padding: 3em 1em 5em;- 値が４つの場合
- 上・右・左・下（上から時計回り）の順番でパディングを設定します。
padding: 1em 3em 2em 1.5em;
なんとなく、 em を使いましたが、別に px（ピクセル）などで指定してもOKです。マージンと同様に、単位は統一してください。
border - ボーダーの設定
要素のボーダーを設定します。
ボーダーは、要素の枠線のことです。丁度、マージンとパディングの間にボーダーが引かれます。
padding: 1.5em;
指定の仕方ですが、「線の太さ」「線の種類」「線の色」をスペースで区切って指定します。
border: 1px solid #666;
上の場合では、
- 1px ⇒ 線の太さ
- solid ⇒ 線の種類
- #666 ⇒ 線の色
となっています。値の順番に規則は無いので、
border: solid #666 1px;
のように書いても、全く同じことです。また、値は省略することもできます。
線の太さですが、たいてい単位付きの数値で指定しますが、
- thin
- 細線
- 細線で表示されます。
- medium（規定値）
- 中太線
- 中太線で表示されます。（規定値）
- thick
- 太線
- 太線で表示されます。
などで指定することもできます。
線の色については、説明しなくても大丈夫ですよね？
では、どんな線の種類があるのか紹介をします。
- none
- 線無し
- ボーダーは表示されません
- solid
- 実線
- 実線で表示されます。
- dotted
- 点線
- 点線で表示されます。
- dashed
- 破線
- 破線で表示されます。
- double
- 二重線
- 二重線で表示されます。
- groove
- 谷線
- 谷線で表示されます。
- ridge
- 山線
- 山線で表示されます。
- inset
- 内線
- 内線で表示されます。
- outset
- 外線
- 外線で表示されます。
意外とたくさんありますよね。ただし、groove、ridge、inset、outsetに関しては、色の指定ができません。また、ブラウザの影響も受けます。
さらに、dotted（点線）に関しては、もっと厄介？かもしれません。下の３枚の画像を比較してみてください。
IEでは●で表現されています。FirefoxとOperaでは、■で表現されています。
InternetExplorerとFirefoxとOperaでちょっと比較してみました。FirefoxとOperaの表示はほぼ同じでした。
結構印象違いますよね。dottedの場合は 1px or 2px が良いのではないでしょうか。
さて、borderプロパティも、marginやpaddingと同じで省略形です。ただし、borderプロパティは４辺全て同時に設定することしかできません。（marginやpaddingは指定する値の数で、どこのマージンを設定する・・・とかできますよね。）そのため、４辺のどれか特定の辺のボーダーを設定するには、以下の４つを使用してください。
- border-top
- border-right
- border-left
- border-bottom
使い方は、marginプロパティと同じです。「線の太さ」「線の種類」「線の色」について指定してください。順番に指定はありません。また、値を省略することもできます。
border-right: #f60 dashed 0.5em;
・・・border-top、border-right、border-left、border-bottom も、実は省略形です。
とりあえず、border-topについて書きます。他も全く同じです。
- border-top-style
- border-top-width
- border-top-color
styleは「線の種類」、widthは「線の太さ」、colorは「線の色」について設定します。・・・使い方は、省略しても分かりますよね。
まだ続きます。実は、style、width、colorを省略した属性も存在します。
- border-style
- border-width
- border-color
これら３つの省略形も存在します。これらは、marginやpaddingと同じ使い方ができます。つまり・・・
border-style: solid dashed dotted outset;
のように使うことができます。（この場合だと、上・右・下・左の順番に設定をしていることになります。）
border-width、border-color についても、同様に値を１～４個設定することができます。
