CSSにおけるボックスモデル
HTML要素のサイズと振る舞いを定義できるCSSプロパティ
新着！ 私の44ページの電子書籍「CSS in 44 minutes」が公開されました！ 😃
#border-bottom-width
border-widthと同様ですが、下のボーダーのみに適用されます。
デフォルト border-bottom-width: 0;
下のボーダーを削除します。
border-bottom-width: 4px;
ピクセル値を使用できます。
#border-left-width
border-widthと同様ですが、左のボーダーのみに適用されます。
デフォルト border-left-width: 0;
左のボーダーを削除します。
border-left-width: 4px;
ピクセル値を使用できます。
#border-right-width
border-widthと同様ですが、右のボーダーのみに適用されます。
デフォルト border-right-width: 0;
右のボーダーを削除します。
border-right-width: 4px;
ピクセル値を使用できます。
#border-top-width
border-widthと同様ですが、上のボーダーのみに適用されます。
デフォルト border-top-width: 0;
上のボーダーを削除します。
border-top-width: 4px;
ピクセル値を使用できます。
#border-width
要素のボーダーの幅を定義します。
border-width: 1px;
すべてのボーダーの幅を1pxに定義します。
border-width: 2px 0;
上と下のボーダーを2px、左と右を0に定義します。
#box-sizing
要素の幅と高さがどのように計算されるかを定義します。paddingとborderを含めるかどうか。
デフォルト box-sizing: content-box;
要素の幅と高さは、要素のコンテンツのみに適用されます。
例えば、この要素は
border-width: 12pxpadding: 30pxwidth: 200px
全体の幅は24px + 60px + 200px = 284pxです。
コンテンツは定義された幅を持ちます。ボックスはそれらの寸法に対応します。
box-sizing: border-box;
要素の幅と高さは、要素のすべての部分（コンテンツ、padding、border）に適用されます。
例えば、この要素は
border-width: 12pxpadding: 30pxwidth: 200px
全体の幅は、何があっても200pxです。
ボックスは定義された幅を持ちます。コンテンツはそれらの寸法に対応し、最終的には200px - 60px - 24px = 116pxになります。
#height
要素の高さを定義します。
デフォルト height: auto;
要素は、コンテンツが正しく表示されるように、高さを自動的に調整します。
height: 100px;
ピクセル、(r)em、パーセンテージなどの数値を使用できます。
コンテンツが指定された高さに収まらない場合、オーバーフローします。コンテナがこのオーバーフローコンテンツをどのように処理するかは、overflowプロパティによって定義されます。
#line-height
テキストの1行の高さを定義します。
デフォルト line-height: normal;
ブラウザのデフォルト値に戻します。
推奨 line-height: 1.6;
単位なしの値を使用できます。行の高さはフォントサイズに相対的になります。
line-height: 30px;
ピクセル値を使用できます。
line-height: 0.8em;
em値を使用できます。単位なしの値と同様に、行の高さはフォントサイズに相対的になります。
#margin-bottom
要素の外側、下側のスペースを定義します。
デフォルト margin-bottom: 0;
下部のマージンを削除します。
margin-bottom: 30px;
ピクセル値を使用できます。
margin-bottom: 2em;
(r)em値を使用できます。
値はフォントサイズに相対的です。
- em: 要素の現在のフォントサイズに相対的
- rem:
<html>ルート要素のフォントサイズに相対的
margin-bottom: 10%;
パーセント値を使用できます。
パーセントは、コンテナの幅に基づいています。
#margin-left
要素の外側、左側のスペースを定義します。
デフォルト margin-left: 0;
左側のマージンを削除します。
margin-left: 50px;
ピクセル値を使用できます。
margin-left: 7em;
(r)em値を使用できます。
値はフォントサイズに相対的です。
- em: 要素の現在のフォントサイズに相対的
- rem:
<html>ルート要素のフォントサイズに相対的
margin-left: 30%;
パーセント値を使用できます。
パーセントは、コンテナの幅に基づいています。
margin-left: auto;
autoキーワードは、左側に残りのスペースの割合を与えます。
margin-right: autoと組み合わせると、固定幅が定義されている場合、要素を中央揃えにします。
#margin-right
要素の外側、右側のスペースを定義します。
デフォルト margin-right: 0;
右側のマージンを削除します。
margin-right: 50px;
ピクセル値を使用できます。
margin-right: 7em;
(r)em値を使用できます。
値はフォントサイズに相対的です。
- em: 要素の現在のフォントサイズに相対的
- rem:
<html>ルート要素のフォントサイズに相対的
margin-right: 30%;
パーセント値を使用できます。
パーセントは、コンテナの幅に基づいています。
margin-right: auto;
autoキーワードは、右側に残りのスペースの割合を与えます。
margin-left: autoと組み合わせると、固定幅が定義されている場合、要素を中央揃えにします。
#margin-top
要素の外側、上側のスペースを定義します。
デフォルト margin-top: 0;
上部のマージンを削除します。
margin-top: 30px;
ピクセル値を使用できます。
margin-top: 2em;
(r)em値を使用できます。
値はフォントサイズに相対的です。
- em: 要素の現在のフォントサイズに相対的
- rem:
<html>ルート要素のフォントサイズに相対的
margin-top: 10%;
パーセント値を使用できます。
パーセントは、コンテナの幅に基づいています。
#margin
margin-top margin-right margin-bottom および margin-left のショートハンドプロパティです。
デフォルト margin: 0;
すべてのマージンを削除します。
margin: 30px;
1つの値を使用すると、マージンは4辺すべてに設定されます。
margin: 30px 60px;
2つの値を使用する場合
- 最初の値は上/下用です
- 2番目の値は右/左用です
順序を覚えるには、定義していない値を考えてください。
2つの値（上/右）を入力すると、下と左の設定を省略します。下は上の垂直方向の対応物であるため、上の値を使用します。また、左は右の水平方向の対応物であるため、右の値を使用します。
margin: 30px 60px 45px;
3つの値を使用する場合
- 最初の値は上用です
- 2番目の値は右/左用です
- 3番目の値は下用です
順序を覚えるには、定義していない値を考えてください。
3つの値（上/右/下）を入力すると、左の設定を省略します。右の対応物として、その値を使用します。
margin: 30px 60px 45px 85px;
4つの値を使用する場合
- 最初の値は上用です
- 2番目の値は右用です
- 3番目の値は下用です
- 4番目の値は左用です
順序を覚えるには、上から開始して時計回りに進みます。
#max-height
要素がなり得る最大高さを定義します。
デフォルト max-height: none;
要素の高さに制限はありません。
max-height: 2000px;
ピクセル、(r)em、パーセンテージなどの数値を使用できます。
最大高さが要素の実際の高さより大きい場合、最大高さは効果がありません。
max-height: 100px;
コンテンツが最大高さに収まらない場合、オーバーフローします。コンテナがこのオーバーフローしたコンテンツをどのように処理するかは、overflowプロパティによって定義されます。
#max-width
要素がなり得る最大幅を定義します。
デフォルト max-width: none;
要素の幅に制限はありません。
max-width: 2000px;
ピクセル、(r)em、パーセンテージなどの数値を使用できます。
最大幅が要素の実際の幅より大きい場合、最大幅は効果がありません。
max-width: 150px;
コンテンツが最大幅に収まらない場合、コンテンツの折り返しに対応するために要素の高さが自動的に変更されます。
#min-height
要素の最小高さを定義します。
デフォルト min-height: 0;
要素に最小高さはありません。
min-height: 200px;
ピクセル、(r)em、パーセンテージなどの数値を使用できます。
最小高さが要素の実際の高さより大きい場合、最小高さが適用されます。
min-height: 5px;
最小高さが要素の実際の高さより小さい場合、最小高さは効果がありません。
#min-width
要素の最小幅を定義します。
デフォルト min-width: 0;
要素に最小幅はありません。
min-width: 300px;
ピクセル、(r)em、パーセンテージなどの数値を使用できます。
最小幅が要素の実際の幅より大きい場合、最小幅が適用されます。
min-width: 5px;
最小幅が要素の実際の幅より小さい場合、最小幅は効果がありません。
#padding-bottom
要素の内側、下側のスペースを定義します。
default padding-bottom: 0;
下側のパディングを削除します。
padding-bottom: 50px;
ピクセル値を使用できます。
padding-bottom: 7em;
(r)em値を使用できます。
値はフォントサイズに相対的です。
- em: 要素の現在のフォントサイズに相対的
- rem:
<html>ルート要素のフォントサイズに相対的
padding-bottom: 30%;
パーセント値を使用できます。
パーセンテージは、要素の幅に基づきます。
#padding-left
要素の内側、左側のスペースを定義します。
default padding-left: 0;
左側のパディングを削除します。
padding-left: 50px;
ピクセル値を使用できます。
padding-left: 7em;
(r)em値を使用できます。
値はフォントサイズに相対的です。
- em: 要素の現在のフォントサイズに相対的
- rem:
<html>ルート要素のフォントサイズに相対的
padding-left: 30%;
パーセント値を使用できます。
パーセンテージは、要素の幅に基づきます。
#padding-right
要素の内側、右側のスペースを定義します。
default padding-right: 0;
右側のパディングを削除します。
padding-right: 50px;
ピクセル値を使用できます。
padding-right: 7em;
(r)em値を使用できます。
値はフォントサイズに相対的です。
- em: 要素の現在のフォントサイズに相対的
- rem:
<html>ルート要素のフォントサイズに相対的
padding-right: 30%;
パーセント値を使用できます。
パーセンテージは、要素の幅に基づきます。
#padding-top
要素の内側、上側のスペースを定義します。
default padding-top: 0;
上側のパディングを削除します。
padding-top: 50px;
ピクセル値を使用できます。
padding-top: 7em;
(r)em値を使用できます。
値はフォントサイズに相対的です。
- em: 要素の現在のフォントサイズに相対的
- rem:
<html>ルート要素のフォントサイズに相対的
padding-top: 30%;
パーセント値を使用できます。
パーセンテージは、要素の幅に基づきます。
#padding
padding-top padding-right padding-bottom および padding-left のショートハンドプロパティです。
default padding: 0;
すべてのパディングを削除します。
padding: 30px;
1つの値を使用すると、パディングは4辺すべてに設定されます。
padding: 30px 60px;
2つの値を使用する場合
- 最初の値は上/下用です
- 2番目の値は右/左用です
順序を覚えるには、定義していない値を考えてください。
2つの値（上/右）を入力すると、下と左の設定を省略します。下は上の垂直方向の対応物であるため、上の値を使用します。また、左は右の水平方向の対応物であるため、右の値を使用します。
padding: 30px 60px 45px;
3つの値を使用する場合
- 最初の値は上用です
- 2番目の値は右/左用です
- 3番目の値は下用です
順序を覚えるには、定義していない値を考えてください。
3つの値（上/右/下）を入力すると、左の設定を省略します。右の対応物として、その値を使用します。
padding: 30px 60px 45px 85px;
4つの値を使用する場合
- 最初の値は上用です
- 2番目の値は右用です
- 3番目の値は下用です
- 4番目の値は左用です
順序を覚えるには、上から開始して時計回りに進みます。
#width
要素の幅を定義します。
default width: auto;
要素は、コンテンツが正しく表示されるように、幅を自動的に調整します。
width: 240px;
ピクセル、(r)em、パーセンテージなどの数値を使用できます。
width: 50%;
パーセンテージを使用する場合、値はコンテナの幅に対する相対値です。