CSSのmarginついて図解を用いてわかりやすく解説します。
Webサイトを制作する上での余白を取る方法には、主にpadding(パディング)とmargin(マージン)があります。
当記事では、マージンの考え方、使い方・効かないときの対処法を解説します。
- Webデザイン・コーディングを勉強中の人
- 沼にハマっている人
ぜひ一読ください。
marginの考え方
marginを指定するときに、Webを構成するボックスモデルという考え方が必要になります。
paddingは「要素(箱)の内側にある余白」
marginは「要素(箱)の外側にある余白」です。
Webの要素は箱(ボックス)のように作られていて、ボックスモデルと呼ばれています。
箱の外側の余白を指定するのがmarginです。
段ボール箱を並べたとき、箱と箱の隙間をマージンとするイメージです。
マージンのイメージ
marginが効かないときの原因と対処法
しっかり指定したのにmarginが効かないなぁ
marginで入れた数字より余白が小さい
マージンで指定したのに全然余白がつかない、なんか数字を大きくしたら余白ついたしこれでいっか…。
なんてことはよくあります。えぇ。
マージンが効かないときは以下のような原因が考えられます。
- 他の要素のマージンと重なっている
displayがinlineになっている。gapやjustify-contentが優先されている- 要素に
absoluteやfixedを使っている widthが決まっていて横方向の幅が制限されているmarginの単位や構文ミス- 優先順位の違い
などが代表的なケースです。一つずつ見ていきましょう！
他の要素のマージンと重なっている
上下を指定したときに発生しやすいです。
マージンが重なっていると、大きい方のみが有効となり、お互いの数字をプラスするわけではないのです。
思わぬところで重なると原因が見つけづらいミスでもありますので、
マージンは「leftとtopだけ指定する」など、ルールを決めておくと発生を抑えられます
displayがinlineになっている。
displayがinlineだとマージンが効きません。
aタグやimgタグに対してマージンを取っているときに発生しやすいです。
対策としては、
display:blockやinline-blockを明示的に指定する
aタグやimgタグをdivタグで囲い、divタグでマージンの管理をする
と言ったことになります。
<div>
<a href="#"></a>
</div>イメージ的には、divタグ=お皿、aタグなどのinline要素 =料理が乗っている
divタグのお皿で配置を決めるような感じです。
gapやjustify-contentが優先されている
display:flexやdisplay:gridを使用してgapやjustify-contentを利用した場合、マージンより優先されることがあります。
gapなどはマージンと別枠で余白を取るので、思ったより余白が多いなんてことになることがあります。
要素にabsoluteやfixedを使っている
positionを決めて絶対配置している場合にもマージンが効かないことが多々あります。
そういった場合にはtopやleft等のプロパティを使って調整します。
widthが決まっていて横方向の幅が制限されている
例えば親要素が500px
でも子要素も500pxあったら、マージンが入る隙間がありません。
例えば親要素が500px、子要素も500pxだと、その間に余白(margin)を挟むスペースがありません。
実際にはmarginは存在しますが、表示上は隙間がなく見えない状態です。
狭い引き出しに大きな箱を入れようとして、隙間がなくなるイメージですね！
親要素にwidthが入っている場合は、子要素がオーバーしていないかを確認すると良いです。
marginの単位や構文ミス
単位によって、余白の幅が変わってきますので
- %を指定したら思ったようにならなかった
- vhを使うとスマホやパソコンによって余白量が変わってくる
なんてこともあります。
また、autoをつけたときに親要素が固定幅でない場合、中央寄せがつかないといったこともあります。
優先順位の違い
CSS全般に言えますが、後から書いたほう、優先度の高いCSSが実際に反映されます。
WordPressなどのテーマやプラグインでは、既存CSSがmarginを上書きしていることもあります。
そういった場合は、
とりあえずCSSの最後に書いてみる
!importantをつけて変化があるか見る
上記を試してみましょう。変化があれば順番や、優先度の調整を行います。
marginの指定の仕方
マージンの指定の方法には2種類あります。
数字とautoです。
数字を入れればそのまま余白がつきます。つける単位によって実際の余白量が変わるので状況に応じて使い分けたいですね。
数字で指定する
pxや%、emなどの単位を数字で指定します。
| 単位 | 数字による変化の量 |
|---|---|
| px | 固定値 |
| em | 要素のフォントサイズによって変動 font-size:16px = 1em = 16px |
| rem | サイト単位のフォントサイズに連動 html{font-size:16px} = 1rem = 16px |
| % | 親要素に対しての割合 |
| vw,vh | 画面に対しての割合 vw = 横幅 vh = 縦幅 |
| auto | 要素内の最大を取る margin-left:autoとしたとき、要素は右端へ置かれる |
マイナスのネガティブマージン
マージンをマイナスで指定すると余白を突き破って飛び出します
例えば、以下のようにtop-10pxなんてすると、上に10px要素を飛び出て配置されるわけですね！
.hoge{
margin-top:-10px;
}便利なauto
marginにはpaddingと違いautoを指定することが出来ます。
要素の中で余白を取れるだけ取る、といった具合ですね。
この特徴を活かして
- 右端に配置したいボタン
- カードの一番下に配置したいテキスト
- 左に寄せておきたいメニュー
などにautoを指定して配置できます。
また、左右にautoを指定することによって真ん中に配置することが出来ます。
マージンの具体的活用例
マージン(余白)という言葉の意味通り、余白を指定するために使います。
私が実務では主に以下のような使い方をしています
- 要素間の余白を取る
- autoをつけて上下左右の端に置く
- p+pで、文章の間の余白を取る
- 背景を横幅いっぱいに広げる
- 要素からはみ出した演出をする
- 要素を真ん中に置く
要素間の余白
要素の下(上)にマージンを設置して余白をとります。
一般的にこのくらいの隙間を取るのかなと思います。
| 用途 | よく使うmargin | px |
|---|---|---|
| 細かい隙間 ・小見出しの直後 ・カード内アイテム間 等 | 0.5rem | 8px |
| 標準の余白 ・p + p ・リスト間 等 | 1rem | 16px |
| ブロック間の余白 ・画像と文章 ・見出しと文章の距離 等 | 1.5rem~2rem | 24px~32px |
| セクション間の大きな余白 ・セクション全体の上下 ・ファーストビュー直下 等 | 3rem~4rem | 48px~64px |
余談：マージンは上に設定するか？下に設定するか？
Web制作をするなかで度々話題になるようです。マージンを要素の上に設定するか、下に設定するか。
結論としては「どっちでもいいけどプロジェクト内では統一しましょう」といった意見が多いようです。
混ざるとマージンの特性上、重なってうまく余白が取れないことがあります。
個人的には下につけるほうがわかりやすいと思いますが、
- チーム開発ではルールの確認
- 他サイトを改修の際は構造をしっかり確認
- 個人で行う場合はどちらか決めておく
こういった対策が必要になりますね。
autoをつけて端に寄せる
マージンは数字でも指定できますが、autoで指定すると、残り幅いっぱい使い切って、要素を端に追い込みます。
上下左右、レスポンシブに対応して端に配置することが出来ます。
具体的には、
- ボタンを右端に置きたいとき
- カードレイアウトで一番下に置きたいとき
- テキストを右側に配置したいとき
などに使っています。
背景を全画面に効かせる
margin: 0 calc(50% - 50vw);と指定することで、コンテンツ幅を飛び越えて背景を配置することが出来ます。
- サイトで画面いっぱい背景を広げる演出をしたいとき
- 装飾をコンテンツからはみ出して配置したいとき
などに使います。
ただ、このままだとコンテンツの開始がサイトの端になってしまうので、パディングを組み合わせます。
margin: 0 calc(50% - 50vw);
padding: 0 calc(50vw - 50%);
非常に便利なので、利用しましょう
要素を真ん中に置く
margin: 0 auto;マージンを左右からautoをつけることによって、要素を真ん中に置くことが出来ます。
非常によく使うので、真ん中に配置したいときはとりあえずこれを書きましょう。
要素からはみ出すネガティブマージン
マイナスの数字を指定して、要素から飛び出るネガティブマージンの利用もします。
少し外れた印象をもたせるこの技法は、注目させたいテキストや、モデルさんをカードからはみ出して注目させると行った使い方がよくされている印象です。
marginの確認方法
マージンが効いているのか？今どうなってるの？といったときには開発ツールを使って確認します。
ブラウザで⌘+Shift+C(Mac)かF12を押して見たい要素を選択します。
ボックスモデルで見た、オレンジ色の部分がマージンなのでちゃんと効いているか、実際の数字はいくつなのかがわかります。
実際に数字を調整してみて狙いの間隔をとってサイトデザインを行いましょう。
まとめ：marginの使い方
マージンは余白を取るためのCSSです。
パディングに比べ自由度が高い分、様々な要因で効かないことがあり扱いが難しいですね。
効かないときに試したいこと
- display:inline-blockやblockにする
- 他の要素のマージンと被っていないか
- widthでの大きさが固定されていないか
- flexやgridによるgapの影響
マージンの具体的な利用法
- 要素の下(上)につけて間隔を取る
- margin 0 auto で真ん中に配置
- margin 0 calc(50% - 50vw)で全画面表示
- マイナスの数字で要素をはみ出すネガティブマージン
- autoを使って各要素の端に寄せる
今どうなってるかを確認したくなったら、ブラウザ上でF12か⌘+Shift+C(Mac)を押して要素を確認。
Web制作をするうえで触れる機会の多く、自由度の高いプロパティがマージンです。うまく使えば要素を思い通りに配置できますので仕組みを知ってしっかり使いこなしたいですね。
最後まで御覧いただきありがとうございました！