今回はサイトをレイアウトするのにかかせないmargin-leftのお話。
margin-leftは初級編で勉強する内容なのですが、初心者のうちは paddingと混同してしまったりして、うまく使いこなせなかったりしがちです。
今回はmargin-leftの使い方を初心者向けにわかりやすく解説していきます。
margin-leftとは?
margin-leftの読み方
margin-leftは【マージン・レフト】と読みます。
marginは余白を意味し、leftは左を意味します。
つまり、左に余白を作りたいときに使用するプロパティです。
margin-leftは要素の左側に余白を作りたい時に使います
要素同士の余白が少ないと、詰まって見えて読みにくかったり、いまいちなレイアウトになってしまいます。
そこで、余白を入れるためにmarginやpaddingを使います。
margin-leftは左側に余白を入れたい時に使用します。
margin-left で利用できる値
margin-leftでは以下の値を使うことができます。
| 値 | 説明 |
|---|---|
| 数字＋px | 例・margin-left: 30px 【px】とは絶対的な値で、画面幅を変えようと変わることはありません。 |
| 数字＋% | 例・margin-left: 10%; 【％】とは相対的な値で、親要素の値によって変化します。 つまり親要素が100pxの枠にmargin-left: 10%;と指定すると10pxの余白が左側にできます。 レスポンシブデザインに向いています。 |
| 数字＋em | 例・margin-left: 30em; 【em】も%と同様に相対的な値で、親要素によって変化します。 %との違いはemは親要素の文字に対して何％かどうかで変化します。 なので、文字の時はem、文字以外の時は%と覚えるといいでしょう。 |
| 0 | 例・margin-left: 0; 0は余白なしを意味しますので、数字のみで単位無しで使用できます。 |
どの単位を使うべき？
余白を指定するときは%かpxを指定するのですが、デバイスごとのデザインを変える(レスポンシブデザイン)のであれば、pxを使っても問題ありません。
どういうこと？
|
1 2 3 4 5 6 7 8 9 10 11 12 |
.box1{ width: 50%; height: 200px; margin-left: 100px; background-color: red; } @media screen and (max-width:640px){ .box1{ margin-left: 20px; } } |
解説
スマホ(最大画面幅が640px)の時は左側に20pxの余白を指定し、それ以外では100pxを指定します。
こうすることで、pcで指定した時にはちょうどいい見た目になっても、スマホやタブレットで画面幅が狭まったときに見たら余白が大きすぎるということを防ぎます。
このように設定せずにpxで指定してしまうと、パソコンで見たときには余白がちょうどいいのに、スマホで見たら余白が空きすぎということになりかねないので%を使用するのがオススメです。
%は親要素によって変化してくれるので、仮に10%と指定したら、ボックスが1000pxの時は100px、ボックスが100pxの時は10pxに自動で変化してくれます。
対応ブラウザ
全てのブラウザで使用できるので、安心して使用可能です。
| PC用ブラウザ | 対応状況 |
|---|---|
| Chrome | 完全対応 |
| Edge | 完全対応 |
| Firefox | 完全対応 |
| nternet Explorer | 完全対応 |
| Opera | 完全対応 |
| Safari | 完全対応 |
| スマートフォン用ブラウザ | 対応状況 |
| Android webview | 完全対応 |
| Android版Chrome | 完全対応 |
| Android版Firefox | 完全対応 |
| Android 版 Opera | 完全対応 |
| iOS版Safari | 完全対応 |
| Samsung Internet | 完全対応 |
margin-leftの基本的な使い方
margin-leftの書き方
margin-leftは指定したいクラスなどにcssで記入します。
htmlにべた書きすることもできますが、cssで指定するのが一般的です。
|
1 2 3 |
.box1 { margin-left : 30px ; } |
padding-leftとの違いは？
marginと類似する要素にpaddingがあります。
初心者のうちはmarginとpaddingが混同しがちなので、しっかり抑えておきましょう。
簡単にいうとpaddingは要素内の余白でmarginは要素の外の余白のことを言います。
見た方がわかりやすいのでこちらの画像をご覧下さい。
margin-left: auto;とは？
margin-left: autoは、margin-right: autoと一緒に用いて要素を中央に配置することができます。
つまり、左右の余白をautoにするわけです。
上下のmarginを指定しないのであれば、margin: 0 auto;と指定することもできます。
ブロックレベル要素はwidthを指定しないと画面幅いっぱいに広がる特徴があるので、必ずwidthで横幅を指定してからmargin: 0 auto; を指定してください。
margin-leftが効かないときの対処方法
margin-leftが効かない時の理由として2つの原因が考えれます。
それは、ブロックレベル要素になっていないことと、マージンの相殺です。
ブロックレベル要素とインライン要素の違い
ブロックレベル要素がわからない人のためにわかりやすく説明します。
ブロックレベル要素の特徴
ブロックレベル要素は高さや幅、余白を指定できますが、改行されるため横並びにならないという特徴があります。
(ブロックレベル要素でもfloatを使えば横並びにできます。)
インライン要素の特徴
それに対してインライン要素は文字の装飾などに用いられ、改行にならず並べることが可能ですが、余白や高さなどを指定できないという特徴があります。
そのため、インライン要素にmarginを使いたいときは、divなどのブロックレベル要素で囲ってあげるか、display: block; または、※display: inline-block; を指定してブロックレベル要素にする必要があります。
※display: inline-block;はインライン要素でありながらブロックレベル要素の機能も持たせることができる便利なタグです。
マージンが効かないのであれば、使用しているタグをググって、インライン要素でないか確認をしてみましょう。
マージンの相殺
次にマージンの相殺について解説します。
marginが隣あった場合、大きい方のマージンに小さい方のマージンは打ち消されるという特徴があります。
これをマージンの相殺といいます。
|
1 2 3 4 5 6 7 |
.box1 { margin-right: 100px; } .box2 { margin-left: 10px; } |
この場合、box1とbox2の要素間は単純に足し算して110pxとなりそうですが、マージンの相殺で10pxは打ち消されるので100pxになります。
margin-leftが効かないのであれば、検証モードを使用してマージンが相殺されていないか確認をしてみましょう。
まとめ
いかがでしたか？
今回はmargin-leftの使い方をまとめました。
marginはレイアウトを組むときに必ずといっていいほどよく使うタグです。
使いこなせるようになっていきましょう。
この記事がお役に立てれば幸いです。
参考文献：https://html-coding.co.jp/annex/dictionary/css/margin-left/
