column

ITコラム

Banner Badge Label Blank Copy Space Concept

プログラミングノウハウ

2017.04.05

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)

なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3%で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。

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

▲目次へ戻る

無料説明会

SHARE

最新記事

無料説明会に参加してみる

INTERNOUS,inc. All rights reserved.

無料オンライン説明会へ