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

2020年6月1日追記: こちらに、CSSを学べる講座ページを用意しました。

ヨスのCSS講座

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

デザインの基本で、重要なものの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(パディング)」と言う
内側の余白は「padding(パディング)」と言う

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

ヨス

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

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

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

上側: 見出しがキツキツ・下側: padding(内側の余白)をとってみた
上側: 見出しがキツキツ・下側: padding(内側の余白)を空けてみた

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

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

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

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

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

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

というわけで今回は「margin」「padding」を紹介しました。

この2つを覚えるだけで余白を制覇できます。

以前書いた「ブログの文章部分を読みやすくするために私がやっている7つの技」も今回の「margin」「padding」で調整できますよー!

それにしても、CSSやHTMLって独学で学んでいくのって大変ですよね。

バイトなんかをしながら時間の合間に勉強するのにオススメなのが、完全にオンラインで学べるTechAcademy [テックアカデミー]です。

その中でも「Webリニューアル集中プログラム」など、実践を学びながら成果物ができるというオススメのプログラムがあります。

現在は無料体験もできるようなのでおすすめですよー。