はじめに
HTML＆CSS入門講座の第八弾として、【CSS】 padding、ｍargin の使い方ついて紹介します。
この記事を読むと次の疑問について知ることができます。
●paddingやmarginの使い方はどうするの？
・ 色々な指定の仕方
上下左右をまとめて指定する方法
上下左右のどれか1つだけ指定する方法
上下左右の余白を個別に違う値などを一度に指定する方法
上下や左右の値をセットで同じ値を指定する方法
余白の指定を％で指定する方法
paddingとは？、marginとは？
これを説明するには、ボックスモデルを用いたほうが分かり易いです。
前にも何度か示していますが、ここに再度、表示します。
上述の図から分かるように、paddingは、要素の中身とボーダー（線）の間の余白のことで、marginは、ボーダー（線）の外側の余白のことなんです。
そして、widthやheightは中身に対して指定するもので、paddin、marginに対しては含まれないことに注意しましょう。
paddingやmarginの使い方
色々な指定方法
上下左右をまとめて指定する方法
それでは実際に、実例を書いてみましょう。
<h1>paddingとmarginの違い</h1>
<h2 class="pad1">この要素にはpadding、marginの指定なし</h2>
<h2 class="pad2">この要素にはpddingの指定あるが、marginの指定なし</h2>
<h2 class="mar2">この要素にはmarginの指定あるが、paddingの指定なし</h2>
<h2 class="pad3">この要素にはpdding、marginの指定なし</h2>
.pad1 {
background-color: skyblue;
}
.pad2 {
background-color: red;
padding: 50px;
}
.mar2 {
background-color: red;
margin: 50px;
}
.pad3 {
background-color: green;
}
上述の画像には、5つの要素が使われています。
- 見出しの要素：h1タグの「paddingとmarginの違い」
- 2番目（背景：スカイブルー）と5番目（緑）のpaddingとmarginの指定なし
- 3番目要素のpaddingで上下左右に50pxの余白を取ったもの
- 4番目要素のmarginで上下左右に50pxの余白を取ったもの
以上の結果から、次のことが分かります。
- 背景には、paddingの余白が含まれること。
- 背景には、marginの余白は含まれないこと。
上下左右のどれか1つだけ指定する方法
<h2>paddingで上下左右に1つのみ指定した場合の違い</h2>
<h3 class="padtop">この要素には上に余白30pxのpaddingを指定</h3>
<h3 class="padright">この要素は右に余白30pxのpaddingを指定</h3>
<h3 class="padbottom">この要素は下にに余白30pxのpaddingを指定</h3>
<h3 class="padleft">この要素は左に余白30pxのpaddingを指定</h3>
<h2>marginで上下左右に1つのみ指定した場合の違い</h2>
<h3 class="marright">この要素は右に余白30pxのmarginを指定</h3>
<h3 class="martop">この要素には上に余白30pxのmarginを指定</h3>
<h3 class="marbottom">この要素は下にに余白30pxのmarginを指定</h3>
<h3 class="marleft">この要素は左に余白30pxのmarginを指定</h3>
.padtop {
background-color: red;
padding-top: 30px
}
.padright {
background-color: red;
padding-right: 30px
}
.padbottom {
background-color: red;
padding-bottom: 30px
}
.padleft {
background-color: red;
padding-left: 30px
}
.martop {
background-color: red;
margin-top: 30px
}
.marright {
background-color: red;
margin-right: 30px
}
.marbottom {
background-color: red;
margin-bottom: 30px
}
.marleft {
background-color: red;
margin-left: 30px
}
HTMLとCSSを見ながら、それぞれの違いを見てください。
上下左右の余白を個別に違う値などを一度に指定する方法
上下左右の余白を別個にそれぞれ違う値を一度に指定したい場合に使用します。
<h1>上下左右にpaddingを指定</h1>
<h2 class="padzen">この要素にはpaddingの上下左右の余白を違う値を指定</h2>
<h1>上下左右にmarginを指定</h1>
<h2 class="marzen">この要素にはmarginの上下左右の余白を違う値を指定し</h2>
.padzen {
backgroud-color: skyblue;
padding: 30px 20px 50px 10px;
}
.marzen {
backgroud-color: skyblue;
margin: 30px 20px 50px 10px;
}
上下や左右の値をセットで同じ値を指定する方法
上下が同じ余白、左右が同じ余白の場合に指定する方法です。
<h1>上下や左右の値をセットで同じ値のpaddingを指定</h1>
<h2 class="padjougesayu">この要素には上下や右左の値をセットで同じ値のpadding余白を指定</h2>
<h1>上下や左右の値をセットで同じ値のmarginを指定</h1>
<h2 class="marjougesayu">この要素には上下や右左の値をセットで同じ値のmargin余白を指定</h2>
.padjougesayu {
backgroud-color: green;
padding: 50px 30px;
}
.marjougesayu {
backgroud-color: green;
margin:50px 30px;
}
余白の指定を％で指定する方法
この指定方法は、左右の余白の指定で利用することがほとんどで、上下の余白の指定ではほとんど利用しません。
そして、その指定方法は、親要素に対する割合（％）で子要素を指定します。
また、width（幅）、padding、marginの何れも使い、合計で100％にする必要があります。
そうしないと、子要素は親要素をはみ出してしまいます。
ここでは、親要素のwidth（幅）500px、子要素のwidth（幅）60％、padding10％（左右で20％）、margin10％（左右で20％）を見てみましょう。
<h1>余白、幅のパーセント指定した場合</h1>
<div class="oya">
<h2>余白のパーセント指定</h2>
</div>
あと、このような％を指定する方法は、前にも少し説明しましたが、レスポンシブルデザインで利用されます。
つまり、パソコンで見た際に45pxの余白がちょーど良い余白ですが、スマホで見ると余白が大きすぎてバランスが良くないというときに使います。
パソコンで見た際には、例えば横幅が900pxが横一杯の長さであり、余白が45px（5％の余白）が丁度良いとすれば、ここで余白を％指定してやれば、300pxのスマホでの余白は300×5％＝15pxとなり、パソコンで見た場合と同じバランスで見ることができると言う訳です。
おわりに
如何だったでしょうか？
paddingとは、marginとは何ですか？、paddingやmarginの使い方はどうするの？、色々な指定の仕方、上下左右をまとめて指定する方法、上下左右のどれか1つだけ指定する方法、上下左右の余白を個別に違う値などを一度に指定する方法、上下や左右の値をセットで同じ値を指定する方法、余白の指定を％で指定する方法などについて解説してきました。
この記事があなたにとって少しでもお役に立てればこれほど嬉しいことはありません。
以上です。
コメント