CSS marginで最適な余白の設定方法!中央寄せテクニックも紹介

marginとは、簡単に言うと「余白」のことです。

合わせて読みたい

\ CSSについてわからない人は、下記記事で解説しています!参考にどうぞ /

CSS marginとは?

marginとは、簡単に言うと「余白」のことです。

新聞や雑誌には、必ず周囲に「ふち」という余白がありますよね?Webページでのmarginは、この「ふち」の余白部分を表します。

上下左右のmarginにはそれぞれ名前がついています。

  • 上余白: margin-top
  • 右余白: margin-right
  • 下余白: margin-bottom
  • 左余白: margin-left

そのままですね。

MEMO

CSSのpaddingと、どう違うの?

同じように「余白」を調節するものとしてpaddingもあります。こちらは「余白」というよりも「コンテンツの領域」を調節するものだと思ってください。

例えば、下記のように背景色を変えたい場合、paddingを使ってその大きさを調節出来ます。このように、余白よりもよりもコンテンツの一部と考えたほうがいいです。

CSS marginの使い方&使用例

marginの書き方は、上下左右別々に分けて書く方法と、一気にすべて指定する方法の2パターンがあります。順番に解説していきます。

marginを別々に分けて設定する方法

〇〇 {
    margin-top: 10px;
    margin-right: 10px;
    margin-bottom: 10px;
    margin-left: 10px;
}

marginはこのように上下左右別々に書くことが出来ます。

marginに対する値の単位
  • px: 画面のピクセル値の大きさで指定
    画面上で見える実際の大きさを指定できます。どのデバイスでも見える実際の長さは同じです。
  • em: 親要素のfont-sizeの倍率で指定
    親要素での文字サイズが基準に大きさが変わります。例えば、親要素のfont-sizeが16pxなら、1em=16pxとなります。
  • %: 親要素の大きさを基準にした割合で指定
    親要素の幅を100%として、サイズを決められます。例えば、親要素の幅は300pxの場合で50%を指定すると、marginのサイズは150pxになります。
  • rem: <body>でのfont-sizeの倍率で指定
    emと似ていますが、基準にする文字の大きさが<body>で指定された大きさのみを見る点が異なります。つまり、親要素がどんなfont-sizeであろうと、<body>のfont-sizeが一定なら変わりません。

このように、marginには、様々な値を指定できます。

autoはブラウザが自動的に適切な余白を算出して設定します。利用方法としては、「ある要素を領域の中央に配置したい場合」などに使用されます。

デフォルトはブラウザごとに異なり、pxemで適度な大きさが設定されています。

marginを一括で設定する方法

marginをつかって一括で指定する方法は、入力する値の個数によって要素に余白が入る場所が異なります。

  1. 値が1つの場合: 上下左右のすべてが同じ余白になる
  2. 値が2つの場合: 1つ目の値が上下に、2つ目の値が左右の余白になる
  3. 値が3つの場合: 1つ目の値が上に、2つ目の値が左右、3つ目の値が下の余白になる
  4. 値が4つの場合: 1つ目の値が上に、2つ目の値が右、3つ目の値が下、4つ目の値が左の余白になる

これを実際に使った例を用意しました。

CSS marginを使った応用デザイン例

CSSのmarginを使った、応用デザインの例を紹介します。

marginで要素を左右中央に配置する

このように、

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

の2つを中央配置したい要素を指定すると、左右もmarginをブラウザが自動的に余白を算出して設定します。

毎回CSSスタイルの事について調べるのは辛くありませんか?

CSSには沢山の種類があります。HTMLと組み合わせると、デザインのコーディングは非常に多くのやり方があり、常に最新の情報を追っていくのは、上級者でも大変です。

特に初心者の場合、どの情報が最新なのかわからず、知らない内に今では使えない古い知識を使っていたなんて事も多くなるのでは無いでしょうか?

そんな時、まずは最新のWeb動向や調べ方、知識を一定水準まで仕入れる事ができ、更にこの知識は古いものだから別のものを探そうと判断出来るようになりたくはないですか?

CodeCamp Webマスターコース」では、最新のHTML5とCSS3を使って授業を受けながら、わからないところは「個別指導」時にわからないところや疑問点を経験豊富なエンジニアに聞くことが出来ます!

CodeCampで学ぶと得られるメリットは下記の3つ

CodeCampで得られるメリットは沢山あるのですが、その中でも主要な3つを紹介します!

CodeCampで学ぶと得られるメリット
  • 時間・場所は選ばない: オンラインなので、仕事や学業と両立可能
    毎日朝7時〜夜24時まで時間や場所を選ばずに学習出来ます。また、365日・世界中のどこでも受講が可能です!もちろん、地方の方もOK!
  • 個別指導が受けられる: 課題の提出・添削は無制限
    自分が出来るようになるまで、課題の提出・添削は無制限で受けられます
  • 受講者数 No.1※ : オンラインプログラミングレッスンNo.1、満足度94.6%※
    実践的なテクニックや質の高いフィードバックのあるおかげで、高い満足度があります!
  • ※日経トレンディ別冊調べ:調査日 2016年10月31日
  • ※満足度:会員向け、レッスン評価アンケートの集計結果より(2018年10月-12月期)

更に、CodeCampは無料体験レッスンも実施しており、「良い方が担当者さんだった!」と、多くの口コミも広がっています!

気になる方は、下記をクリックして無料体験レッスンを受けられるので、申し込んでみてください!

最後に口コミのまとめ