HTML 入門

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

margin を設定する

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

index.html（抜粋）コピー
<div class="box50 box51">.box51 あいうえおあいうえおあいうえお</div><hr>
<div class="box50 box52">.box52 あいうえおあいうえおあいうえお</div><hr>
<div class="box50 box53">.box53 あいうえおあいうえおあいうえお</div><hr>
<div class="box50 box54">.box54 あいうえおあいうえおあいうえお</div><hr>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

目次に戻る