[CSS]WEBデザインの基本「margin」「padding」で余白を操ろう!

こんにちは! ヨス（プロフィールはこちら）です。

デザインの基本で、重要なものの1つといえば余白の使い方です。素人とプロの違いが一番見える領域だとも言えます。

そんな余白をWEBサイトの中でつくろうと思ったとき、どうすればいいのでしょうか？

そこで登場するのが「CSS（スタイルシート）」の「margin」「padding」という2つの要素です。

ぜひ、この2つの違いをマスターし、WEB上の余白をつかいこなしましょう。

CSSの書き方がわからない人はこちらを

CSSの書き方どころかCSSって何? という方はこちらの以前の記事から読んでください!

……じゃないと今回の内容はチンプンカンプンだと思います!

ということで、今回はこういうHTMLコードをいじっていきます。

<p>こんにちは! ヨスです!
今回はCSSの基本である「margin」
「padding」「border」について
詳しく紹介します!</p>

これをブラウザで見るとこんなふうに下記のように見えます。

こんにちは! ヨスです!
今回はCSSの基本である「margin」
「padding」「border」について
詳しく紹介します!

何もCSSでデザインされていない状態です。

例文に「border」も入っていますがこれは別の記事で紹介します。最初はいっしょに紹介する予定でした（笑）。

すべての要素には「領域」がある

まず知っておいていただきたいのは「HTMLのすべての要素には領域がある」ということです。

こういうイメージです。

ええ。こんなこといきなり言われても意味わからないですよね（笑）。先ほどの例を下にもう一度出します。

<p>こんにちは! ヨスです!
今回はCSSの基本である「margin」
「padding」「border」について
詳しく紹介します!</p>

これの<p>と</p>に囲まれた部分が「領域」なんです! ブラウザで見ると下記のように見えますが……

こんにちは! ヨスです!
今回はCSSの基本である「margin」
「padding」「border」について
詳しく紹介します!

……実はこれ! 何もデザインがないように見えて、実はちゃんとデザインされているんですよ。先ほど言った「領域」に!!

基本中の基本「margin（余白）」の指定

では領域にどんな指定をしているかというと、「余白」です。

こちらのアニメーション画像を見てください。

余白には「margin（マージン）」という指定をします。

CSSでは、こんな記述になりますよー。

p {
margin-top : 2em ;
margin-left : 1em ;

}

上のCSSのでは2つの指定をしています。説明すると……

• margin-top（上の余白）→ 2em（2文字分）
• margin-left（左の余白）→ 1em（1文字分）

こんな指定をしています。この「em」という単位は「1em」が1文字分の大きさという意味です。これは「px（ピクセル）」でもいいですよー。

なのでここでは上に2文字分の余白、左に1文字分の余白を入れましょうという指定です。

「margin」はまとめて指定しよう

このように上下左右に余白を入れるときは「margin」という呪文を書いて命令します!

• margin-top（上の余白）
• margin-right（右の余白）
• margin-bottom（下の余白）
• margin-left（左の余白）

これで上下左右の指定ができるのですが、長ったらしいですよね。

なので普通はまとめて下のように書きます。

p { margin : 2em 0 0 1em ; }

これを説明すると……下のアニメーションを見てください。

まとめて記述するときには……

• 「上」「右」「下」「左」の順に数字を記述
• 「半角スペース」で繋いでいく
• 数値が「 0（ゼロ）」のときは単位は要らない

……のようなルールで書くとオッケーです。

余白には「margin」と「padding」がある

先ほど「margin」というCSSを見ましたが、実はもう一つの余白「padding」というものがあるんです。

こちらを見てください。

そう! 内側の余白を「padding（パディング）」と呼びます。

イヤ、余白なんて2種類にわけなくていいだろっ!

……と言いたい気持ち、わかります。

「padding」で分かりやすいのは「見出し」のデザインで使われるときです。しかも背景に色を塗っているとき。

何もしなければ上側のような表示になります。ちょっと窮屈な感じですよね。

なので、下側の見出しでは「margin」とは別に「padding（内側の余白）」も空けているんです。

これをCSSのコードで見ると……

h2 {
background : red ;
margin : 2em 0 0 1em ;
padding : 0.5em ;
}

こんな感じで「上下左右に0.5emずつ」のように全部の数値が同じ場合は「0.5em」とだけ書けばオッケーです。

あと「em」は「0.5em」のように小数点でも指定できますので微調整も便利です。