見た目を形作る境界線と余白
要素の見た目は、大きさや色だけでなく、どれくらい余白があるか、どこまでが要素なのかによって印象が大きく変わります。
CSSでは、要素の外枠をborder、要素の内側の余白をpadding、要素同士の間隔をmarginで調整します。
ここでは配置やレイアウトの話はせず、画面上でどう見えるかに注目して整理します。
枠線
borderは要素の外側に線を引くプロパティです。
ボックスの境界をはっきりさせたり、入力欄や注意エリアを視覚的に区別したりするために使われます。
シンプルな線でも、あるだけで情報の区切りが分かりやすくなります。
構文
セレクタ{
border:線の太さ（値） 線種（キーワード） 色（値）;
}
border は上下左右すべてに対して、線の太さ・種類・色をまとめて指定できます。
指定しなかった値はデフォルトの値になります。
線の太さはpxで指定するのがメジャーで見え方に対してその通りの太さになるので無難です。
種類はsolid（実線）、dashed（破線）、dotted（点線）、none（なし）を紹介します。
色は文字色や背景色と同じ指定方法になります。
コード例
<p>枠線を1pxの赤い実線にします。</p>
<p class="dashed">枠線を2pxの緑の破線にします。</p>
<p class="dotted">枠線を3pxの黒の点線にします。</p>
<p class="none">枠線を消去します。</p>p{
border: 1px solid #ff0000;
}
.dashed{
border: 2px dashed #00ff00;
}
.dotted{
border: 3px dotted #000000;
}
.none{
border: none;
}出力例
枠線を実線にします。
下の枠線のみ破線にします。
左右の枠線を点線にします。
上と右の枠線を消去します。
出力例を見てわかるように枠線を多用しすぎると画面がうるさくなり、情報の優先度が分かりにくくなります。
必要な箇所だけに絞って使い、背景色や余白と組み合わせて自然な区切りを作ることがポイントです。
また、値の順番はこの通りでなくても構いませんが、自分なりに順番を決めるといいでしょう。
内側の余白
paddingは、要素の中身と外枠との間にできる余白を指定するプロパティです。
文字と背景や枠線との距離を調整する役割を持ちます。
構文
セレクタ{
padding:値;
}
paddingを指定すると、文字と枠線との距離が上下左右に広がり、背景色が塗られる範囲も内側に向かって広がります。
これは要素の中にゆとりを持たせるための余白です。
コード例
<p>要素の内側に余白を20px追加します。</p>
p{
background-color: #fefdc4;
width: 250px;
padding: 20px;
}出力例
要素の内側に余白を20px追加します。
余白がついているかわかりやすいよう背景色を塗りました。
このように内容のサイズに左右されず、上下左右すべてに余白が20pxずつ追加されました。
外側の余白
margin は、要素の外側に作られる余白で、要素同士の距離を調整するために使われます。
構文
セレクタ{
margin:値;
}
marginを指定すると、要素と他の要素との上下左右の間隔が変わります。
背景色や枠線は、この余白部分には表示されません。つまりmarginは、要素同士の関係を調整するための余白です。
コード例
<p>外側に余白を20px追加します。</p>
<div class="div-box">
<div class="content-box">外側に余白を20px追加します。</div>
</div>p{
margin: 20px;
}
.div-box{
background-color: #dcf8c0;
border: 1px dotted #000000;
}
.content-box{
background-color: #fefdc4;
border: 1px solid #000000;
margin: 20px;
}出力例
外側に余白を20px追加します。
外側に余白を20px追加します。
同じような見た目の出力例を2つ示していますが、この2つは挙動が大きく異なります。
1つ目はp要素のみにmargin:20pxを指定した例です。
左右には余白ができますが、上下には20pxの余白ができていません。
これは指定ミスではなく、上下のmarginが相殺（margin collapsing）されているためです。
上下方向では、親要素に境界（borderやpadding）が存在しない場合、子要素のmarginが親要素の外側へ移動するため、余白として見えなくなります。
一方、2つ目は外側のdivにborderを指定した例です。
この場合、borderが境界となるため、上下左右すべてに20pxのmarginが正しく表示されます。
このように、marginは左右方向ではそのまま効きますが、上下方向では境界（borderやpaddingなど）がないと相殺されるという特徴があります。
枠線・余白の個別指定
border、padding、marginはいずれも、上下左右を個別に指定することができます。
構文
セレクタ{
/*borderの上下左右個別指定*/
border-top:線の太さ（値） 線種（キーワード） 色（値）;
border-right:線の太さ（値） 線種（キーワード） 色（値）;
border-bottom:線の太さ（値） 線種（キーワード） 色（値）;
border-left:線の太さ（値） 線種（キーワード） 色（値）;
/*paddingの上下左右個別指定*/
padding-top:値;
padding-right:値;
padding-bottom:値;
padding-left:値;
/*marginの上下左右個別指定*/
margin-top:値;
margin-right:値;
margin-bottom:値;
margin-left:値;
}それぞれのプロパティの末尾にtop・bottom・left・rightを追加するだけで個別指定が可能になります。
コード例
<div>
<p>
下と左に枠線を追加し、上と右と左外側の余白を20pxにし、上内側の余白を15pxにします。
</p>
</div>div{
background-color: #dcf8c0;
border: 1px dotted #000000;
}
p{
background-color: #fefdc4;
border-bottom: 1px solid #000000;
border-left: 4px solid #000000;
padding-top: 15px;
margin-top: 20px;
margin-right: 20px;
margin-left: 20px;
}出力例
下と左に枠線を追加し、上と右と左外側の余白を20pxにし、上内側の余白を15pxにします。
相殺を阻止するためにdivに枠線を使用しましたが、このように上下左右ともに個別で指定ができますし、複数指定することも可能です。
また、paddingやmarginに同じ数値を指定しましたが、別の数値の指定でも可能です。
borderは組み合わせるとデザイン的な装飾も可能なので、色々と試してみることをお勧めします。
余白の省略形（ショートハンド）
paddingとmarginは、1行でまとめて指定する省略形が用意されています。
構文
セレクタ{
/*値が2つの場合*/
padding:上下の値 左右の値;
margin:上下の値 左右の値;
/*値が3つの場合*/
padding:上の値 左右の値 下の値;
margin:上の値 左右の値 下の値;
/*値が4つの場合*/
padding:上の値 右の値 下の値 左の値;
margin:上の値 右の値 下の値 左の値;
}
値が4つの場合は上から時計回りに指定すると覚えるのがお勧めです。
また、2つの場合はよく使うので、この形は覚えておきましょう。
コード例
<div>
<p class="shorthand2">
値を2つ指定します。
</p>
</div>
<div>
<p class="shorthand3">
値を3つ指定します。
</p>
</div>
<div>
<p class="shorthand4">
値を4つ指定します。
</p>
</div>div{
background-color: #dcf8c0;
border: 1px dotted #000000;
}
.shorthand2{
background-color: #fefdc4;
padding: 0 30px;
}
.shorthand3{
background-color: #fefdc4;
margin: 10px 20px 15px;
}
.shorthand4{
background-color: #fefdc4;
padding: 20px 5px 10px 0;
margin: 5px 0 10px 15px;
}出力例
値を2つ指定します。
値を3つ指定します。
値を4つ指定します。
1つ目は上下のpaddingを0、左右のpaddingを20pxに指定しています。
2つ目はmarginを上に10px、左右に20px、下に15pxに指定しています。
3つ目はpaddingを上に20px、右に5px、下に10px、左に0pxに指定し、さらにmarginを上に5px、右に0px、下に10px、左に15pxに指定しています。
このようにpaddingやmarginは省略形でまとめて指定することもできますが、最初は上下左右を意識しながら指定し、慣れてきたら省略形を使うようにすると理解しやすくなります。