WEBデザインブログカスタマイズ

CSSのmargin・padding・borderって何?覚えておきたいボックスのこと

こんにちは。WEBデザイン勉強中のシズです。

CSSでよく見かける「margin」「padding」「border」って何を意味しているのか分かりますか?私は勉強するまでさっぱり分かりませんでした。

英語は多少できるのですが、それでもこれらの単語は聞いたことがなかったし、意味も知りませんでした。

でもWEBデザインにおいて、これらは絶対に覚えておかなくてはならないとっても大事なことなんです!

今回は勉強したての「ボックス」について、解説したいと思います。

スポンサーリンク

ボックスって何?

WEBサイトはHTMLというもので書かれています。

例えばサイトタイトルなら<h1>というHTMLで書かれます。このブログのサイトタイトルはHTMLで書くと、

<h1>私はシズかに生きれない</h1>

となります。

WEBサイトのコンテンツはこのようにいろいろなHTMLコードで構成されているのですが、それら一つ一つの要素はボックスと呼ばれる領域を持っています。

私のサイトタイトルは文字だけでなく画像になっていますが、この画像は目に見えない四角いボックスに囲まれているわけです。

もちろん、サイトタイトルだけでなくこの記事内の見出し「ボックスって何?」の部分や、それ以下の文章が書かれている段落にもボックスはあります。

margin/padding/borderの意味

目に見えないボックスの領域は、CSSで広げたり狭くしたりすることができます。また、この目に見えないボックスを見えるようにすることもできます。

そしてボックスの領域を変更するときに、margin/padding/borderを使用します。

marginは日本語で余白や欄外という意味で、paddingは穴埋め、borderは線や縁という意味です。

それぞれの言葉がそれぞれボックスのどの領域を指すのかというのが、下記になります。

marginやpaddingのサイズを大きくすると、周りに余白が空きます。

何も設定しないとborderの線は見えませんが、スタイルを指定してこのボーダーを実線にしたり破線にしたりすることはできます。

ちなみに上の画像もborder部分のスタイルを実線で指定しているため、画像が四角で囲まれています。

margin/paddding/borderをスタイルで変更するとどうなるのか

ボックスの領域を図で表してもちょっと分かりずらいので、実際にこれらのスタイルを変更するとどうなるのか、画像で説明します。

まずはスタイルを何も設定していないh1の領域(※サイトタイトル部分)は真っ白で何もありません。

そしてh1の領域にCSSで背景カラーを設定すると、下記のようになります。

この黄色の部分がh1が所有している領域(ボックス)です。

さらにmarginを30pxに指定すると、下記のようになります。

黄色の四角の外側の領域が、30px分広がりました。

今度はpaddingを30pxに指定すると、下記のようになります。

marginのときは外側の領域が広がりましたが、paddingを30pxで指定すると内側の領域が30px分広がりました。

最後にborderも実線を指定した上で30pxにすると、下記のようになります。

背景が黄色で囲まれた部分に30pxの太さの実線が現れました。

このようにmargin/padding/borderがどのように変化するのかが分かれば、それぞれがどの部分を指しているのかがよく分かりますね!

ちなみに上記で設定したスタイルコードは下記の通りです。

ボックスの領域は上下左右それぞれ別にスタイルを設定できる

margin/padding/borderにはそれぞれ上下左右に領域があります。

つまり、これらは別々にスタイルを指定することができます。

上側だけスタイル指定する場合は「top」、右側は「right」、左側は「left」、下側は「bottom」を使用します。

margin部分の上側だけ領域を変更する場合、「margin-top」となります。

ただ、それぞれ別の数値で指定したい場合は「margin-top」「margin-right」「margin-left」「margin-bottom」と一つ一つ指定しなくても、marginだけを使って一括指定することができます。

例えば、上を10px・右を20px・下を30px・左を40pxと指定したい場合、下記のようにコードを入力できます。

数値を入力する順番は、上・右・下・左と時計回りの順で入力します。

また、数値を入力する方法は4つあります。

例えば「margin: 10px;」と数値が一つだけの場合、この10pxは上下左右それぞれに適用されます。

そして「margin: 10px 20px:」と数値が二つ入っている場合、上下に10px・左右に20pxが適用されます。

さらに「margin: 10px 20px 30px;」と数値が三つ入っている場合、上に10px・左右に20px・下に30pxが適用されます。

最後に「margin: 10px 20px 30px 40px;」と数値が四つ入っている場合、上に10px・右に20px・下に30px・左に40pxがそれぞれ適用されます。

ボックスが分かればブログの余白部分を調整できる!

ボックスが理解できれば、自分のブログの余白部分を自分の好きなように調整することができます!

例えば記事の見出し部分とその後の文章部分、余白を変えたいなと思った場合、

とCSSに書き込めば、見出し2の下部の幅を10px分空けることができます。

ただ初心者だと何ピクセルがどれくらいの幅かっていうのが全然ピンと来ないので、最初は適当に数字を入力してプレビュー見ながら調整するしかありません。