CSS05 ボックスの構造を理解しよう！その1（10分46秒）

スタイルシート独特の考え方であるボックスについて2回に分けて詳しく解説しています。

ボックスの背景、枠線、余白など各要素ごとに細かく指定する方法をマスターしましょう！

第一回目の今回は、ボックスの構造とpaddingとborderプロパティの指定方法・注意点です。

contents

概要

ボックスの構造について
paddingプロパティ
borderプロパティ

補足・ポイント

ボックスの構造について

ボックスの構造

スタイルシートでは、テキストや画像などのコンテンツを格納する領域のことを「ボックス」と呼びます。

ボックスの構造

ボックスは、

テキストや画像などコンテンツを表示する領域
それを囲む枠線であるボーダー
パディングと呼ばれるコンテンツとボーダーの間の余白
マージンと呼ばれる枠線と外側の余白

によって構成されています。

こういった、コンテンツ、枠線や余白に対して、それぞれスタイルを指定することで要素をデザインしていきます。

そして、このボックスを元にwebページ全体のデザイン・レイアウトをしていくことになります。

paddingプロパティの書き方

ブロックレベル要素の内側で、コンテンツとの間に余白を作るにはpaddingプロパティを使います。

paddingプロパティの値の指定方法

値を1つ指定する: 上下左右、同じサイズのパディングになります。
値を2つ指定する: 記述順に、上下・左右のパディングになります。
値を3つ指定する: 記述順に、上・左右・下のパディングになります。
値を4つ指定する: 記述順に、時計回りに上・右・下・左のパディングになります。

例：上下（60px）と左右（30px）を指定

p {
　padding;60px 30px;
}

※値が0の時には単位は省略できます。

※複数指定は半角スペースで区切ります。

個別にpaddingを指定する書き方

上下左右、どれか１つだけ指定したい場合などには、以下のプロパティを使うこともできます。

padding-top（上）
padding-right（右）
padding-bottom（下）
padding-left（左）

p {
padding-bottom:50px;
　 padding-top:20px;
}

borderプロパティの書き方

ボックスのボーダー（枠線）は、「スタイル（形状）」「色」「（太さ）」を自由にデザインすることができます。

ボーダーのスタイル（形状）を指定

プロパティ {
border-style:値;
}

値には以下が入ります。

none: 表示させない（デフォルト）
solid: 1本線で表示されます。
double: 2本線で表示されます。
dashed: 破線で表示されます。
dotted: 点線で表示されます。

※border-styleは省略できません。
ボーダーのスタイルを指定せずに、ボーダーの色や太さを指定しても、枠線は表示されません。
初期値がnoneとなっているためです。

ボーダーの幅を指定

プロパティ {
border-width:数値;
}

※省略できます。
初期値：midium

ボーダーの色を指定

プロパティ {
border-color:色の指定;
}

※省略できます。
テキストに指定した色で表示されます。

例：1本線・3px・赤色

プロパティ {
border-style:solid;
border-width:3px;
border-color:red;
}

ボーダーのスタイル・幅・色を一括指定

borderプロパティを使えば、スタイル、幅、色を一括指定できます。

値は半角スペースで区切ります。

値を書く順番は特に関係ありませんが、自分の書き方を決めておくとよいです。

プロパティ {
border:幅 スタイル 色;
}

例：1px・1本線・赤色

プロパティ {
border:1px solid red;
}

上下左右を個別に指定・一括指定

パディングと同様に、上下左右を個別に指定したり、一括で指定したりすることができます。

値を1つ指定する: 上下左右がそのスタイルになります。
値を2つ指定する: 記述順に、上下・左右のスタイルになります。
値を3つ指定する: 記述順に、上・左右・下のスタイルになります。
値を4つ指定する: 記述順に、時計回りで上・右・下・左のスタイルになります。

例：上下と左右のスタイル・幅・色を指定

p {
　border-style:solid double;
border-width:2px 7px;
border-color:red green;
}

個別に指定

上下左右、どれか１つだけ指定したい場合などには、以下のプロパティを使うこともできます。

border-top（上）
border-right（右）
border-bottom（下）
border-left（左）

例：p要素の下のみに5px・1本線・赤色

p {
border-bottom:5px solid #cc0000;
}

要領がわかってきたらいろいろと試してみて下さい。

ボーダーやパディングの指定だけでもいろんなデザインができます。

次回は、marginプロパティとボックスとwidthプロパティの関係について解説します。

どうぞ、お楽しみに！

ボックスの構成要素である、paddingやmargin、borderの指定方法には、いくつか種類があり、受講生さんの中には、「全部覚えなければいけないのか！！」と構えてしまわれる方が多いようです。

しかし、これらをすべて覚えなければ、先に進めない・・・ということはないのでご安心を。

CSSを書くことや読むことに慣れてくるとプロパティを見れば、だいたい「何についての指定」なのかが解かるようになってきます。

それができれば、あとは「自分なりの指定方法」みたいなものを決めておけばOKなのです。

Web制作会社には、それぞれCSSの書き方ルールのようなものが決まっていることが多いです。

「何についての指定」の意味さえ理解していれば、就職後も柔軟な対応ができますよね^^