CSS【 margin 】1 ～ マージンとショートハンド
marginプロパティは、CSSでよく使うプロパティですが、特有のルールがあって悩みの種にもなりがちです。
今回は、このmarginプロパティの概要と、ショートハンドについてまとめたいと思います。
marginプロパティについては、以下のページもご参照下さい。
CSS【 margin 】1 ～ マージンとショートハンド（本ページ）
CSS【 margin 】2 ～ autoとwidthと上下と左右
CSS【 margin 】3 ～ ネガティブマージン
CSS【 margin 】4 ～ マージンの相殺 (margin collapsing)（1）
CSS【 margin 】5 ～ マージンの相殺 (margin collapsing)（2）
目次
１．ショートハンドとは
２．marginの値
３．marginのショートハンドの書き方
４．個別指定のプロパティ
１．ショートハンドとは
CSSのショートハンドとは、複数のプロパティをまとめて１つのプロパティで指定する方法のことです。ショートハンドを使うと、スタイルシートの内容が読みやすくなったり、コード量が減るためにコーディング作業がスムーズになったりするメリットがあります。
例えば、上下左右のマージンを全部10pxにしたいとき、通常は次のように指定します。
margin-top:10px;
margin-right:10px;
margin-bottom:10px;
margin-left:10px;
この書き方だと、指定する際も大変ですが、後で変更があった場合は４箇所の値をそれぞれ修正行する必要があります。
同じ内容の仕様を、ショートハンドを使って指定すると、次のような書き方となります。
margin:10px;
便利で読みやすく、修正作業も捗ります。
marginの他、padding や border、background、font などでもショートハンドが使えます。
ショートハンドを指定できるプロパティ
| margin |
マージンの上、下、左、右 |
| padding |
パディングの上、下、左、右 |
| background |
背景色、背景画像、画像の表示位置 / 画像のサイズ、画像の繰り返し方法、描画領域、画像の配置基点、画像のスクロール方法 |
| border |
ボーダーの上、下、左、右の 太さ、スタイル、色 |
| border-image |
ボーダーに使用する画像、画像のスライス、太さ、外側への拡張、繰り返し方法 |
| outline |
アウトラインの太さ、スタイル、色 |
| font |
文字のスタイル（イタリックか正体か）、文字の表示機能（small-capsとか）、文字の太さ、サイズ / 行の高さ、書体（font-family） |
| list-style |
リストマーカーの種類、位置、画像 |
| columns |
マルチカラムの個数、カラム幅 |
| transform |
マトリックス変形、移動距離、拡大率、回転の角度、傾斜角度 |
| transition |
遷移させるプロパティ、変化にかける時間、変化中の速度、開始のタイミング |
| animation |
アニメーションの名前、1回分の再生時間、速度に緩急をつる、開始のタイミング、再生回数、逆方向の再生 |
▲目次へ戻る
２．marginの値
marginプロパティは、要素の外側の隣りのボックスとの間隔、または子要素の場合は親要素のとの間隔を指定します。
marginプロパティの値は、次の通りです。
| auto |
値が自動計算される |
| 数値 |
px や em などの単位を付けて指定 |
| % |
要素の幅や高さに対するパーセントで指定 |
marginプロパティの値は、継承されません。
また、marginプロパティは、tr要素などテーブル関連の要素を除き、全ての要素で使用できます。
▲目次へ戻る
３．marginのショートハンドの書き方
marginプロパティのショートハンドの書き方には、ルールがあります。
このルールは、paddingプロパティやborderプロパティなどでも共通のルールです。
| 値が１つの場合は、上下左右が全て同じ値 |
｛margin:値;｝のように値を１つ指定している場合は、上下左右全て同じ値という意味の指定です。
（CSSソース）
div p {
background:#e9ffd3;
margin:3em;}
（HTMLソース）
<div>
<p>margin:3em;</p>
</div>
|
| 値が２つの場合は、上下と左右の値 |
｛margin:値1 値2;｝のように値を２つ指定している場合は、上下（同じ値で値1）と左右（同じ値で値2）という意味の指定です。
値と値の間は、半角スペースで区切ります。
（CSSソース）
div p {
background:#e9ffd3;
margin:1em 3em;}
（HTMLソース）
<div>
<p>margin:1em 3em;</p>
</div>
|
| 値が３つの場合は、上、左右、下、の値 |
｛margin:値1 値2 値3;｝のように値を３つ指定している場合は、上（値1）、左右（同じ値で値2）、下（値3）という意味の指定です。
値と値の間は、半角スペースで区切ります。
（CSSソース）
div p {
background:#e9ffd3;
margin:1em 2em 3em;}
（HTMLソース）
<div>
<p>margin:1em 2em 3em;</p>
</div>
|
| 値が４つの場合は、上、右、下、左、の値 |
｛margin:値1 値2 値3 値4;｝のように値を４つ指定している場合は、上から始まって時計回りに、上（値1）、右（値2）、下（値3）、左（値4）という意味の指定です。
値と値の間は、半角スペースで区切ります。
（CSSソース）
div p {
background:#e9ffd3;
margin:1em 2em 3em 0;}
（HTMLソース）
<div>
<p>margin:1em 2em 3em 0;</p>
</div>
|
▲目次へ戻る
４．個別指定のプロパティ
マージンの上下左右の値をショートハンドで指定できるので、個別のmargin-rightプロパティなどは必要ないようにも思えますが、例えば、ショートハンドで値を指定した上で、一部だけピンポイントで値を変えたい場合には、個別指定のプロパティを使います。
入れ子にしたリストを、ショートハンドでmarginプロパティを指定すると、次のような表示になります。
（CSSソース）
ul#sample1 {border:solid 1px #ccc; margin:0; padding:0; font-weight:bold;}
ul#sample1 li {
margin:1em;
padding:1em;
background:rgba(49, 169, 238, 0.5);
color:#fff;
line-height:1em;}
ul#sample5 li ul {margin:0;}
ul#sample5 li ul li {margin:1em 0 1em 3em;}
（HTMLソース）
<ul id="sample1">
<li>AList
<ul>
<li>AList1</li>
<li>AList2</li>
<li>AList3</li>
</ul>
</li>
</ul>
入れ子にしたul要素内のli要素は、上下のマージンが1emずつですが、マージンの相殺により各li要素間は、合計の2emにはならず、1emとなります。
ですが 最後のli要素は、親のpaddingと自分のmarginのおかげで、下が2em空いてしまいます。
これを、下の空きを他と同じ1emにしたい場合は、最後のli要素だけmargin-bottomプロパティを指定します。
- BList
- BList1
- BList2
- BList3 ここだけ「 margin-bottom: 0 」と指定しています
（CSSソース）
ul#sample2 {border:solid 1px #ccc; margin:0; padding:0; font-weight:bold;}
ul#sample2 li {
margin:1em;
padding:1em;
background:rgba(49, 169, 238, 0.5);
color:#fff;
line-height:1em;}
ul#sample2 li ul {margin:0;}
ul#sample2 li ul li {margin:1em 0 1em 3em;}
ul#sample2 li ul li:last-child {margin-bottom:0;}
（HTMLソース）
<ul id="sample2">
<li>BList
<ul>
<li>BList1</li>
<li>BList2</li>
<li>BList3</li>
</ul>
</li>
</ul>
擬似クラス「 :last-child 」で、最後の要素だけ下マージンを 0 にしています。
ここでは、一番最後の下マージンだけを変更したいので、margin-bottomプロパティを使っています。
このように、シーンに合わせて個別指定のプロパティを使います。
▲目次へ戻る
