初心者向け！marginで要素を左右に動かす方法

1 初心者向け！marginで要素を左右に動かす方法

Webデザインでは、要素の外側に余白を作るために margin を使います。
特に「左にずらす」「右に寄せる」「中央に配置する」といった配置調整は頻繁に使います。
この記事では、基本のmarginからマイナスマージン（負の値）の使い方まで、図解付きで解説します。

2 marginの基本構造

marginには4つの方向があります。

• margin-top： 上の余白
• margin-right： 右の余白
• margin-bottom： 下の余白
• margin-left： 左の余白

次の図のように、要素（青い四角）の外側にできる余白が margin です。

3 実際のHTML＋CSSサンプル

<div class="box">青いボックス</div>

<style>
.box {
  background-color: #3b82f6;
  color: #fff;
  padding: 20px;
  width: 200px;
  text-align: center;
  margin-left: 50px; /* 左に50pxずらす */
}
</style>

4 ポイント解説

上の例では margin-left: 50px; によって、青いボックスが左から50px離れています。右にずらしたい場合は margin-right を使います。

4.1 左右の中央に配置したいとき

ブロック要素なら margin: 0 auto; と書くだけで中央寄せが可能です。

<div class="center-box">中央ボックス</div>

<style>
.center-box {
  width: 200px;
  background: #10b981;
  color: white;
  text-align: center;
  padding: 20px;
  margin: 0 auto; /* 中央寄せ */
}
</style>

5 マイナスマージン（負のmargin）とは？

通常の margin は「余白を広げる」ために使いますが、
-（マイナス） の値を指定すると、逆に「隣の要素や親要素に近づく」動きをします。
要素を引き寄せたり重ねたり できるのがマイナスマージンの特徴です。

<div class="negative-box">マイナスマージンの例</div>

<style>
.negative-box {
  background: #f59e0b;
  color: white;
  padding: 20px;
  width: 200px;
  margin-left: -30px; /* 左に30pxはみ出して配置 */
}
</style>

結果：
このボックスは通常の位置より左に30px移動して、親要素からはみ出して表示されます。

5.1 マイナスマージンを使うときの注意

• 要素が重なってしまう場合があるので慎重に使う
• レイアウトを微調整したいときに便利（画像やボックスの隙間を詰めるなど）
• FlexboxやGridで配置する場合は、基本的にマイナスマージンは不要

6 marginショートカット（省略形）

marginは4方向をまとめて指定できるショートカットもあります。
順番は 上 → 右 → 下 → 左 です。

margin: 上px 右px 下px 左px;

• margin: 5px; → 上下左右すべて5px
• margin: 5px 10px; → 上下5px、左右10px
• margin: 5px 5px 10px; → 上5px、左右5px、下10px
• margin: 5px 10px 5px 15px; → 上5px、右10px、下5px、左15px

<div class="shortcut-box">ショートカット例</div>

<style>
.shortcut-box {
  background: #8b5cf6;
  color: white;
  padding: 20px;
  width: 200px;
  margin: 5px 10px 5px 15px; /* 上右下左 */
}
</style>

7 まとめ

・左に動かしたい → margin-left
・右に動かしたい → margin-right
・中央に置きたい → margin: 0 auto;
・微調整したいとき → margin-left: -10px; などのマイナス値も使える
・上下左右の余白をまとめて設定 → margin: 上 右 下 左; のショートカットも便利

ポイント：
マイナスマージンやショートカットは、意図的に「詰める・重ねる」デザインで便利ですが、後でレイアウトを変更すると崩れる可能性もあります。
「一時的な調整」や「装飾的な重なり」に限定して使うのが安全です。