CSS 外部余白MARGINタグの使い方の基本

CSS

【初心者向け】CSS 外部余白marginタグの使い方の基本を解説

2019年1月21日

今回は、CSSの外部余白marginタグの基本と注意点、およびmargin:autoを利用した要素の真ん中寄せの方法・text-align:centerとの違いを説明します。
 

CSSサンプル 外部余白 100px 
 

marginの基本やmargin相殺の注意点およびmarginを利用した真ん中寄せする方法は便利なのでぜひ覚えておきましょう。

 

 

外部余白marginタグの使い方

外部余白marginタグの使い方基本

まずは外部余白marginの基本的な使い方を説明していきます。
 

下記は一番シンプルな例、「margin:100px」と外部余白を指定した例です。
 

■使用例 divタグの外部余白を100pxとる
divの外部余白を100pxとる
 

■表示例
CSSサンプル 外部余白 100px
 

■上記のソースコード

 

各要素に適用されているmarginはChromeの検証ツールを利用して、視覚的に確認することができます。
Chromeの検証ツールで要素に適用されているmarginを確認
 

marginはHTML要素の外側に余白を取るから、「外部余白」っていうんですね。

 

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)があります。
 

divの内部余白を100pxとる
 

値の指定方法は、基本的に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の各要素は、大きくブロックレベル要素とインライン要素のどちらかに分類することができます。
HTML ブロックレベル要素とインライン要素の違いと特徴
 

項目 主な要素 特徴
ブロックレベル要素
  • div
  • h1〜h6
  • p
  • ul,ol,li
  • dl,dt,dd
  • table
  • form
  • hr
  • pre
  • blockquote
  • 要素の前後に改行が入り、ブロック要素同士縦に並ぶ
  • 横幅や高さを指定できる
  • 余白(margin,padding)が指定できる
インライン要素
  • a
  • span
  • b
  • img(※)
  • label
  • input(※)
  • select(※)
  • textarea(※)
  • 要素の前後に改行が入らず、インライン要素同士横に並ぶ
  • 横幅や高さを指定できない(※1)
  • ブロックレベル要素のように上下の余白設定(margin,padding)が効かない(※2)

 

(※1)img、input、textareaなどの一部のタグは幅高さや余白の設定が可能です。
(※2)余白について厳密にいうと外部余白marginについては上下は効きません(左右は効きます)
内部余白paddingについては上下左右設定できますがブロックレベル要素のように正しく余白が取れません。

 

(※注)ブロックレベル要素とインライン要素での分類方法ですが、HTML5からは新たに「カテゴリー」という新たな分類方法でより細かくジャンル分けされるようになりました。しかし簡略のためここではこれまでのブロックレベルとインラインでの分類で説明していきます。
 

なお、ブロックレベルとインライン要素の詳細については「インライン要素・ブロックレベル要素とCSS「display」の使い方」をあわせてご参考ください。
 
 

marginの注意点 要素間での外部余白marginは相殺される

各要素間でmarginで余白を設定している時、外部余白は足し算になるのではなくどちらか大きい方の余白が採用されることに注意してください。
 

■marginの相殺の例

 

■上記のソースコード

 

要素間でそれぞれmarginが適用されている場合は、足し算ではなく「どちらか大きい方のmarginの値」が適用されます。
 

margin:autoで要素を真ん中寄せにする

左側余白を自動(margin-left:auto)、右側余白も自動(margin-right:auto)のように、左右のmarginをそれぞれauto にすれば要素が真ん中寄せになります。
 

margin:〇〇px auto; (margin:autoでも可能)のように記述できます。
 

margin:〇〇px auto;で要素を真ん中寄せにする
 


 

■上記のソースコード

 

なお、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は文字や画像などの中身を中央揃えにするという違いがあります。
 

marginはブロックレベル要素を真ん中寄せにするのに対して、text-align:centerは文字や画像などの中身を中央揃えします。
 

■表示例


 

■上記のソースコード

 
 

まとめ

まとめです。今回は、CSSの外部余白marginタグの基本と注意点、margin:autoを利用した要素の真ん中寄せの方法およびtext-align:centerとの違いを説明しました。
 

divの外部余白を100pxとる
 

marginはWebページのレイアウトを調整する上で、非常によく使うCSSのプロパティです。
 

marginの基本やmargin相殺の注意点およびmarginを利用した真ん中寄せする方法は便利なのでぜひ覚えておきましょう。
 

なお、CSSを使った装飾の仕方については「【CSSの基本】CSSの基本とプロパティ一覧」をご参照ください。
 

今回は以上になります。最後までご覧いただきありがとうございました。
 


弊社は、自分でホームページを作ることを推奨しています。「業者に任せたけど、更新ができない」「本で独学は時間がかかりすぎる・・」そんなお悩みの方も多いのではないでしょうか。

個別指導形式のスクールでは、自分の知りたいことをピンポイントで学習・達成でき、自分で更新もできるというメリットもあります。
無料事前相談もしておりますので、まずはお気軽にご登録ください。

詳細はこちら


 

検索して記事を見つけたい方はこちら

検索して記事を見つけたい方はこちらにキーワードを入力してお探しください。

おすすめ記事3選

【WordPressの始め方総まとめ】ワードプレスブログの作り方9STEP

WordPress(ワードプレス)でブログを始めようと思った時に、サーバー・ドメインの手続きなどわからないことだらけで困っているというお悩みをお持ちの方も多いのではないでしょうか。本記事では、WordPressでブログやアフィリエイトを始めたい初心者を対象にWordPressの始め方をご紹介していきます。

【WordPressホームページの作り方総まとめ 12STEPで解説】

WordPressでホームページを自作しようと思った際に、「ドメイン?サーバー?たくさん調べることがあって何から手をつけたら良いのかわからない」というかたも多いのではないでしょうか。この記事ではWordPress初心者の方を対象にWordPressでホームページを作る方法をご紹介していきます。

【2020年版WordPress(ワードプレス)の使い方総まとめ】

今回は、これからWordPress(ワードプレス)を使ってホームページまたはブログサイトを作りたい初心者の方向けに、WordPressの導入から使い方までまとめて説明していきます。 (※)WordPress5.0から実装された最新のブロックエディター(グーテンベルグエディター)にも対応しています。

-CSS
-

© 2020 WEBST8のブログ Powered by AFFINGER5