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 のマージンが設定されていることが確認できます.