このチュートリアルでは、2つのことに焦点を当てます：外部マージンと外部パディング。
まずは外部マージンから始めましょう。直接body内に定義されたp要素の場合、左右のウィンドウ端からの指定はbody要素の外側境界までの距離を意味します。複数の段落が続く場合、上下の外部パディングは各段落間の間隔を示します。
外部マージンとパディングの定義では、負の値も使用可能で、重なり合いを作り出すことができます。
外部マージンを設定する
マージンとパディングは、現在の要素とその親要素または隣接要素との間に設けられた強制的な空白スペースです。HTML要素内で、独自の段落を作成したりブロックを形成する際、以下のCSSプロパティが有用です。
marginは、margin-top、margin-right、margin-bottom、margin-leftの4つのプロパティの省略形です。使用可能な値は以下の通りです：
• auto – マージンは自動的に計算されます。
• パーセント指定 – marginが指定された要素に適用されます。
• 長さ指定 – 負の値も許容され、要素を重ねることができます。
最大4つの値を指定できます：
• 1つの値 – 上下左右の外部マージン
• 2つの値 – 1つ目は上下の外部マージン、2つ目は左右の外部マージン
• 3つの値 – 1つ目は上の外部マージン、2つ目は左右の外部マージン、3つ目は下の外部マージン
• 4つの値 – 1つ目は上の外部マージン、2つ目は右の外部マージン、3つ目は下の外部マージン、4つ目は左の外部マージン。
次の例は、一般的なmarginプロパティの使用を示しています：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
p {
background-color: yellow;
}
p.ex {
margin: 30px 50px 30px 50px;
background-color:#FF99FF;
</style>
</head>
<body>
<p>カメラリグの構築</p>
<p class="ex">このビデオトレーニングでは、カメラリグの作成方法とその3D空間での安全な移動方法について説明します。プロジェクトファイルが同梱されています。</p>
</body>
</html>
この例では、2つのテキスト段落が定義されています。
さらに、2番目の段落にはマージンが割り当てられています。
margin: 30px 50px 30px 50px;
この指定は以下を意味します：
• 上方向に30ピクセルのマージン
• 右方向に50ピクセルのマージン
• 下方向に30ピクセルのマージン
• 左方向に50ピクセルのマージン
各マージンの個別指定
先に一般的なmargin指定が紹介されました。個別の指定も可能です。要素の各辺の間隔を上下左右それぞれ指定するには、以下のプロパティを使用します。
• margin-top – 上方向の外部マージン/間隔
• margin-right – 右方向の外部マージン/間隔
• margin-bottom – 下方向の外部マージン/間隔
• margin-left – 左方向の外部マージン/間隔
これら4つのプロパティすべてで、以下の値を使用できます：
• auto – マージンは自動的に計算されます。
• パーセント指定 – margin-[top, right, bottom, left]が指定された要素に適用されます。
• 長さ指定 – 負の値も許容され、要素を重ねることができます。
以下の例は、個別の指定の効果的な使い方を示しています。
<!DOCTYPE html>
<html>
<head>
<style>
p {
background-color: yellow;
}
p.ex {
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 50px;
}
</style>
</head>
<body>
<p>カメラリグの構築</p>
<p class="ex">このビデオトレーニングでは、カメラリグの作成方法とその3D空間での安全な移動方法について説明します。プロジェクトファイルが同梱されています。</p>
</body>
</html>
ブラウザでの結果は次のようになります：
内部マージンを設定する
内部マージンは、要素のコンテンツとその要素自体の境界との間の強制的な空白スペースです。HTML要素内で、独自の段落を作成したりブロックを形成する際、以下のCSSプロパティが有用です。paddingは、padding-top、padding-right、padding-bottom、padding-leftの4つのプロパティの省略形です。これにより、要素の枠線とコンテンツの間の幅、つまり内部マージンを定義することができます。
• パーセント指定 – 親要素に適用されます。
• 長さ指定
各4つまでの値を指定できます：
• 1つの値 – 上下左右の内部マージン
• 2つの値 – 1つ目は上下の内部マージン、2つ目は左右の内部マージン
• 3つの値 – 1つ目は上の内部マージン、2つ目は左右の内部マージン、3つ目は下の内部マージン
• 4つの値 – 1つ目は上の内部マージン、2つ目は右の内部マージン、3つ目は下の内部マージン、4つ目は左の内部マージン。
以下に例を挙げます：
<!DOCTYPE html>
<html>
<head>
<style>
p {
background-color: yellow;}
p.ex {
padding-top: 25px;
padding-bottom: 25px;
padding-right: 50px;
padding-left: 50px;
}
</style>
</head>
<body>
<p>カメラリグのセットアップ</p>
<p class="ex">このビデオトレーニングでは、カメラリグを作成し、それを安全に3D空間を移動させる方法について学びます。プロジェクトファイルが付属しています。</p>
</body>
</html>そして、こちらがブラウザでの結果です：
四つのパディング属性を使って内部余白を定義できます。以下の四つのCSS属性が使用可能です：
• padding-top – コンテンツの上端と上部の余白の間隔
• padding-bottom – コンテンツの下端と下部の余白の間隔
• padding-left – コンテンツの左端と左側の余白の間隔
• padding-right – コンテンツの右端と右側の余白の間隔
これら四つの属性には、以下の値を使用できます：
• パーセンテージ指定 – 親要素に関連
• 長さ指定
