ボックス関係
width、height、margin-top、margin-right、margin-bottom、margin-left、margin、padding-top、padding-right、padding-bottom、padding-left、padding
幅を指定する
width:幅
widthプロパティは、内容を表示する部分の幅を指定します。ブロックレベル要素と置換インライン要素（img、input、textarea、selectなど）の他、横列と横列グループ（tr、thead、tbody、tfoot）を除くテーブル関連要素に対して指定できます。
| 値 | |
| pxで指定 | ディスプレイの大きさに左右されず、指定した部分の幅が固定される。 |
|---|---|
| %で指定 | 親ボックスに対する割合で指定する。親ボックスの幅によって、指定した部分の幅も変動する。 |
| autoで指定 | 初期状態。CSSでレイアウトを組んだ時に、左右の罫線が表示されない場合は、あえて「auto」を指定する。 |
■ サンプルコードと結果
CSS
<style type="text/css">
.type1 { width:200px;background-color:#ffff00;}
.type2 { width:100px;}
</style>
HTML
<p class="type1">ボックスの幅はwidthで指定します。</p>
<p><img src="tree.png" class="type2" alt="Sample" /></p>
※ 画像にwidthを指定すると、元のサイズに関係なくCSSで指定した幅になる。高さを指定しない場合は、縦横とも同じ比率で拡大縮小される。
高さを指定する
height:高さ
heightプロパティは、内容を表示する部分の高さを指定します。ロックレベル要素と置換インライン要素（img、input、textarea、selectなど）の他、横列と横列グループ（tr、thead、tbody、tfoot）を除くテーブル関連要素に対して指定できます。
| 値 | |
| pxで指定 | ディスプレイの大きさに左右されず、指定した部分の高さが固定される。 |
|---|---|
| %で指定 | 親ボックスに対する割合で指定する。親ボックスの高さによって、指定した部分の高さも変動する。 |
| autoで指定 | 初期状態 |
■ サンプルコードと結果
CSS
<style type="text/css">
.type1 { height:100px;background-color:#ffff00;}
.type2 { height:100px;}
</style>
HTML
<p class="type1">ボックスの高さはheightで指定します。</p>
<p><img src="tree.png" class="type2" alt="Sample" /></p>
※ 画像にheightを指定すると、元のサイズに関係なくCSSで指定した高さになる。幅を指定しない場合は、縦横とも同じ比率で拡大縮小される。
外余白を指定する
margin-top:上マージン
margin-right:右マージン
margin-bottom:下マージン
margin-left:左マージン
margin:上・右・下・左マージン
これらのプロパティは、マージン（ボックス外側の余白）を設定します。％で指定した場合は、指定されたボックスを含んだボックスの横幅に対する割合となります。上下のマージンについても、高さではなく横幅を参照します。
値として「auto」を指定すると、マージンは状況に応じて自動的に調整されます。インライン要素の上下左右とブロックレベル要素の上下については0になり、ブロックレベル要素の左右に「auto」を指定すると両者が同じ幅となるのでセンタリングされます。
| 値 | |
| pxで指定 | ディスプレイの大きさに左右されず、指定した部分の高さが固定される。 |
|---|---|
| %で指定 | 親ボックスに対する割合で指定する。親ボックスの高さによって、指定した部分の高さも変動する。 |
外余白の上を10px、右を20px、下を15px、左を30pxにするには１つ１つ個別に指定します。
- margin-top:10px
- margin-rigth:20px
- margin-bottom:15px
- margin-left:30px
この4つを１つにまとめて記述できるのがmarginプロパティです。値を複数指定することで、辺ごとに異なる余白サイズを調整することができます。
図のように値を1つ指定した時には、上下左右すべての値となります。2つ指定すると、最初の値が上下、次の値が左右になります。上下左右がすべて異なる値であれば、上、右、下、左の順に4つ記述します。また、値が「0」の場合は単位は省略できますが、それ以外は必ず単位を記述します。
■ サンプルコードと結果
CSS
<style type="text/css">
body { background-color:#ccffcc;margin:0;}
p { background-color:#ff9900;
border:2px solid #000;
width:200px;
text-align:center;}
.type1 { margin-top:10px;}
.type2 { margin-left:50px;margin-bottom:20px;}
.type3 { margin:30px 0 20px 20px;}
</style>
HTML
<body>
<p class="type1">1段落の内容</p>
<p class="type2">2段落の内容</p>
<p class="type3">3段落の内容</p>
</body>
※ サンプルの2段落の内容と3段落の内容との関係に注目してください。2段落の内容の下マージンは20px、3段落の内容の上マージンは30pxと指定されていますが、この2つの段落の間の幅は合計ではなく、数値の大きい方が優先されます。よって、この2つの段落の間の上下のマージンは30pxとなりますので、注意をしてください。
内容の周りの空間（余白）を指定する
padding-top:上の空間
padding-right:右の空間
padding-bottom:下の空間
padding-left:左の空間
padding:上・右・下・左の空間
これらのプロパティは、内容を表示する領域と枠線（ボーダー）の間の空間の幅を設定します。％で指定した場合は、指定されたボックスを含んだボックスの横幅に対する割合となります。上下のパディング（内余白）についても、高さではなく横幅を参照します。
| 値 | |
| pxで指定 | 余白サイズをpxで指定する。 |
|---|---|
| %で指定 | 親ボックスのサイズに対する割合で指定する。 |
内容と枠線の間の空間（内余白）の上を10px、右を20px、下を15px、左を30pxにするには１つ１つ個別に指定します。
- padding-top:10px
- padding-rigth:20px
- padding-bottom:15px
- padding-left:30px
この4つを１つにまとめて記述できるのがpaddingプロパティです。値を複数指定することで、辺ごとに異なる余白サイズを調整することができます。
図のように値を1つ指定した時には、上下左右すべての値となります。2つ指定すると、最初の値が上下、次の値が左右になります。上下左右がすべて異なる値であれば、上、右、下、左の順に4つ記述します。また、値が「0」の場合は単位は省略できますが、それ以外は必ず単位を記述します。
■ サンプルコードと結果
CSS
<style type="text/css">
body { background-color:#ccffcc;}
p { background-color:#ff9900;
border:2px solid #000;
width:200px;
text-align:center;}
.type1 { padding-top:10px;}
.type2 { padding-left:50px;padding-bottom:20px;}
.type3 { padding:30px 0 20px 20px;}
</style>
HTML
<body>
<p class="type1">1段落の内容</p>
<p class="type2">2段落の内容</p>
<p class="type3">3段落の内容</p>
</body>
※ サンプルの3段落の内容に注目してください。右のpaddingは「0」になっています。しかし、内容となる文字の右側には空間があります。これは、文字は初期では左揃えになっていて、しかも文字も短いために見た目が右の方が空いているように見えます。文字内容が右揃えであれば、ぴったりと右端に寄ります。
【各CSSのプロパティ詳細4】