LINEで現役エンジニアに直接質問してみよう!登録無料

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をブラウザが自動的に余白を算出して設定します。

この記事を書いた人

自身がプログラミングを独学で勉強し始めて躓いた経験を元に、これから勉強をする人に向けに「イラスト多めでわかりやすい記事」にこだわって情報を発信しています。

現在はフルスタックエンジニアとしてサービス開発などのお仕事をしています。