バナー画像

marginとは

marginとは、要素の4辺(上下左右)の間隔・マージン領域を設定するプロパティのことです。

要素間の間隔をとりたいときに使われます。

要素に背景色や画像を設定すると、その要素は枠の内側に適用されます。

マージン領域は透過色となり背景は付きません。

marginとpaddingの違いは?

marginとpaddingの違いは次の通りです。

marginとpaddingの違いは?

paddingについては次の記事で詳しく解説しています。

【関連記事】

▶︎paddingで余白の取る方法!HTMLで読みやすい文書を作ろう

marginの書き方・使い方

ここからmarginの書き方・使い方を次の2通り説明します。

  1. marginを上下左右まとめて指定
  2. marginを上下左右個別に指定

1.marginを上下左右まとめて指定

marginを上下左右まとめて指定するには、次のように記述します。

{margin: 100px;}

これで上下左右に100pxの余白が設定されます。

その他、値の書き方によって指定する箇所ごとに余白を設定することも可能です。

/*  上下・左右 で余白を設定   */
{margin: 100px 50px;}

/*  上・左右・下 で余白を設定   */
{margin: 100px 50px 30px;}

/*  上・右・下・左 で余白を設定   */
{margin: 100px 50px 30px 80px;}

では、サンプルで余白のとり方を確認してみましょう。

■HTML

<div class="box1"></div>
<!-- 上下左右で余白を設定  -->
<div class="box2"></div>
<div class="box1"></div>
<!-- 上下・左右で余白を設定  -->
<div class="box3"></div>
<div class="box1"></div>
<!-- 上・左右・下で余白を設定  -->
<div class="box4"></div>
<div class="box1"></div>
<!-- 上・右・下・左で余白を設定  -->
<div class="box5"></div>
<div class="box1"></div>

■CSS

.box1 {
      height: 50px;
      background-color: #CCFFCC;
      border: 10px solid #006633;
    }
.box2 {
      height: 50px;
      background-color: #FFDBC9;
      border: 10px solid #FF5F17;
      margin: 50px;
   }
.box3 {
      height: 50px;
      background-color: #D9E5FF;
      border: 10px solid #005FFF;
      margin: 100px 50px;
   }
.box4 {
      height: 50px;
      background-color: #FFFFCC;
      border: 10px solid #FFFF33;
      margin: 100px 50px 30px;
   }
.box5 {
      height: 50px;
      background-color: #FFEEFF;
      border: 10px solid #FF66FF;
      margin: 100px 50px 30px 80px;
   }

■表示結果

1.marginを上下左右まとめて指定

2.marginを上下左右個別に指定

marginは「上だけに余白をつける」といった上下左右個別に設定することも可能です。

個別に指定する場合は、それぞれ次のように記述します。

/*  上に余白を設定   */
{margin-top: 100px;}

/*  下に余白を設定   */
{margin-bottom: 100px;}

/*  左に余白を設定   */
{margin-left: 100px;}

/*  右に余白を設定   */
{margin-right: 100px;}

サンプルコードで余白のとり方を確認してみましょう。

■HTML

<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>

■CSS

.box1 {
      height: 50px;
      background-color: #CCFFCC;
      border: 10px solid #006633;
      margin-top: 100px;
    }
.box2 {
      height: 50px;
      background-color: #FFDBC9;
      border: 10px solid #FF5F17;
      margin-bottom: 100px;
   }
.box3 {
      height: 50px;
      background-color: #D9E5FF;
      border: 10px solid #005FFF;
      margin-left: 100px;
   }
.box4 {
      height: 50px;
      background-color: #FFFFCC;
      border: 10px solid #FFFF33;
      margin-right: 100px;
   }

■表示結果

2.marginを上下左右個別に指定

marginの値の指定方法

marginの値の指定方法は「数値+単位」か「%(パーセント)」になります。

%の場合は、親要素の幅に対する比率になることに注意しましょう。

サンプルで確認してみましょう。

■HTML

<div class="box1">
    <div class="box2"></div>
    <div class="box3"></div>
</div>

■CSS

.box1 {
      width: 100%;
      background-color: #CCFFCC;
      border: 10px solid #006633;
    }
    .box2 {
      height: 50px;
      background-color: #FFDBC9;
      border: 10px solid #FF5F17;
      margin: 0 50px;
    }
    .box3 {
      height: 50px;
      background-color: #D9E5FF;
      border: 10px solid #005FFF;
      margin: 0 20%;
    }

■表示結果

marginの値の指定方法

box1の右端が見切れてしまっています。

左右の%の合計は100にしなければいけませんが、borderの太さは%で指定できないためレイアウトが崩れてしまう場合があります。

borderを使う際はこのようなレイアウト崩れにも注意しましょう。

margin autoの使い方(要素を左右中央寄せ)

marginで指定する「auto」は、自動で余白を調整するプロパティです。

marginの左右にautoを指定すると、左右中央寄せで表示できます。

サンプルコードで見てみましょう。

■HTML

<div class="box1">
    <div class="box2"></div>
</div>

■CSS

.box1 {
      background-color: #CCFFCC;
      border: 10px solid #006633;
    }
    .box2 {
      height: 50px;
      width: 50%;
      background-color: #FFDBC9;
      border: 10px solid #FF5F17;
      margin: 0 auto;
    }

■表示結果

margin autoの使い方(要素を左右中央寄せ)

margin 0 autoが効かない時に確認したいこと

margin 0 autoを指定したのに、中央寄せにならないという経験はありませんか?

そんな時はwidthプロパティが指定されているかどうか確認してみましょう。

marginを指定したいブロック要素にwidthの指定が場合、親要素の100%のサイズになります。

よって、親要素と同じサイズになってしまっていては、margin 0 autoを指定しても中央寄せにはなりません。

■HTML

<div class="box1">
    <div class="box2"></div>
</div>

■CSS

.box1 {
      background-color: #CCFFCC;
      border: 10px solid #006633;
    }
    .box2 {
      height: 50px;
      /* widthの指定を外してみます */
      /* width: 50%; */
      background-color: #FFDBC9;
      border: 10px solid #FF5F17;
      margin: 0 auto;
    }

■表示結果

margin 0 autoが効かない時に確認したいこと

marginの相殺

marginの相殺とは何ですか?

並んでいる要素のそれぞれにmarginが指定されていると、1つしか適用されない現象のことを「marginの相殺」と言います。

サンプルコードでmarginの相殺を見てみましょう。

■HTML

<div class="box1"></div>
<div class="box2"></div>

■CSS

.box1 {
      height: 50px;
      background-color: #CCFFCC;
      border: 10px solid #006633;
      margin-bottom: 20px;
    }
    .box2 {
      height: 50px;
      background-color: #FFDBC9;
      border: 10px solid #FF5F17;
      margin-top: 50px;
    }

■表示結果

marginの相殺

デベロッパーツールで確認するとわかりやすいですが、box1のmargin指定が打ち消されているのがわかります。

まとめ

HTMLのmarginについて解説しました。

marginやpaddingといった余白の指定は、Webサイト制作などでは必須の知識です。

ぜひ、この記事を参考にmarginの使い方を覚えてください!

エンジニアになりたい人に選ばれるプログラミングスクール「ポテパンキャンプ 」

ポテパンキャンプは卒業生の多くがWebエンジニアとして活躍している実践型プログラミングスクールです。 1000名以上が受講しており、その多くが上場企業、ベンチャー企業のWebエンジニアとして活躍しています。

基礎的な学習だけで満足せず、実際にプログラミングを覚えて実践で使えるレベルまで学習したいという方に人気です。 プログラミングを学習し実践で使うには様々な要素が必要です。

それがマルっと詰まっているポテパンキャンプでプログラミングを学習してみませんか?

卒業生の多くがWebエンジニアとして活躍

卒業生の多くがWeb企業で活躍しております。
実践的なカリキュラムをこなしているからこそ現場でも戦力となっております。
活躍する卒業生のインタビューもございますので是非御覧ください。

経験豊富なエンジニア陣が直接指導

実践的なカリキュラムと経験豊富なエンジニアが直接指導にあたります。
有名企業のエンジニアも多数在籍し品質高いWebアプリケーションを作れるようサポートします。

満足度高くコスパの高いプログラミングスクール「ポテパンキャンプ」

運営する株式会社ポテパンは10,000人以上のエンジニアのキャリアサポートを行ってきております。
そのノウハウを活かして実践的なカリキュラムを随時アップデートしております。

代表の宮崎もプログラミングを覚えサイトを作りポテパンを創業しました。
本気でプログラミングを身につけたいという方にコスパ良く受講していただきたいと思っておりますので、気になる方はぜひスクール詳細をのぞいてくださいませ。