css 外部余白marginの書き方・ margin:0 autoで真ん中寄せ

本記事は広告が含まれる場合があります CSS

【CSS 外部余白】marginの書き方・autoでの真ん中寄せ

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

CSSサンプル 外部余白 100px 
 

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

 

 

外部余白marginの基本的な書き方

marginは、要素の外部余白(外側の余白)を調整するCSSです。margin:100px;のように設定すると、対象要素の対して100pxの外側余白をとってくれます。

divの外部余白を100pxとる
 

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

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

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

 

marginの値の基本は「px」です。「%」を使うこともできます。値は半角スペースで区切って複数設定することができます。

項目 内容
margin:値1; 上下左右で指定した値1の余白が設定されます。
(例)margin:100px;→上下左右に100pxの外部余白
margin:100px;→上下左右に100pxの外部余白
margin:値1 値2; 「値1が上下」「値2が左右」の余白が設定されます。
(例)margin:50px 100px;→上下50px、左右100pxの外部余白
margin:50px 100px;→上下50px、左右100pxの外部余白
margin:値1 値2 値3; 「値1が上」「値2が左右」「値3が下」の余白が設定されます。
(例)margin:50px 50px 150px;→上50px、左右100px、下150pxの外部余白
margin:50px 50px 150px;→上50px、左右100px、下150px
margin:値1 値2 値3 値4; 記述順に上右下左と余白が設定(時計周り)されます。
(例)margin:40px 80px 120px 160px;→上40px、右80px、下120px、左160pxの外部余白
margin:40px 80px 120px 160px;→上40px、右80px、下120px、左160pxの外部余白

 

margin:値1→値1を上下左右に指定

margin:値1;のように設定すると、上下左右で指定した値1の余白が設定されます。

■margin:100px;→上下左右に100pxの外部余白
margin:100px;→上下左右に100pxの外部余白

 

margin:値1 値2→値1を上下、値2を左右に指定

margin:値1 値2;のように設定すると、「値1が上下」「値2が左右」の余白が設定されます。

■margin:50px 100px;→上下50px、左右100pxの外部余白
margin:50px 100px;→上下50px、左右100pxの外部余白

 

margin:値1 値2 値3→値1を上、値2を左右、値3を下に指定

margin:値1 値2 値3;のように設定すると、「値1が上」「値2が左右」「値3が下」の余白が設定されます。

■margin:50px 100px 150px;→上50px、左右100px、下150pxの外部余白
margin:50px 100px 150px;→上50px、左右100px、下150px

 

margin:値1 値2 値3 値4 →値1を上、値2を右、値3を下、値4を左に指定

margin:値1 値2 値3 値4;のように設定すると、上から順に時計回りに上(値1)・右(値2)・下(値3)・左(値4)と余白が設定されます。

■margin:40px 80px 120px 160px;→上40px、右80px、下120px、左160pxの外部余白
margin:40px 80px 120px 160px;→上40px、右80px、下120px、左160pxの外部余白

値がいっぱいあって覚えるのが大変ですね。
上から順に時計回りに上(値1)・右(値2)・下(値3)・左(値4)と 覚えると楽ですよ。

margin: 値1 値2 値3 値4;
上から時計回りと覚えよう
 

margin-(left/right/top/bottom)→方向を指定

なお、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はChromeの検証ツールを利用して、視覚的に確認することができます。
Chromeの検証ツールで要素に適用されているmarginを確認
 

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

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

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

margin:0 autoを利用して、width指定したdiv要素を真ん中寄せにする方法はよく使われます。

 

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


 

■上記のソースコード

 

なお、margin-topやmargin-bottomなどの上下に対するautoの設定は効きません。設定しても0になることに注意です。
 

なお、divタグにwidthを設定していないと幅100%になるため、margin:0 auto;で真ん中寄せしてもしなくても見た目上の変化がない点に注意です。
 margin:0 auto; 幅width指定なし

 

marginの真ん中寄せとtext-alignの中央揃えの違い

テキストの中央揃え「text-align:center」とdivタグなどの真ん中寄せ「margin:auto」で違いがわからずよく混同されますが、marginはブロックレベル要素(自身の要素)を真ん中寄せにするのに対して、text-align:centerは中にあるインライン要素(文字や画像などの中身)を中央揃えにするという違いがあります。
 

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

■表示例


 

■上記のソースコード

 
(関連)【CSS text-alignの使い方】文字の行揃え・寄せ指定をする方法
 

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

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

■marginの相殺の例

 

■上記のソースコード

 

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

marginはインライン要素には正しく効かない点に注意

<div>や<a>などのHTMLの各要素は、大きくブロックレベル要素とインライン要素のどちらかに分類することができます。

marginを適用できるHTMLは、基本的にブロックレベル要素になります。aタグやspanタグなどのインライン要素にはmarginは適切に効かないので注意しましょう。

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と内部余白paddingの違い

divの内部余白を100pxとる
 

余白には要素外部に設定する外部余白(margin)の他に、要素内部に設定する内部余白(padding)があります。最初勉強したときに、外部余白marginとpaddingを混乱されている方も多いので違いを覚えておきましょう。

外部余白と内部余白の設定
 

CSSサンプル 内部余白100px

 

内部余白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の詳しい使い方については「【初心者向け】CSS 内部余白paddingタグの使い方の基本を解説」をご参照ください。
 

まとめ

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

divの外部余白を100pxとる
 

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

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

なお、これからサーバーやドメインを契約してホームページを作りたいという方は「【総まとめ】個人ホームページの作り方・Webサイト自作方法」をご参考ください。

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

 

「業者に任せたけど、更新ができない」「本で独学は時間がかかりすぎる・・」そんなお悩みの方も多いのではないでしょうか。

個別指導形式のスクールでは、自分の知りたいことをピンポイントで学習・達成でき、自分で更新もできるというメリットもあります。

教室の無料事前相談もしておりますので、まずはお気軽にご登録ください。

詳細はこちら

YouTubeチャンネル開設しました!

WEBST8 YouTube Channel 開設
最大月間50万PVの当ブログをベースに、Youtube動画配信にてWordPress、ホームページ作成、ブログのことについてお役立ち情報を随時配信していきます。

ご興味ある方はぜひチャンネル登録をしていただけますと幸いです。

検索して記事を見つける

探したいキーワードを入力・検索して記事を見つけたい方はこちら

-CSS