ホーム＞コース別ガイド一覧＞余白（マージン）を指定しましょう！
余白（マージン）を指定しましょう！（margin-top、margin-bottom、margin-left、margin-right プロパティ） |
   |
CSS一覧プロパティ辞典 … margin-top プロパティ
margin-top プロパティを使うと、要素の上部のマージン（余白）を広げたり狭くしたりできます。値には長さ（「px」など）、パーセンテージ（「%」）、autoを指定できます。auto を値に指定すると、余白は「0」となります。
CSS一覧プロパティ辞典 … margin-bottom プロパティ
margin-bottom プロパティを使うと、要素の下部のマージン（余白）を広げたり狭くしたりできます。値には長さ（「px」など）、パーセンテージ（「%」）、autoを指定できます。auto を値に指定すると、余白は「0」となります。
CSS一覧プロパティ辞典 … margin-left プロパティ
margin-left プロパティを使うと、要素の左側のマージン（余白）を広げたり狭くしたりできます。値には長さ（「px」など）、パーセンテージ（「%」）、autoを指定できます。auto を値に指定すると、余白は右側の余白と要素の幅により自動的に決まります。
CSS一覧プロパティ辞典 … margin-right プロパティ
margin-right プロパティを使うと、要素の右側のマージン（余白）を広げたり狭くしたりできます。値には長さ（「px」など）、パーセンテージ（「%」）、autoを指定できます。auto を値に指定すると、余白は左側の余白と要素の幅により自動的に決まります。
ブロック要素（表など）を中央に配置！
margin-left プロパティと margin-right プロパティの値を「auto」にすると、表のような幅の決まっているブロック要素を中央揃えにすることができます。
ブロック要素（表など）を右に配置！
margin-left プロパティの値を「auto」にすると、表のような幅の決まっているブロック要素を右揃えや左揃えにすることができます。例えば margin-left プロパティの値を「auto」、margin-rightプロパティの値を「3em」に指定すると、右の余白は３文字分の余白で、左の余白は自動的に指定されます。
もともと余白が取られている要素の余白をなくすには？
h1 要素や p 要素などのようにもともと余白が取られている要素の余白をなくすには、上下の（マージン）余白を指定できるmargin-top プロパティとmargin-bottom プロパティの値を「0」に設定します。
負の値を指定できます
マージンの幅を狭くしたい場合や画像を重ねたい場合はマイナスの値で指定します。
margin-top プロパティ、margin-left プロパティを使用し、h1 要素の上側と p 要素の左側に余白を入れてみましょう！
記述例
<html>
<head>
<title>一人暮らしの前向き料理</title>
<style type="text/css">
body { background-color: moccasin;}
h1 {
background-color: moccasin;
margin-top: 1em;
}
span{ font-weight: bold; }
p { line-height: 1.7em; margin-left: 1em; }
p.copy { font-family: "Ｍ ＳＰ明朝",serif; }
</style>
</head>
<body>
<h1>簡単に作れるワンポイント料理</h1>
<p>料理を少しおいしくするための<br>
ワンポインを紹介します！</p>
<p>おいしいチャーハンの作り方</p>
<p class="copy">Copyright © 2007 TomMY. All Rights Reserved.</p>
</body>
</html> |
|
[margin-topプロパティ、margin-leftプロパティ適応前のブラウザでの表示例]
| 一人暮らしの前向きな料理 |
簡単に作れるワンポイント料理
料理を少しおいしくするための
ワンポイントを紹介します！
おいしいチャーハンの作り方
Copyright © 2007 TomMY. All Rights Reserved. |
|
 |
[margin-topプロパティ、margin-leftプロパティ適応後のブラウザでの表示例]
| 一人暮らしの前向きな料理 |
簡単に作れるワンポイント料理
料理を少しおいしくするための
ワンポイントを紹介します！
おいしいチャーハンの作り方
Copyright © 2007 TomMY. All Rights Reserved. |
|
このように h1 要素の上側に１文字分の余白を取り（h1 { margin-top: 1em}）、p 要素の左側に１文字分の余白を取りました（p { margon-left: 1em;}）。マージンの指定は慣れればそれほど難しくないので、いろいろ試してみましょう！
