ほんっとにはじめての HTML5 と CSS3

今回から margin（マージン）プロパティについて。
margin は、CSSレイアウトですっごくよく使いますが、これがけっこうクセ者です。

autoという値・ネガティブマージン・相殺（マージンどうしの結合）など、marginだけの独特のルールがあるんです。
それを知らないままだと、いつまでもCSSで手こずるハメに。（経験者は語るww）
そんなわけで、marginでぜひ覚えておいたほうがイイことを、これから4回に分けて書いていきます。

今回は、けっこう簡単な margin のショートハンドについて。
ショートハンドの書き方の基本を見てみましょう。

margin は上下左右にありますので
margin-top　margin-bottom　margin-left　margin-right という4つのプロパティがあります。
この4つを、いちいち別々に指定しなくても、ショートハンドプロパティmargin で1つにまとめて書くことができます。
この 一括でまとめて書く方法を、CSSの ショートハンド（Shorthand）と言います。

1. ショートハンドとは
2. margin で使える値
3. margin のショートハンドの使い方
   1. 値が1つ = 上下左右が全部同じ値
   2. 値が2つ = 上下と左右
   3. 値が3つ = 上、左右、下
   4. 値が4つ = 上から時計回り（上、右、下、左）
4. margin-right などの個別指定はどんなときに使うか

ショートハンドとは

CSSの「ショートハンド」とは、指定を一括でまとめて書く方法。

例えば、上下左右のマージンを全部20pxにしたいとき、
margin-top:20px;
margin-right:20px;
margin-bottom:20px;
margin-left:20px;
なんつって4行も書いていたら大変ですね。後でやっぱり30pxにしたいなんてとき、4行とも直さなくちゃならなくてめんどくさいし。
これをたった1行の
margin:20px;
というショートハンドで書けばOKというわけ。便利だしシンプルなソースに書けるので、積極的に使っていきましょう。

ショートハンドは別に margin だけにあるのではなく、padding や border、background や font などにもショートハンドが用意されています。
ざっと、どんなショートハンドプロパティがあるか、表にしてみました。
これらのうち、よく使うものを順次紹介していく予定です。けど、とにかく今回は marginね。

ショートハンドを指定できるプロパティ（まだあるかもだけど、一応こんなところでしょう）
margin	マージンの上、下、左、右
padding	パディングの上、下、左、右
background	背景色、背景画像、画像の表示位置 / 画像のサイズ、画像の繰り返し方法、描画領域、画像の配置基点、画像のスクロール方法
border	ボーダーの上、下、左、右の　太さ、スタイル、色
border-image	ボーダーに使用する画像、画像のスライス、太さ、外側への拡張、繰り返し方法
outline	アウトラインの太さ、スタイル、色
font	文字のスタイル（イタリックか正体か）、文字の表示機能（small-capsとか）、文字の太さ、サイズ / 行の高さ、書体（font-family）
list-style	リストマーカーの種類、位置、画像
columns	マルチカラムの個数、カラム幅
transform	マトリックス変形、移動距離、拡大率、回転の角度、傾斜角度
transition	遷移させるプロパティ、変化にかける時間、変化中の速度、開始のタイミング
animation	アニメーションの名前、1回分の再生時間、速度に緩急をつる、開始のタイミング、再生回数、逆方向の再生

margin で使える値

margin は、要素の外側の隣接するボックスとの間隔、または子要素の場合は親要素のとの間隔ですので、距離を指定します。以下の値が使えます。

margin の値
auto	値が自動計算されます（autoに関しては次回詳細）
数値	px や em などの単位を付けて指定します
%	要素の幅や高さに対するパーセントで指定

値の継承	なし	適用できる要素	全部 ただし、テーブル関連の <tr> <th> <td> <thead> <tbody> <tfoot> <colgroup> <col> には使えないので要注意。

margin のショートハンドの使い方

では、margin のショートハンドの法則を見ていきましょう。
下で説明する法則は、padding や border などでも共通のものなので、ぜひ覚えておこう。

値が1つ = 上下左右が全部同じ値

margin:値 というカタチで値が1つなら、上下左右ぜんぶ同じ値という意味です。

サンプルを作ってみました。

HTMLソースです（以下のサンプルのHTMLは全部これと同じ構造です）

<div>
<p>値が１つのサンプルです</p>
</div>

CSSはこちら。

div {
	border:solid 1px #ccc;  /*←ここにもショートハンド使ってるけどね。これはボーダー*/
	padding:0;}   /*←これもショートハンドだわ。パディングが上下左右全部0という意味です*/
div p {
	text-align:center;
	line-height:3em;
	background:#e9ffd3;
	margin:1em;}  /*値が1つだと、上下左右同じという意味です*/

値が2つ = 上下と左右

margin:値 値 で値が2つなら「上下」「左右」の値だという意味。
値と値の間は「半角スペース」で区切ります。

div p { /*他の指定は略（先ほどとまったく同じ指定です）*/
	margin:1em 10%;}  /*値が2つで「上下」「左右」の値*/

値が3つ = 上、左右、下

margin:値 値 値 で値が3つなら「上」「左右」「下」の値だという意味。
値と値の間は「半角スペース」で区切ります。

div p { /*他の指定は略*/
	margin:0.7em 10% 25px;}  /*値が3つで「上」「左右」「下」の値*/

値が4つ = 上から時計回り（上、右、下、左）

margin:値 値 値 値 で値が4つだと、ちょっと変わった法則です。
上から始まって時計回りに「上 → 右 → 下 → 左」の値を表します。
値と値の間は「半角スペース」で区切ります。

div p { /*他の指定は略*/
	margin:0.7em 10% 25px 0;}  /*値が4つで「上 → 右 → 下 → 左」の値*/

margin-right などの個別指定はどんなときに使うか

マージンの上下左右の値を ショートハンド で書けるんだったら、margin-right やら margin-bottom などの個別のプロパティってどこに使うの？ って思いますよね。

まずショートハンドプロパティで指定した後、ほかの値はそのままで、ピンポイントで変えたいというときに、個別指定のプロパティを使うと便利です。

サンプルを見てみましょう。
入れ子にしたリストの、一番最後の <li>要素の margin-bottom だけ違う値にした例です。

• List1
  • List1_1
  • List1_2
  • List1_3　ここだけ margin-bottom: 0 にしています

HTMLはこちら。

<ul id="sample5">
 <li>List1
  <ul>
   <li>List1_1</li>
   <li>List1_2</li>
   <li>List1_3</li>
  </ul>
 </li>
</ul>

CSSはこちら。

ul#sample5 {border:solid 1px #ccc; margin:0; padding:0; font-weight:bold;}
ul#sample5 li {
	margin:1em;
	padding:1em;
	list-style:none;
	background:rgba(102, 153, 255, 0.5);
	border-radius:5px;
	color:#fff;
	line-height:1em;}
ul#sample5 li ul {margin:0;}
ul#sample5 li ul li {margin:1em 0 1em 3em;}
ul#sample5 li ul li:last-child {margin-bottom:0;}

入れ子にした <ul>要素内の <li>要素は、上下のマージンが1emずつです（11行目）が、マージンの相殺により各 <li>要素の間隔は 1em になります。合計の 2em にはなりません。
（マージンの相殺については後日【11-4】で詳しくやります。）

ですが 最後の<li>は、親の padding と自分の margin のおかげで、下が 2em 空いてしまいます。
これを解消して、下の空きを他と同じ 1em にするために、
擬似クラス「 :last-child 」で、最後の<li>だけ 下マージンを 0 にしています。（12行目）
ここでは下マージンだけしか変更したくないので、margin-bottom プロパティだけ使っています。
こんなかんじで、シーンに合わせてプロパティを使い分けるってわけです。

擬似クラス については、
【3】id とか classって何？（セレクタの「種類」を知っておこう）を、
「em」「%」「px」という単位については、
【7-1】CSSのサイズの単位について（em, %, px, rem の使い分け）をご覧ください。

次回予告

今回のショートハンドの書き方は、他のショートハンドプロパティでも共通のルールなので、よ〜く覚えておこう。特に4つ書く時の「時計回りの上→右→下→左」は覚えておいて損は無いですw　すごくよく使うから。

さて次回は margin の「auto」という値について。
margin は、数値だけでなく「auto（オート=自動）」という値も使えます。
「auto」はブラウザが自動でサイズを計算してくれる値。使いこなせば、要素をセンター合わせにできたりして便利です。でもけっこうクセがあるんだな、これが。

関連記事

• 【14】borderとよく似た outlineはレイアウトを崩さない
• 【13-2】border-imageと border-imageのショートハンド
• 【13-1】borderと borderのショートハンド
• 【12】paddingと paddingのショートハンド
• 【11-4】marginの相殺（margin collapsing）
• 【11-3】はみ出て便利♪ ネガティブ・マージン（Negative Margin）
• 【11-2】marginの auto という値の「？」を解決しておこう
• 【11-1】marginと marginのショートハンド
• 【10】ボックスモデル（margin, padding, border を使いこなそう）
• 【9】HTML要素の インラインレベル・ブロックレベル について
• 【8】CSSの「色」と「透明度」の指定
• 【7-2】CSS3の新しい単位 vw, vh, vmin, vimax について
• 【7-1】CSSのサイズの単位について（em, %, px, rem の使い分け）
• 【6】CSSって具体的に何ができる？（プロパティについてざっくりと）
• 【5】CSSの値の継承（Inheritance）のルール