今回は、CSSの外部余白marginタグの基本と注意点、およびmargin:autoを利用した要素の真ん中寄せの方法・text-align:centerとの違いを説明します。
もくじ
外部余白marginタグの使い方
外部余白marginタグの使い方基本
まずは外部余白marginの基本的な使い方を説明していきます。
下記は一番シンプルな例、「margin:100px」と外部余白を指定した例です。
■使用例 divタグの外部余白を100pxとる
■表示例
■上記のソースコード
1 2 3 4 5 6 7 8 9 10 11 12 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>はじめてのCSSセミナー</title> </head> <body> <div style="margin:100px;border:5px green solid;"> 外部余白100pxになっています。 </div> </body> </html> |
各要素に適用されているmarginはChromeの検証ツールを利用して、視覚的に確認することができます。
marginの値の基本は「px」です。「%」を使うこともできます。値は半角スペースで区切って複数設定することができます。
| 項目 | 内容 |
|---|---|
| margin:値; | 上下左右で指定した値の余白が設定されます。 例 margin:100px → 上下左右に100pxの外部余白 |
| margin:値1 値2; | 「値1が上下」「値2が左右」の余白が設定されます。 例 margin:100px 50px → 上下に100px・左右に50pxの外部余白 |
| margin:値1 値2 値3; | 「値1が上」「値2が左右」「値3が下」の余白が設定されます。 例 margin:100px 150px 200px → 上に100px・左右に150px・下に200px |
| margin:値1 値2 値3 値4; | 記述順に上右下左と余白が設定（時計周り）されます。 例 margin:100px 150px 200px 250px → 上に100px・右に150px・下に200px・左に250px |
なお、marginは、以下のように方向を指定して個々に設定することもできます。
| 項目 | 内容 |
|---|---|
| margin-left:値; | 要素の左側の外部余白を指定します。 例 margin-left:100px → 左側に100pxの外部余白 |
| margin-right:値; | 要素の右側の外部余白を指定します。 例 margin-right:100px → 右側に100pxの外部余白 |
| margin-top:値; | 要素の上側の外部余白を指定します。 例 margin-top:100px → 上側に100pxの外部余白 |
| margin-bottom:値; | 要素の下側の外部余白を指定します。 例 margin-bottom:100px → 下側に100pxの外部余白 |
外部余白marginと内部余白paddingの違い
余白には要素外部に設定する外部余白(margin)の他に、要素内部に設定する内部余白(padding)があります。
値の指定方法は、基本的にmarginと同様です。半角スペースで区切って複数設定することができます。
| 項目 | 内容 |
|---|---|
| padding:値; | 上下左右で指定した値の余白が設定されます。 例 padding:100px → 上下左右に100pxの外部余白 |
| padding:値1 値2; | 「値1が上下」「値2が左右」の余白が設定されます。 例 padding:100px 50px → 上下に100px・左右に50pxの外部余白 |
| padding:値1 値2 値3; | 「値1が上」「値2が左右」「値3が下」の余白が設定されます。 例 padding:100px 150px 200px → 上に100px・左右に150px・下に200px |
| padding:値1 値2 値3 値4; | 記述順に上右下左と余白が設定（時計周り）されます。 例 padding:100px 150px 200px 250px → 上に100px・右に150px・下に200px・左に250px |
なお、paddingは、以下のように方向を指定して個々に設定することもできます。
| 項目 | 内容 |
|---|---|
| padding-left:値; | 要素の左側の外部余白を指定します。 例 margin-left:100px → 左側に100pxの外部余白 |
| padding-right:値; | 要素の右側の外部余白を指定します。 例 padding-right:100px → 右側に100pxの外部余白 |
| padding-top:値; | 要素の上側の外部余白を指定します。 例 padding-top:100px → 上側に100pxの外部余白 |
| padding-bottom:値; | 要素の下側の外部余白を指定します。 例 padding-bottom:100px → 下側に100pxの外部余白 |
なお、内部余白paddingの詳しい使い方については「【初心者向け】CSS 内部余白paddingタグの使い方の基本を解説」を合わせてご参照ください。
この記事では、paddingに関する詳細は割愛しますが、余白を設定する時は「外部余白margin」と「内部余白padding」を使い分けられるようにしましょう。
marginが適用できるブロックレベル要素と適用できないインライン要素
marginを適用できるHTML要素は、基本的にブロックレベル要素になりますので、意識しておきましょう。
<div>や<a>などのHTMLの各要素は、大きくブロックレベル要素とインライン要素のどちらかに分類することができます。
| 項目 | 主な要素 | 特徴 |
|---|---|---|
| ブロックレベル要素 |
|
|
| インライン要素 |
|
(※1)img、input、textareaなどの一部のタグは幅高さや余白の設定が可能です。 |
(※注)ブロックレベル要素とインライン要素での分類方法ですが、HTML5からは新たに「カテゴリー」という新たな分類方法でより細かくジャンル分けされるようになりました。しかし簡略のためここではこれまでのブロックレベルとインラインでの分類で説明していきます。
なお、ブロックレベルとインライン要素の詳細については「インライン要素・ブロックレベル要素とCSS「display」の使い方」をあわせてご参考ください。
marginの注意点 要素間での外部余白marginは相殺される
各要素間でmarginで余白を設定している時、外部余白は足し算になるのではなくどちらか大きい方の余白が採用されることに注意してください。
■marginの相殺の例
■上記のソースコード
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>はじめてのCSS</title> <style media="screen"> .sample1{ background-color: skyblue; margin-bottom:100px; } .sample2{ background-color: pink; margin-top:100px; } </style> </head> <body> <div class="sample1"> 外部余白 <br> 下向きに100px; </div> <div class="sample2"> 外部余白 <br> 上向きに100px; </div> </body> </html> |
要素間でそれぞれmarginが適用されている場合は、足し算ではなく「どちらか大きい方のmarginの値」が適用されます。
margin:autoで要素を真ん中寄せにする
左側余白を自動(margin-left:auto)、右側余白も自動(margin-right:auto)のように、左右のmarginをそれぞれauto にすれば要素が真ん中寄せになります。
margin:〇〇px auto; (margin:autoでも可能)のように記述できます。
■上記のソースコード
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>はじめてのCSSセミナー</title> </head> <body> <div style="background:pink;width:400px;"> 400px<br>通常配置の<br>左寄せになっているボックス </div> <div style="background:skyblue;width:400px;margin:10px auto;"> 400px<br>margin:0 autoで<br>真ん中寄せしたボックズ </div> </body> </html> |
なお、margin-topやmargin-bottomなどの上下に対するautoの設定は効きません。設定しても0になることに注意です。
divタグに対してmarginを設定することが最も多いケースですが、対象のdiv要素にwidthを指定している必要があります。widthはデフォルト100%のため、設定していないと真ん中寄せしていても変化はありません。
marginの真ん中寄せとtext-alignの中央揃えの違い
テキスト揃えのCSSプロパティにtext-alignがあります。
text-align:centerの中央揃えとmargin:autoの真ん中寄せの違いがよく混同されますが、marginは自身の要素を真ん中寄せにするのに対して、text-align:centerは文字や画像などの中身を中央揃えにするという違いがあります。
■表示例
■上記のソースコード
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>はじめてのCSSセミナー</title> </head> <body> <div style="background:pink;width:400px;text-align:center;"> 400px<br>通常配置の<br>左寄せになっているボックス <br> text-align:centerで文字を中央寄せ。 </div> <div style="background:skyblue;width:400px;margin:10px auto;text-align:center;"> 400px<br>margin:0 autoで<br>真ん中寄せしたボックス <br> text-align:centerで文字を中央寄せ。 </div> </body> </html> |
まとめ
まとめです。今回は、CSSの外部余白marginタグの基本と注意点、margin:autoを利用した要素の真ん中寄せの方法およびtext-align:centerとの違いを説明しました。
marginはWebページのレイアウトを調整する上で、非常によく使うCSSのプロパティです。
marginの基本やmargin相殺の注意点およびmarginを利用した真ん中寄せする方法は便利なのでぜひ覚えておきましょう。
なお、CSSを使った装飾の仕方については「【CSSの基本】CSSの基本とプロパティ一覧」をご参照ください。
今回は以上になります。最後までご覧いただきありがとうございました。
弊社は、自分でホームページを作ることを推奨しています。「業者に任せたけど、更新ができない」「本で独学は時間がかかりすぎる・・」そんなお悩みの方も多いのではないでしょうか。
個別指導形式のスクールでは、自分の知りたいことをピンポイントで学習・達成でき、自分で更新もできるというメリットもあります。
無料事前相談もしておりますので、まずはお気軽にご登録ください。
