Breaking News
Home / デザイン / HTML/CSS/Javascript / 【初心者向け!】CSSで一度はつまずくmarginの使い方まとめ

【初心者向け!】CSSで一度はつまずくmarginの使い方まとめ


WEBデザインでCSSの勉強を始めた時、誰もが一度はmargin使い方で首をひねったことでしょう。

これは実際の仕様と、私たちが望んでいる動作が違うことがよくあるからです。

でも、実はmarginは使いこなせば便利な機能です。今回は初心者がよくつまずくポイントと便利な使い方を紹介したいと思います。

1.そもそもmarginとは?

ひとことで言うと他の要素に対する余白です。なので余白には背景色や線も設定されません。

例えば下記のようにコードを書いてみます。

ブラウザで見るとこんな感じ。要素1と要素2の周りに余白ができていることがわかります。

このコードを使ってmarginのポイントを見ていきたいと思います。

screen-shot-2016-09-29-at-09-34-49

2.片方のmarginしか効いてない

余白をつけたい要素の両方にmarginを設定しているのに、片方の値の分しか余白ができていないといった経験はありませんか?

これはmarginの特性で要素同士でmarginを上書きするんです。

コードを書き足してみます。

ブラウザで見るとこんな感じです。

screen-shot-2016-09-29-at-09-46-45

わかりにくいかもしれませんが、要素1と要素2の間には30px分の余白が空いています。これは要素2の余白が効いている、つまり大きい値が優先されているということです。

3.marginが0なのに余白が生まれる

このパターンは大体内側の要素が原因です。

外側の要素に背景色を設定して見えるようにしてみます。

screen-shot-2016-09-29-at-10-04-39

こんな風に表示されると思います。画像をクリックして拡大してみると、上の部分に余白が入っていることがわかります。これは外側のdiv要素にはmarginが入っていなくても要素1のmarginが適用されているからです。

ヘッダーを作る時にこのままでは困りますね。内側の余白をなんとかしないといけません。

解決方法を見ていきましょう。

  1. marginを削除してpaddingにする
    上部の余白をなくして、外側のdivにpaddingを設定してみました。ブラウザで見てみましょう。

    screen-shot-2016-09-29-at-10-19-15
    ちゃんと背景色が設定されていますね。いらない余白は削除できました。

  2. floatを設定する
    これは限定的な使い方になるかもしれませんが、内側の要素にfloatが設定してあるときは外側のmarginに影響が出ません。さっそくコードを書いてみます。

    floatを使った場合、外側の要素の幅にも影響が出なくなってしまうのでclearfixというテクニックを使います。
    div.parent:afterと書いてある部分がclearfixです。これをブラウザで見てみましょう。
    margin
    設定されたmarginの値が適用されていますね。ヘッダーの中で要素を並べたい時などはこちらのやり方のほうがきれいだと思います。

4.marginでblock要素を右寄せ、左寄せ、中央揃えする

block要素にはtext-alignプロパティが効きません。なのでmarginを使って中央揃えなどを実現します。

この時使う値がautoです。さっそくコードを書いてみます。

autoを使うと画面の残りの幅から自動で余白が計算されます。まずはブラウザで見てみましょう。

margin

要素が左寄せ、中央揃え、右寄せになっていますね。ただし、あくまで余白で位置が調節されているだけなので空いたスペースに文字を入れたりといったことはできません。その場合はfloatプロパティを使って左寄せ、右寄せを行いましょう。

中央揃えにする時はよく使うテクニックなので覚えておきましょう。

 

 

 

 

終わりに

いかがだったでしょうか。marginはCSSでもよく使うプロパティです。

他のプロパティと一緒に使うことも多いのでこの期に基本の使い方を覚えておきましょう。

いろいろと値を変更してみて感覚で身につけていくとわかりやすいかもしれません。

 


About takeuchi

takeuchi
富山県で学生やりながらWEB関連の仕事してます。 デザインからコーディングまでのフロントエンドをメインにやってます。 最近はサーバー側にも興味しんしんです。

Check Also

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-11-21-02-09

【やさしく解説!】CSSで多角形のボタンを作成する方法

webサイトなどを作るにあたっ …