HTML 入門

スタイルシートでデザインを作ろう

margin を設定する

次は margin（マージン：余白）の設定について説明します．まず，html ファイルに次の通り4個の <div> を設置し，それぞれに .box クラスと，.box1 から .box4 までのクラスを配置します． （HTMLのサンプルを見る ／ CSSのサンプルを見る）

index.html（抜粋）コピー
<div class="box box1">.box1 あいうえおあいうえおあいうえお</div><hr>
<div class="box box2">.box2 あいうえおあいうえおあいうえお</div><hr>
<div class="box box3">.box3 あいうえおあいうえおあいうえお</div><hr>
<div class="box box4">.box4 あいうえおあいうえおあいうえお</div><hr>

スタイルシートには .box クラスのスタイルを定義します．現時点での表示をまず確認してください．

style.css（抜粋）コピー
@charset "utf-8";

.box {
  border: 1px solid #a0a0a0;
  width: 160px;
  padding: 4px;
  background-color: #f0f0f0;
  box-sizing: border-box;
}

.box1 クラスのマージンを 0 に設定します．（標準が 0 であるので，とくに変化はありません．）このとき，.box1 の要素は親要素の内側で左上に配置されます．

style.css（抜粋）コピー
.box1 {
  margin: 0;  /* 左上に寄る */
}

.box2 クラスには上下左右に 24px のマージンを設定します．このとき，上の .box1 と比較して上下と左に 24px のマージンが設定されました．あくまで左上からの位置を基準にするため，右側のマージンは画面サイズによって変化するはずです．

style.css（抜粋）コピー
.box2 {
  margin: 24px;  /* 上下左右に 24px */
}

.box3 クラスには上下 36px のマージンを設定する一方で，左右のマージンは auto にします．このとき，左右のマージンが自動的に設定されるので，結果的に左右中央に配置されることになります．ブラウザの画面幅を変更しても中央に配置され続けることも確認してください．

style.css（抜粋）コピー
.box3 {
  margin: 36px auto; /* 上下36px，左右は自動なので中央へ */
}

.box4 クラスでは上，右，下のマージンを0に設定し，左のマージンを auto に設定します．このとき右側のマージンが0で左が自動的に決定されることから，結果的に右側に配置されるようになります．

style.css（抜粋）コピー
.box4 {
  margin: 0 0 0 auto; /* 上右下が0pxで左が自動なので右に寄る*/
}

次は HTML ファイルに .box1 クラスを持つ要素を4個並べます．このとき，.box1 のマージンが 0 であることから，4個の要素が空白なく配置されることになります．

index.html（抜粋）コピー
<div class="box box1">.box1 あいうえおあいうえおあいうえお</div>
<div class="box box1">.box1 あいうえおあいうえおあいうえお</div>
<div class="box box1">.box1 あいうえおあいうえおあいうえお</div>
<div class="box box1">.box1 あいうえおあいうえおあいうえお</div>

次に，.box5 クラスを持つ要素を4個並べます．さらに CSS ファイルに .box5 クラスは上方向にだけ 16 px のマージンを持つように設定することで，空白を調整できます．

index.html（抜粋）コピー
<div class="box box5">.box5 あいうえおあいうえおあいうえお</div>
<div class="box box5">.box5 あいうえおあいうえおあいうえお</div>
<div class="box box5">.box5 あいうえおあいうえおあいうえお</div>
<div class="box box5">.box5 あいうえおあいうえおあいうえお</div>

style.css（抜粋）コピー
.box5 {
  margin: 16px 0 0 0; /* 上方向だけ 16px */
}

最後にマージンの相殺という概念について確認しておきます．HTML ファイルには .box6 というクラスを持つ要素を4個配置します．CSS ファイルには上方向に 16px, 下方向に 24px のマージンを持つように設定します．

index.html（抜粋）コピー
<div class="box box6">.box6 あいうえおあいうえおあいうえお</div>
<div class="box box6">.box6 あいうえおあいうえおあいうえお</div>
<div class="box box6">.box6 あいうえおあいうえおあいうえお</div>
<div class="box box6">.box6 あいうえおあいうえおあいうえお</div>

style.css（抜粋）コピー
.box6 {
  margin: 16px 0 24px 0; /* 上方向に 16px，下方向に 24px*/
}

.box6 には上方向に 16px，下方向に 24px のマージンを設定したので，要素間に合計 40px の余白が設定されるのかと予想されますが，24px しか設定されませんでした．これはマージンの相殺による結果です．つまり，上下のマージンは，それぞれのマージンの大きい方の寸法（または等しい場合はいずれか 1 つ）の単一のマージンに結合されます．したがって，連続する .box6 のマージンが相殺され，大きい方の 24px になりました．

ここで .box6 の要素を「DevTools」で検証した結果を示しておきます．上下に 16px と 24px のマージンが設定されていることが確認できます．

目次に戻る