【初心者必見】CSSのmarginを理解して、余白を制する

CSSを学習し始めて、最初の難関となるのが、CSSのmarginプロパティ。

「margin指定しているけど、思った通りに効かない」

「paddingでも余白は取れるけど、marginとpaddingどっちを使えばいいの？」

など、勉強しているとたくさんの疑問が生まれますよね。ややこしいプロパティではありますが、CSSでは必要になる知識です。

CSSのmarginはWebサイトを設計していく上で非常に大事になるプロパティです。最初は難しく感じるかもしれませんが、学習を開始した序盤で必ずマスターしておきましょう。

今回のこの記事で、marginの意味や使い方、うまく効かない時の対処方法なども紹介していきますので、最後までご覧ください。

CSSのmarginとは

marginは英語で、余白や余地、端という意味があります。

CSSのmarginにおいても、端の余白として高頻度で使われるプロパティになります。

marginの読み方は、「マージン」です。

Webサイトのレイアウトを整えたり、見やすくしたりとmarginは非常に重要な役割を担っているプロパティになります。

Webサイトのデザインは余白をうまく使うことが重要になってくるため、このmarginプロパティを覚えることは必須です。

CSSのmarginの正しい知識を身につけましょう。

marginとpaddingの違い

余白を整えるのがmarginと紹介しましたが、他にも余白を整えるプロパティがあります。

paddingです。

ここでは、このmarginとpaddingの違いについて解説していきます。

marginとpaddingの違いは簡単に言ってしまえば、

ブロックの外側と内側の余白のどちらを調整するかで使用するプロパティが変わってくるということです。

さらにわかりやすく例えると、

実際のコードを示しながら、解説していきます。

HTML
<div class="container">
    <div class="block1">
        ブロック1
    </div>
    <div class="block2">
        ブロック2
    </div>
</div>

CSS
.container{
  border: 2px solid;
}
.block1{
  background-color: cadetblue;
  margin: 20px;
}
.block2{
  background-color: darkorange;
  padding: 20px;
}

上記の図からわかるように、marginは要素の外側の余白（今回はブロック1の外側）、paddingは要素の内側の余白（今回はブロック2の内側）を指定します。

Webサイトやアプリケーションは、たくさんのブロックが集まって構成されています。

ブロックとブロックの間のレイアウトがmarginで、ブロックの中のレイアウトがpaddingと覚えておくとわかりやすいでしょう。

marginの記述方法

CSSにおけるmarginの記述方法は、上下左右の4つを指定して記述します。

top、right、bottom、leftと上下左右の英語をmarginの後ろに持ってくるだけなので簡単です。

例えば、ブロック1の上に余白20pxを入れたいときには、

HTML
<div class="container">
    <div class="block1">
        ブロック1
    </div>
    <div class="block2">
        ブロック2
    </div>
</div>

CSS
.container{
  border: 1px solid;
}
.block1{
  background-color: cadetblue;
  margin-top: 20px;
}
.block2{
  background-color: darkorange;
}

入れたい要素（今回はブロック1）にmargin-topを指定するだけです。

margin-topをmargin-rightに変えると、

こうなります。

では、上下左右に20pxずつ余白を設けたいときはどうしたら良いのでしょう。

先程のHTMLに上下左右に20pxずつ余白を設けるCSSを記載します。

CSS
.container{
  border: 1px solid;
}
.block1{
  background-color: cadetblue;
  margin-top: 20px;
  margin-left: 20px;
  margin-bottom: 20px;
  margin-right: 20px;
}
.block2{
  background-color: darkorange;
}

しかし、このように同じ値の余白を一つずつ指定する記述では時間が掛かりますし、探すのが面倒です。

そのような場合はショートハンドを使用した記述方法がありますので紹介します。

marginをショートハンドで記載して簡略化

marginは上下左右を一行で記載することができます。

余白を入れたい場所と値によって記載方法が違うので紹介します。

marginの基本的なショートハンドのパターンは4種類です。

記載方法の少しのミスでうまく余白が取れませんので注意が必要です。

余白を入れたい場所のパターンごとに記述方法を紹介します。

上下左右全ての値が違うパターン

上下左右全ての値が違うパターンのショートハンドの記載方法は、

CSS
〇〇{margin:上の余白の値 右の余白の値 下の余白の値 左の余白の値;}

例えば、ブロック1の上に10px、右に20px、下に30px、左に40pxの余白を入れたい場合は、

HTML
<div class="container">
    <div class="block1">
        ブロック1
    </div>
    <div class="block2">
        ブロック2
    </div>
</div>

CSS
.container{;
  border: 1px solid;
}
.block1{
  background-color: cadetblue;
  margin: 10px 20px 30px 40px;
}
.block2{
  background-color: darkorange;
}

ブロックを囲んで時計回りに記載していくことを覚えておきましょう。上下左右ではないので注意が必要です。

さらに、指定する値と値の間はコンマではなく半角スペースです。間違えることがあるので、覚えておきましょう。

上下の値が同じで、左右の値が同じパターン

上下が20px、左右が30pxの余白を入れたい場合には、

CSS
〇〇{margin:20px 30px;}

例として、先程のHTMLのブロック2に上下20px、左右30pxの余白を入れます。

前の値に上下、後ろの値に左右の余白を記述します。

CSS
.container{
  border: 1px solid;
}
.block1{
  background-color: cadetblue;
}
.block2{
  background-color: darkorange;
  margin: 20px 30px ;
}

上下が別の値で、左右が同じ値のパターン

上が20px、下が30px、左右が40pxの余白を入れたい場合には、

CSS
〇〇{margin:20px 40px 30px;}

例文も示します。ブロック2に余白を入れます。

前の値に上、中央の値に左右、後ろの値に下の余白を記述します。

CSS
.container{
  border: 1px solid;
CSS
.container{
  border: 1px solid;
}
.block1{
  background-color: cadetblue;
}
.block2{
  background-color: darkorange;
  margin: 20px 40px 30px ;
}

上下左右の値全てが同じパターン

上下左右にすべて同じ20pxの余白を入れたい場合は、

CSS
〇〇{margin:20px;}

例文を示します。

CSS
.container{
  border: 1px solid;
}
.block1{
  background-color: cadetblue;
  
}
.block2{
  background-color: darkorange;
  margin: 20px;
}

これだけで上下左右の4ヶ所に同じ20pxの余白を入れることができます。

ショートハンドは使用する頻度が非常に高いです。しかし、使用する際の注意点も少なからずあるので紹介します。

marginのショートハンドを使用する際の注意点

marginのショートハンドは便利で、記述しやすいため頻繁に使用されます。

しかし、CSSは一度書いて終わりではなく、その後も修正や保守などを繰り返します。

その際に、なにも考えずにショートハンドを使用していた部分が読み取りにくく、修正に時間を要してしまうことがあります。

簡単な例として右と下に余白を付けたい場合にショートハンドで、

CSS
〇〇{margin:0px 20px 10px 0px;}

このような記載をしていることがあります。

この場合、無駄に上と左に0pxを指定していることがわかります。

現在のWebサイトは表示速度も重要視されており、CSSに無駄が無いように記述する方が好ましいとされています。

ですので、ここはショートハンドを使わずに、

CSS
〇〇{margin-right:20px;
　   margin-bottom:10px;
       }

と記載しておくことがベストといえるでしょう。

ただコードを書いて終わりではなく、あとから見ても理解でき、修正しやすいコードを記載するように心がけましょう。

marginの相殺を理解しよう

CSSのmarginを勉強していくうえで、必ずぶち当たる壁がmarginの相殺の話。

ブロックとブロックのmarginがぶつかり合って、相殺されるのですがイマイチわかりにくいですよね。

ここでは、marginの相殺についてわかりやすく解説します。

marginの相殺では、大きい値が余白として当てられる

CSSのmarginの相殺とは、隣合うブロックとブロックのmarginがぶつかり合って片方のmarginの値の余白分しか当てられないことです。ちなみにpaddingには相殺はありません。

通常であれば足し算されるように思いますが、CSSのmarginはそう簡単ではありません。

足し算されないのであればmarginの値はどうなるのか。

それは、値が大きいmarginが優先されます。

これだけではわかりにくいので、例文を用いて説明します。

例えば、上下で隣り合うブロックがあったとします。上のブロックのmargin-bottomが30px、下のブロックのmargin-topが20pxの場合で考えます。

HTML
<div class="container">
    <div class="block1">
        ブロック1
    </div>
    <div class="block2">
        ブロック2
    </div>
</div>

CSS
.container{
  border: 1px solid;
}
.block1{
  background-color: cadetblue;
  margin-bottom: 30px;
}
.block2{
  background-color: darkorange;
  margin-top: 20px;
}

この時、marginの値が大きいのは上のブロックのmargin-bottomの30pxとなります。

ですので、このブロック1とブロック2の間の余白は30pxとなります。

これは、親要素と子要素の間でも成り立ちます。

親要素のmargin-topが10pxで子要素よmargin-topが30pxの場合は、親要素のmargin-top:10pxは無視されて、子要素のmargin-top:30pxが適用されるのです。

ここで例文を示します。

HTML
<div class="container">
    <div class="block1">
        <p>ブロック1</p>
    </div>
    <div class="block2">
        <p class="block2_child">ブロック2</p>
    </div>
</div>

CSS
.container{
  border: 1px solid;
}
.block1{
  background-color: cadetblue;
}
.block2{
  background-color: darkorange;
  margin-top: 10px;
}
.block2_child{
  margin-top: 30px;
}

上記のようにmarginが重なり合うときは、値が大きい方のmarginが適用されることを覚えておきましょう。

marginのブラウザにおける確認方法

コードだけを見ていても、実際のmarginがどのくらい効いているかをイメージするのは難しいです。

そこで活躍するのが、ブラウザに搭載されている検証機能です。

ここでは、Googlechromeを使った例を紹介します。

右クリックをして、一番下の検証を押すか、右上の三点ドットを押してその他のツールからデベロッパーツールから開くことができます。

検証やデベロッパーツールを押すと、下のような画面が表れます。初めて見る人は英語ばかりで焦るかもしれませんが、故障することは無いので色々触ってみましょう。

この検証機能の中でmarginを見やすく確認する方法は下の画像ような表示を探してください。大体は右側のCSSの値を一番下にスクロールすると発見することができます。

この要素の場合、marginはtopとleftに10pxずつ入っていることがわかります。

検証機能は、他人のWebサイトを参考にする際に大変役に立ちますので、これから勉強していく上で必須機能といえるでしょう。

marginのautoでレイアウトを整える

CSSのmarginにはautoという便利な値があります。

marginのautoをうまく使うことができれば、レイアウトも組みやすくなるので覚えておきましょう。

marginのautoでできることは、

それぞれの方法と、例コード、注意点を紹介していきます。

marginのautoを使って要素を中央寄せする

要素をmarginを使って中央寄せにする場合、親要素の幅に合わせて左右の余白を均等にする必要があります。

言葉ではわかりにくいので、コードを紹介します。

HTML
<div class="container">
    <div class="block1">
       ブロック1
    </div>
    <div class="block2">
        ブロック2
    </div>
</div>

CSS
.container{
  width: 400px;
  border: 1px solid;
}
.block1{
  background-color: cadetblue;
  width: 200px;
  margin: 0 auto;
  text-align: center;
}
.block2{
  background-color: darkorange;
}

ブロック1にmargin:0 auto;を指定することによって、親要素の幅（ここでは400px）からブロック1の幅（ここでは200px）を引いた残りの200pxを左右で均等に割ったこととなり、左右に100pxずつの余白ができます。これがautoで中央寄せする仕組みです。

上下に余白を入れたい時は、margin:10px auto;と記載すると上下にも10pxずつ余白が入ります。

ちなみに、ブロック1のテキストはmargin:0 auto;では中央寄せにはなりません。テキストを中央寄せするtext-align:center;を使用しています。混合しないように注意です。

marginのautoを使って要素を右寄せにする

左寄せはmarginを指定しなければ、ブロックは常に左側にあるので問題ありません。しかし、右寄せにしたい場合はmarginやflexboxを使う必要があります。ここでは、marginで要素を右寄せにする方法を紹介します。

HTML
<div class="container">
    <div class="block1">
       ブロック1
    </div>
    <div class="block2">
        ブロック2
    </div>
</div>

CSS
.container{
  width: 600px;
  border: 1px solid;
}
.block1{
  background-color: cadetblue;
  width: 30%;
  margin-left: auto;
  text-align: center;
}
.block2{
  background-color: darkorange;
}

marginを使った右寄せの場合、margin-leftにautoを指定するだけです。

右側にも余白を入れたいのであれば、上記のコードにmargin-right:数値;を入れるだけで余白を入れることができます。

レスポンシブデザインでのmarginの考え方

現代のインターネットにおいては、モバイルファーストの考え方が一般的になり、レスポンシブデザインはほぼ必須です。

marginの値の設定には、絶対値と相対値を指定することができます。

常にパソコンでしか見ることがないWebサイトを作る際には、絶対値であるpxを使っても何も問題ありません。

しかし、パソコンでもスマートフォンでも見ることになるWebサイトを作る際に絶対値であるpxを使用してしまうとCSSの管理が複雑になることがあります。

この考え方は、人や制作会社によって変わるものなので絶対ではありませんが、相対値もあるということを覚えておきましょう。

marginの相対値による指定

今回はmarginの値に％を使った例を紹介します。

marginの値に％を使った際には、親要素の値を元に計算します。

例えば、画面幅が1200px、親要素の横幅が60％(720px)であったとします。margin-leftに10%の値を指定するとmargin-leftは72pxの余白が入ります。

このWebサイトが画面幅が600pxで表示することになった時に、親要素は360px(60％)、margin-leftは36px(親要素の10％)の余白を取ることになります。

このように、marginの値を％で指定することにより、画面幅に応じて自然と余白も伸び縮みすることが可能になります。

学習を始めたばかりの時は難しいと感じますが、こういう指定のやり方があることだけでも知っておいて損は無いでしょう。

実務でよく問題になるmarginの使い方の一例を紹介

実際に、仕事としてWebサイトを作る際にmarginの使い方でたびたび話題になることがあります。

それは、marginで余白を付けるのは、ブロックの上か下かという問題。

ブロック間の余白を調整するときに、CSSのmarginを付けるのは上のブロックのmargin-bottomか下のブロックのmargin-topのどちらを指定するかということです。

基本的にはどちらでも良いですが、Webサイトの作成を始める前に上下の余白は、margin-topを使うかmargin-bottomを使うかを統一していた方が良いです。

記事の前半でも解説したように、marginには相殺が存在するのでWebサイトの作成後も調整や修復がしやすくなります。

ですので、topかbottomはどちらかを使用すると覚えておくと良いでしょう。

CSSのmarginを理解して、余白を制する：まとめ

今回はCSSのmarginについて解説しました。marginはHTML/CSSを学習する上での基本となります。WebサイトやWebアプリケーションを作る際には、デザインが重要です。そのデザインの中でも余白の使い方は大事です。marginはその余白を調整するプロパティですので、使い方はマスターしておきましょう。

CSSのmarginは、

marginだけでも様々な知識が必要になります。しかし、marginはCSSの基本ですので確実に覚えておきましょう。

WebサイトやWebアプリケーションには余白が必ず必要になってきます。

たくさんコーディングして、力を付けていきましょう。