入門7:【CSS/margin】マージンの基本と応用を徹底マスターしよう

入門7:【CSS/margin】マージンの基本と応用を徹底マスターしよう CSS入門
CANIT先生
CANIT先生

お二人は、CSSのマージンを知っていますか?

猫田さん
猫田さん

マージン…なんか言葉自体は聞いたことがあるような……

牛山くん
牛山くん

少し使ったことがあります。多分CSSでは余白を広げるためのものですよね

CSSのmarginは余白を設定するときのプロパティです。Webデザインをするとき、余白は大事な要素になります。余白があることで目立たせたいコンテンツがより注目されるようになるからです。

marginの設定1つで、見やすいサイトや読みやすい文章になります。このページではCSSのmarginプロパティについて基本から応用までまとめて解説します。Webデザインに必須となるmarginを使いこなしましょう。

marginの基本

marginの基本
CANIT先生
CANIT先生

前回の内容は「入門6:CSSのborderを完全に理解したい人はこちら【秒速解説】」でしたね。 よりピンポイントで実践的なborderの使い方を解説しました

猫田さん
猫田さん

具体的な書き方があったからわかりやすかった!

CANIT先生
CANIT先生

今回も前回と同じく実践編ですよ。marginは要素のマージン(余白)を指定するプロパティです。余白はデザインにとって重要ですよね。marginがどんなプロパティなのか、さらに詳しく見ていきましょう

牛山くん
牛山くん

はい!

marginプロパティとは

marginプロパティを使うと要素の外側に余白を作ることができるのですが……余白は文章を区切る以外にもさまざまな用途で使います。

たとえば、ボタン画像を並べて表示したとき、ボタン同士がくっついていると押し間違いが発生しやすくなるでしょう。そのような間違いを防ぐために、ボタン同士に適切な距離を保つのもmarginプロパティの役割です。

margin:3つの記述ルール

CANIT先生
CANIT先生

marginの記法には3つの種類があるので、まずはその説明からしますね

牛山くん
牛山くん

もしかして、border-radiusで習った記法ですか?

CANIT先生
CANIT先生

おっ、牛山くん! 察しが良いですね。 詳しく1つずつ見ていきますよ

①:上下左右の余白をまとめて指定する

CANIT先生
CANIT先生

まずは、4つの値を記述して、上下左右の余白を一括で指定する方法です

margin : 10px 20px 30px 40px;

4つの値はそれぞれ上マージン、右マージン、下マージン、左マージンを表しています。上記であれば上に10ピクセルの余白、右に20ピクセルの余白、下に30ピクセルの余白、左に40ピクセルの余白が、それぞれ作られます。上から時計回りに指定すると覚えておきましょう

余白の大きさを指定するときはピクセルのほか、フォントサイズを基準にしたemや、要素サイズを基準にした%も利用できます。

②:省略して指定する

CANIT先生
CANIT先生

続いては、省略して記述するやり方です

marginプロパティでは4つの値を書いた場合と、値を省略した場合で動きが変わります。

margin : 10px;

このように1つの値を書いた場合は、その値が上下左右の余白として設定されます。この例では、上下左右に10ピクセルずつの余白が作られます

margin : 10px 20px;

このように2つの値を書いた場合は上下と左右が同じ余白になります。この例では、上下に10ピクセル、左右に20ピクセルの余白が作られます

margin : 10px 20px 30px;

このように3つの値を書いた場合は、上、左右、下の順番で余白が作られます。この例では、上に10ピクセル、左と右に20ピクセルずつ、下に30ピクセルです

③:個別に指定する

marginは上下左右を個別に指定することもできます。

上余白 margin-top : 10px;
右余白 margin-right : 10px;
下余白 margin-bottom : 10px;
左余白 margin-left : 10px;

個別指定を使うと必要な箇所にだけ余白を設定できます。

牛山くん
牛山くん

この個別に指定するのが、いちばんわかりやすいような気もしますね

猫田さん
猫田さん

たしかにー

CANIT先生
CANIT先生

いちばん手間ではありますが、いちばんわかりやすい形ですよね。 後になってコードを見返すときも、すぐに理解できると思います。 最初のうちは、この書き方がいいかもしれませんね

marginの使用例

パソコン
CANIT先生
CANIT先生

続いては、HTMLを含めたmarginプロパティの使用例を紹介しましょう

HTMLタグ

<div class="button1">詳細はこちら</div>
<div class="button2">購入はこちら</div>
<p class="note1">※目的に応じたボタンを押してください</p>

CSS

.button1 { margin : 10px; border:solid 1px black; }
.button2 { margin : 0; border:solid 1px black; }
.note1 { margin : 0; }

この例では2つのボタンと説明文を表示しています。1つ目のボタンは上下左右に10ピクセルずつの余白があります。2つ目のボタンと説明文の余白は0なのでコンテンツが隙間なく隣接します。

CANIT先生
CANIT先生

ちなみに、marginを0に設定するときは0pxではなく0と書くのが一般的です

牛山くん
牛山くん

0には単位が必要ないからですね

marginとpaddingの違い

marginとpaddingはどちらも余白に関するプロパティですが、生成される余白の位置が異なります。

marginは要素の外側に余白が作られるのに対して、paddingは要素の内側に余白が作られると覚えておきましょう。

marginを使うときの注意点

marginを使うときの注意点
CANIT先生
CANIT先生

marginを使うときに注意すべき点をいくつか紹介します。marginを設定したのになぜか思った通りに動かないときは、この注意点に引っかかっているかもしれません

猫田さん
猫田さん

CSSって細かいルールが多いのよねー

インライン要素のmargin

インライン要素にmarginを指定すると、左右の余白だけが作られて上下の値は無視されます。上下の余白を作りたいときはブロック要素である必要があります。

どのHTMLタグがインライン要素なのかを整理してみましょう。

インライン要素

aタグ、imgタグ、spanタグ

ブロック要素

pタグ、divタグ、h1~h6タグ、ulタグ、olタグ、tableタグ

Web制作をする上で、aタグ(リンク)に余白を作る機会は多いかもしれません。aタグに余白を作るには2つの方法があります

aタグに余白を作る方法①:ブロック要素で囲む

aタグをdivタグで囲い、divタグに対してmarginを設定する方法です。

HTMLタグ

<div class=”link_container”><a href=”#”>リンク</a></div>

CSS

.link_container { margin-top : 10px; margin-bottom : 10px;}

このように、リンクを囲う専用のlink_containerのようなクラスを作っておき、そのクラスにmarginを設定すると使い勝手がよくなります。

aタグに余白を作る方法②:aタグにブロック要素の振る舞いをさせる

CANIT先生
CANIT先生

ブロック要素で囲む方法は便利ですが、実務上ではHTMLタグを編集・追加できない場合もあります

牛山くん
牛山くん

そんなこともあるんですか?

CANIT先生
CANIT先生

はい。 たとえば、クライアントから「HTMLには触らないでね」と言われているときですね

猫田さん
猫田さん

なんとっ! そんなケースもあるのね

そんなときはaタグにdisplay:inline-blockを指定して、インラインブロック要素に変換します。インラインブロック要素なら上下marginが設定できます。

CSS

a { display : inline-block; }

marginのルール化

CANIT先生
CANIT先生

marginを使うときに陥りやすい点は、marginの管理が困難になることです。要素やクラスが増えていくと、どの要素がどれくらいのmarginを持っているかわかりづらいんですよ

牛山くん
牛山くん

たくさんの箇所で指定していると、たしかに混乱しそうです

CANIT先生
CANIT先生

そのような問題を避けるためにもmargin設定はルール化しておくのがいいでしょう。 余白を作るときmargin-topを使って余白を取るのか、margin-bottomを使って余白を取るのかを予め決めておくと、それだけでスムーズになりますよ。 marginの位置を決めておくと管理も楽になります

marginのautoを使いこなす

marginのautoを使いこなす
CANIT先生
CANIT先生

では、続いてmarginの応用テクニックとしてmargin:autoを解説します

猫田さん
猫田さん

autoってことは、自動で指定もできるのかー

CANIT先生
CANIT先生

そうです。autoは、中央に揃えたい場合などによく使います

marginはピクセルやパーセントなどの数値入力で余白指定しますが、値をautoに設定することで右揃え・中央揃えのプロパティとして使えます

marginを使い中央揃えをする方法

以下のように左右のmarginをautoに設定します。

margin-left:auto;
margin-right:auto;

左右をautoに設定した要素は中央揃えで表示されます。中央揃えのプロパティと言えばtext-align:centerが有名ですが、こちらはブロック要素を中央揃えにすることができません。margin:autoを使った方法なら、ブロック要素も中央揃えにできます。

marginで右寄せにする方法

以下のように左側のmarginをautoに設定します。

margin-left:auto;
margin-right:0;

これで右寄せ表示が可能です。margin-right:0をmargin-right:10pxなどに変えた場合、右寄せした状態で右側にマージンを設定することができます。細かなデザイン調整に便利なテクニックです。

marginの相殺を理解しよう

marginの相殺を理解しよう
CANIT先生
CANIT先生

marginを持った要素が隣接したとき、片方のmarginが無視される現象があります。このことをmarginの相殺と呼びます。

牛山くん
牛山くん

marginの相殺……? どういうことでしょう?

CANIT先生
CANIT先生

次の具体例を見れば、わかりやすいですよ

margin相殺の例

marginが相殺される例を見てみましょう。

HTMLタグ

<div class=”youso_a”>要素A</div>
<div class=”youso_b”>要素B</div>
<div class=”youso_c”>要素C</div>

CSS

.youso_a { margin-bottom : 10px; }
.youso_b { margin-top : 10px; margin-bottom : 50px; }
.youso_c { margin-top : 10px; }

上記では3つのブロック要素があり、それぞれにmarginが指定されています。要素Aは下方向に10ピクセルの余白、要素Bは上方向に10ピクセルの余白があります。

このとき、10+10で20ピクセルの余白になると考えたくなりますが、実際は10ピクセル余白しか作られません。隣接した要素が同じ余白を持つ場合、相殺されて片方の余白だけが有効になります

牛山くん
牛山くん

なるほど。 これが相殺ですね

また、要素Bは下方向に50ピクセルの余白があり、要素Cは上方向に10ピクセルの余白があります。こちらも50+10で60ピクセルとはならず、50ピクセルの余白が作られます。marginの値に差がある場合は、大きいほうのmarginが採用されます。

margin相殺の4パターン

プログラマー
CANIT先生
CANIT先生

marginが相殺されるパターンは4つあります。引き続き1つずつ見ていきましょう。

①:隣接兄弟要素のマージン

上記で説明したパターンです。同じ階層にいる兄弟要素の上下マージンは相殺されます。

②:親子要素の上マージン

ボーダーが設定されていない親子要素の上マージンは相殺します。例を見てみましょう。

HTMLタグ

<div class=”oya”>
    <div class=”ko”></div>
</div>

CSS

.oya { margin-top : 10px; width : 100px; height : 100px;}
.ko { margin-top : 10px; width : 50px; height : 50px;}

この場合は子要素のマージンが無視されて親要素の10ピクセルだけが反映されます。

子要素が無視される条件は、親要素がborderやpaddingを持たないことです。borderやpaddingがあれば親と子は完全に隣接とは見なされないため、マージンの相殺は起こりません。

猫田さん
猫田さん

ようは親子喧嘩をしてしまうってわけね?

CANIT先生
CANIT先生

その通りです。CSSの場合はあくまで親が優先となります

牛山くん
牛山くん

CSSの親子関係は厳しいんですね……

③:親子要素の下マージン

概要は親子要素の上マージンと同じです。親要素のmargin-bottomと、その親に囲われている末尾の子要素のmargin-bottomが相殺します。

HTMLタグ

<div class=”oya”>
    <div class=”ko1”>子1</div>
    <div class=”ko2”>子2</div>
</div>

CSS

.oya { margin-bottom : 10px; width : 100px; height : 100px;}
.ko2 { margin-bottom : 10px; width : 50px; height : 50px;}

この例なら子2の10ピクセルは無視され、親要素の10ピクセルの余白が作られます。

子要素のマージンが相殺される条件は、親要素がborderやpaddingを持たないことです。ここまでは上マージンの相殺と同じですね。下マージンの相殺はさらに、親要素がheightとmin-heightの値を持たない場合のみ発生します。まとめると以下のようになります

  • 親要素がborderやpaddingを持たない
  • 親要素がheightを持たない
  • 親要素がmin-heightを持たない

この3つの条件に当てはまるときに親子要素で下マージンの相殺が起こります。

④:空要素のマージン

中身のないブロック要素にmargin-topとmargin-bottomを指定したときに相殺が起こります。

HTMLタグ

<div>要素1</div>
<div class=”kara”><div>
<div>要素2</div>

CSS

.kara { margin-top : 10px; margin-bottom : 10px; }

marginのみの空要素は相殺が起こります。上下に10ピクセルのマージンを設定していますが、合計20ピクセルとはならず、片方が無視されます。

margin相殺の例外
margin相殺には2つの例外があります。

1つ目はfloatです。floatを指定している要素は、相殺の条件に一致していてもマージン相殺が起こりません。

もう1つはpositionです。position:absoluteやposition:fixedが指定された要素では相殺が起こりません。見落としやすいので注意したいポイントです。

CSS学習:marginの基本と応用まとめ

まとめ
CANIT先生
CANIT先生

以上がマージンの基本と応用知識になります。デザインの余白はとても大切ですので実践してマスターしていきましょう

猫田さん
猫田さん

今回もかなり実践的だったね

marginの基本的な使い方は余白を指定することです。余白は上下左右を一括指定することもできますし、個別に指定することもできます。再現したいデザインに応じて使い分けましょう。

また、margin:autoを使うことで中央揃えや右揃えの表示ができます。ブロック要素を中央に表示したいときに便利なテクニックです。

marginを使う上での注意点はマージンの相殺です。相殺の条件を把握しておくことで、レイアウト崩れを防げます。マージンを理解できるとデザインの幅が広がりますので、ぜひCSSのmarginプロパティをマスターしてください。

牛山くん
牛山くん

次回はどんな実践的なプロパティが出てくるんでしょうか?

CANIT先生
CANIT先生

次回はmarginと並んで重要なプロパティ「position」について以下のテーマでお送りします。【CSS/position】をすぐに理解したい人向け徹底解説

挫折率が高い??プログラミング学習のポイント
駆け出しエンジニアが一緒に学ぶ
CANITは、Progateやドットインストールで独学している人達同士をつなげます。駆け出しエンジニアのあなたのためのSNSです。
CSS入門
【この記事を書いた人】
CANIT 先生

あらゆるプログラミング言語をあやつるフリーの凄腕講師。温和な性格で「わかるまで教えます」がモットー。たまに時間ができると動物の仲間達に、プログラミングを教えることもある。現在の生徒は牛山くんと猫田さん。

CANIT
タイトルとURLをコピーしました