ウェブログラム ~学習するな実践せよ~

CSSでボックスの余白を表現する

前回はCSSで「ボックスの高さ・横幅・背景色の指定」について学びました。
今回はボックス自体ではなく、ボックスの周りの余白について学んでいきましょう。

Webサイトにおける余白とは

まずは、以下の画像をみてください。

ボックスの周りには「上下左右」全ての方向に余白を付けることができます。余白は隙間といった感じですね。
また、この余白付きのボックスの周りにボックスを配置したら、以下のような感じに余白を取ることができます。

上下左右に100pxずつ取っているので、100pxの余白がうまれます。
この余白を上手に利用することでサイトのデザインをきれいに見せているんですね。

等フロントグラムのサイトの記事ページの上部などでも、至るところで余白を使用しています(かなり多いので省略してます)。

このように適度に余白をとったり、均等に余白取ることでサイト全体の統一感・見栄えが良くなります。
実は余白には2つの種類があり、これらをうまく利用することで、より多くの表現ができるようになります。ぜひ押させておきましょう!

marginとpaddingについて

余白には「margin(マージン)」と「padding(パディング)」という2つの余白があります。

  • margin: 外側の余白
  • padding: 内側の余白

外側、内側という言葉がでてきましたが、これは一体何の外側・内側なのでしょうか?
それは、ボックスの枠線(ボーダー)の外か内かということです。
ボックスにはボーダーがあり通常は見えません(色とか幅をボーダーに設定することで見ることができます)

例として、100px × 100pxのボックスを作成します。
※便宜上、枠線を黄色で書いていますが、通常は見えません。

この図形をコードで書くと以下のようになります。

index.html
<div class="box"></div>
style.css
.box {
height: 100px;
width: 100px;
background: skyblue;
}

もしボーダーが見たい場合は以下のようなプロパティを.boxに設定してください(style.css)。

border: 1px solid yellow;

「ボーダーの幅 ボーダの線の種類(実線とか点線とか) ボーダーの色」3つのプロパティ値を設定できます。

では、ボックスのボーダーの外側・内側の上下左右にそれぞれ100pxずつ取ってみます。図に表すとこのようになります。
緑が外側(margin)、赤が内側(padding)です。

margin(緑)はわかりやすいと想いますが、padding(赤)はどうでしょうか?
黄色のボーダーが広がっているのが分かりますか?

これは一体どういうことかというと、paddingはボーダーの内側の余白でしたね。
つまりボーダー自体が広がったのではなくpaddingによってボーダーが広げられたということです。

ボックスの背景色はボーダー内であれば色付く仕組みなので、paddingの余白の領域にも色がついています。
ボックス自体はあくまで、100px × 100px ですが、paddingの余白のせいで大きくなっているように見えます。

CSSのコードは以下のようになります。

style.css
.box {
height: 100px;
width: 100px;
background: skyblue;
margin: 30px;
padding: 30px;
}

では、marginとpaddingはどいういった使われるのでしょうか?
ざっくり説明すると、marginは背景色をつけたくない余白、paddingは背景色をつけたい余白で使い分けるのが良いです。
また、当フロントグラムの例を見ましょう。

paddingを使用している部分は緑色の背景がつけられています。もしここをmarginで行うと白くなってしまいます。
marginを使用しているところであれば、背景色はつけられず「一般的な意味での余白(隙間)」を表しています。

marginとpaddingは初めこんがらがってしまいますが、使っているうちに慣れてくると思います。
もっと詳しく知りたい方は「marginとpaddingの違いを理解して適切に使い分けよう!」を読んでみてください。

 

次回はCSSのレイアウトを考えていく上で重要な要素になる「インライン要素」と「ブロック要素」について学んでいきましょう。
実はこの名称は廃止されているのですが、レイアウト理解の前提知識として役に立つので抑えておきましょう。