CSS【 margin 】1 ~ マージンとショートハンド

Banner Badge Label Blank Copy Space Concept

marginプロパティは、CSSでよく使うプロパティですが、特有のルールがあって悩みの種にもなりがちです。
今回は、このmarginプロパティと、ショートハンドについてまとめたいと思います。

目次

1.ショートハンドとは
2.marginの値
3.marginのショートハンドの書き方
4.個別指定のプロパティ

1.ショートハンドとは

CSSのショートハンドとは、複数のプロパティをまとめて1つのプロパティで指定する方法のことです。ショートハンドを使うと、スタイルシートの内容が読みやすくなったり、コード量が減るためにコーディング作業がスムーズになったりするメリットがあります。

例えば、上下左右のマージンを全部10pxにしたいとき、通常は次のように指定します。

margin-top:10px;
margin-right:10px;
margin-bottom:10px;
margin-left:10px;

この書き方だと、指定する際も大変ですが、後で変更があった場合は4箇所の値をそれぞれ修正行する必要があります。

同じ内容の仕様を、ショートハンドを使って指定すると、次のような書き方となります。

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回分の再生時間、速度に緩急をつる、開始のタイミング、再生回数、逆方向の再生

▲目次へ戻る

 

2.marginの値

marginプロパティは、要素の外側の隣りのボックスとの間隔、または子要素の場合は親要素のとの間隔を指定します。
marginプロパティの値は、次の通りです。

auto 値が自動計算される
数値 px や em などの単位を付けて指定
% 要素の幅や高さに対するパーセントで指定

marginプロパティの値は、継承されません。
また、marginプロパティは、tr要素などテーブル関連の要素を除き、全ての要素で使用できます。

▲目次へ戻る

 

3.marginのショートハンドの書き方

marginプロパティのショートハンドの書き方には、ルールがあります。
このルールは、paddingプロパティやborderプロパティなどでも共通のルールです。

値が1つの場合は、上下左右が全て同じ値
{margin:値;}のように値を1つ指定している場合は、上下左右全て同じ値という意味の指定です。

margin:3em;

(CSSソース)
div p {
background:#e9ffd3;
margin:3em;}

(HTMLソース)
<div>
<p>margin:3em;</p>
</div>

値が2つの場合は、上下と左右の値
{margin:値1 値2;}のように値を2つ指定している場合は、上下(同じ値で値1)と左右(同じ値で値2)という意味の指定です。
値と値の間は、半角スペースで区切ります。

margin:1em 3em;

(CSSソース)
div p {
background:#e9ffd3;
margin:1em 3em;}

(HTMLソース)
<div>
<p>margin:1em 3em;</p>
</div>

値が3つの場合は、上、左右、下、の値
{margin:値1 値2 値3;}のように値を3つ指定している場合は、上(値1)、左右(同じ値で値2)、下(値3)という意味の指定です。
値と値の間は、半角スペースで区切ります。

margin:1em 2em 3em;

(CSSソース)
div p {
background:#e9ffd3;
margin:1em 2em 3em;}

(HTMLソース)
<div>
<p>margin:1em 2em 3em;</p>
</div>

値が4つの場合は、上、右、下、左、の値
{margin:値1 値2 値3 値4;}のように値を4つ指定している場合は、上から始まって時計回りに、上(値1)、右(値2)、下(値3)、左(値4)という意味の指定です。
値と値の間は、半角スペースで区切ります。

margin:1em 2em 3em 0;

(CSSソース)
div p {
background:#e9ffd3;
margin:1em 2em 3em 0;}

(HTMLソース)
<div>
<p>margin:1em 2em 3em 0;</p>
</div>

▲目次へ戻る

 

4.個別指定のプロパティ

マージンの上下左右の値をショートハンドで指定できるので、個別のmargin-rightプロパティなどは必要ないようにも思えますが、例えば、ショートハンドで値を指定した上で、一部だけピンポイントで値を変えたい場合には、個別指定のプロパティを使います。

入れ子にしたリストを、ショートハンドでmarginプロパティを指定すると、次のような表示になります。

  • AList
    • AList1
    • AList2
    • AList3

(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プロパティを使っています。
このように、シーンに合わせて個別指定のプロパティを使います。

▲目次へ戻る

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です