CSS【ボックスモデル】を画像付きでわかりやすく説明するよ!

CSSを使いこなせるようになるには【ボックスモデル】の概念を理解する必要があります。

ボックスモデルってなんだろう?

簡単に言えば要素は1つのボックスでそのボックスにはボックスのwitdh(高さ),height(幅),padding(内側の余白),margin(外側の余白)border(ボックスの境界線)があり、それらを『PX』,『%』などの単位でボックスサイズ,余白,境界線の調整をすることができます。

下の画像をみてください。pタグとspanタグに背景色をつけました。背景色がついている部分すべてがpタグ,spanタグのボックス領域になります。

pタグはブロック要素なので、段落すべてに領域を取っています。逆にspanタグは文字の領域部分のみになります。

これが要素のボックスということになります。

ボックスのサイズ変更

widthとheightでサイズの変更

p{
background-color:#ff7f50;
width:200px;
height:200px;
}
span{
background-color:#ff7f50;
display: block;
width:200px;
height:200px;
}

縦200px,横200pxのボックスができました。

spanタグは『display:block』でブロック要素に変換することでサイズ変更が可能になります。『display:block』を指定しないとspanタグはサイズが変わりませんのでご注意を。

これと同じことがdivタグでもできます。

[HTML] ボックス1
[/HTML]
*{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
.container{
background-color: #CCCCCC;
border-style:solid;
width:700px;
height:700px;
}
.box1{
background-color: #ff7f50; 
width:200px;
height:200px;
}

divタグはもちろんブロック要素なのでそのままでもサイズが指定することができます。

CSSでセレクタを全ての要素に『box-sizing』を指定していますがこれはwidthやheightを直観的に指定できるようにしています。今はとりあえずbox-sizingを指定しておけば楽だという認識でだいじょうぶです。

『box-sizing』についてはこちらのサイトに詳しく説明されているので確認してみてくださいね。またそれぞれのbox-sizingの先頭に『-webkit-』などありますが、『ベンダープレフィックス』と呼ばれる識別子でそれぞれ以下のブラウザを指定しています。参考にしてくださいね。

識別子 ブラウザ
-webkit- Google Chrome、Safari
-moz- Firefox
-o- Opera
-ms- Internet Explorer

containerに幅:700px,高さ:700pxを指定したボックスを作りました。(※グレーの背景色部分)そしてその中に幅:200px,高さ:200pxを指定したbox1を作りました。

内側の余白の変更

padding~(内側の余白)の変更をしてみましょう。

ボックスモデルのイメージ図について説明したいと思います。

box1とcontainerの境界線までの間は『padding~』となる余白部分です。

box1はこのpadding(内側の余白部分)を自由に移動することができます。

ブラウザで表示したbox1はブラウザの仕様で左上に詰められて表示されているのですが、それは『padding~』を何も指定してあげていないからです。

『padding-left』を使ってcontainerの中のbox1を50px移動してみましょう。

.container{
background-color: #CCCCCC;
border-style:solid;
width:700px;
height:700px;
padding-left:50px;
}

確認の方法は、お使いのブラウザ画面でWindowsならF12キー、MacならCommandOptionIでデベロッパーツール(下画像の右側に表示されている部分が表示される)を起動することで確認をすることができます。ぜひ活用しましょう。

 

画像からはちょっと分かりずらいと思うんですが、赤枠で囲ったところに要素のサイズ,width,height,padding,margin,borderがどのように指定されているかも確認することができます。

実際に確認してみてくださいね。

padding-leftは『左の境界線から~px分離す』となります。

ボックス1がcontainerの左の境界線から50px離れたことを確認できたと思います。

次にpadding-topを指定してみましょう。

.container{
background-color: #CCCCCC;
border-style:solid;
width:700px;
height:700px;
padding-left:50px;
padding-top:50px; 
}

padding-topは『上の境界線から~px分離す』となります。

containerの上の境界線から50px離れたことを確認できたと思います。

例えばボックス1をpaddingを使ってcontainerの真ん中に持ってくるとしたら、このように指定してあげるといいでしょう。

containerの高さが700pxなので半分は、350,box1の高さ200pxで半分の100なので
350-100=250
padding-top:250px;
containerの幅が700pxなので半分は、350,box1の高さ200pxで半分の100なので
350-100=250
padding-left:250px;

こんな感じですね。

外側の余白の変更

次はmargin~(外側の余白)の変更をしてみましょう。

paddingの時と同様にmargin-leftを指定しましょう。

marginの余白がわかりやすいようにbodyに背景色を付けました。

ブラウザの仕様で上下左右に8px設定されているのでbodyにmargin:0を指定して0に初期化して行います。

body{
background-color: #cfff00;
margin:0;
} 

0で初期化できたことを確認できました。

 

次は一度に上と左に指定してみましょう。以下の4つの方法で指定します。

■ 値を1~4個の範囲内で指定し、値は半角スペースで区切ります。

説明
1個 上下左右の(padding)又は、(margin)又は、(border)
2個 最初の値が上下、二つ目の値が左右の(padding)又は、(margin)又は、(border)
3個 値が3個 上、左右、下の(padding)又は、(margin)又は、(border)
4個 上、右、下、左の(padding)又は、(margin)又は、(border)
body{
background-color: #cfff00;
margin:0;
margin: 50px 0px 0px 50px;
}


こんな感じですね。

境界線(border)の変更

最後にborder~(境界線)の変更をしてみましょう。

borderのプロパティの種類はたくさんあります。状況に応じて使い分けれるようにしましょう。

■関連プロパティ

プロパティ 説明
border ボーダーのスタイル・太さ・色を指定する
border-color ボーダーの色を指定する
border-style ボーダーのスタイルを指定する
border-width ボーダーの太さを指定する
border-top 上ボーダーのスタイル・太さ・色を指定する
border-top-color 上ボーダーの色を指定する
border-top-style 上ボーダーのスタイルを指定する
border-top-width 上ボーダーの太さを指定する
border-bottom 下ボーダーのスタイル・太さ・色を指定する
border-bottom-color 下ボーダーの色を指定する
border-bottom-style 下ボーダーのスタイルを指定する
border-bottom-width 下ボーダーの太さを指定する
border-left 左ボーダーのスタイル・太さ・色を指定する
border-left-color 左ボーダーの色を指定する
border-left-style 左ボーダーのスタイルを指定する
border-left-width 左ボーダーの太さを指定する
border-right 右ボーダーのスタイル・太さ・色を指定する
border-right-color 右ボーダーの色を指定する
border-right-style 右ボーダーのスタイルを指定する
border-right-width 右ボーダーの太さを指定する

 

基本的に『border-styleプロパティ』はよく使うと思うので今回はボーダースタイルのみの値を表にしておきますね。

■ボーダースタイル

説明
none ボーダーは表示されず、太さも0になります。表のセルなどのボーダーが重なり合う場合は他の値が優先されます。これが初期値です。
hidden ボーダーは表示されず、太さも0になります。表のセルなどのボーダーが重なり合う場合はこの値が優先されます。
solid 1本線で表示されます。
double 2本線で表示されます。
groove 立体的に窪んだ線で表示されます。
ridge 立体的に隆起した線で表示されます。
inset 上と左のボーダーが暗く、下と右のボーダーが明るく表示され、ボーダーで囲まれた領域全体が立体的に窪んだように表示されます。上下左右の一部だけに指定しても立体感は出ません。
outset 上と左のボーダーが明るく、下と右のボーダーが暗く表示され、ボーダーで囲まれた領域全体が立体的に隆起したように表示されます。上下左右の一部だけに指定しても立体感は出ません。
dashed 破線で表示されます。
dotted 点線で表示されます。

containerのボーダースタイルは1本線の『solid』を指定しています。

試しに『border』プロパティを使って、ボーダーのスタイル・太さ・色を指定してみましょう。

border: double 5px blue;

ボーダースタイルをdouble(2本線),太さを10px,色を青にしてみました。

ボーダーの説明はこれで終わります。後は自分で色々と試してみるといいと思います。

まとめ

ボックスモデルについておわかりいただけましたか?まとめとして以下の5点を覚えておきましょう。

  • ボックスにはボックスのwitdh(高さ),height(幅),padding(内側の余白),margin(外側の余白)border(ボックスの境界線)がある
  • ボックスは『PX』,『%』などの単位でサイズ,余白,境界線の調整をする
  • デベロッパーツールを起動して確認してみる
  • ボックスの上下左右は値を1~4個の範囲内で指定することができる
  • わからなければググってみる(笑)

以上!


自作WEBアプリ集


管理人があまりに暇人なため、しょうもないwebアプリを作ったりしてます。見てやってください。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA