CSSのわからないを解決します！ CSSの基本「ボックスモデル」とは？

2015/12/21 365views CSS

box

今回は、CSSの基本「ボックスモデル」についてです。今までなんとなく記述していたCSS。

CSSの基本から知らなかった私は、「ボックスモデルとはなんぞや？！」と思い色々調べ学習してみたら理解出来たので、「ブロック要素」・「インライン要素」と呼ばれる要素、値の指定方法も合わせてご紹介したいと思います。

photo by Kim Love

SPONSORED LINK

▼この記事の目次

ボックスモデルの基本

css-boxmodel
HTMLで作られるブログの文章や画像・動画のコンテンツはボックスモデル (Box model) と呼ばれる四角形のエリア中に収まります。今こうして書いている当ブログのこの文章も、コンテンツエリア内で収まっているのです。

上の図のようにまず「content/ コンテンツ」があり、その回りを「padding/ パディング」と言われる内側の余白、そしてその周りを「border/ ボーダー」が囲みます。

そしてさらに、ボックスの外側の余白が「margin/ マージン」という合わせて4つの領域という構造になるわけです。

ユーザーから見て幅だいうように認識出来るのは「border」までです。「margin」の部分にはコンテンツの背景は適用されません。

また、図にありますが「content」の「width/ 幅」や「height/ 高さ」は実際に表示させたいと考える表示サイズよりも小さめにする必要があります。

なぜかというと、「width」・「height」は「content」の幅・高さのみを指定しているわけで、表示されるのはそこに「padding」と「border」を合わせた値になるからです。
4つの領域で構成される

  • 「content/ コンテンツ/ 内容領域」
  • 「padding/ パディング/ 内側の余白」
  • 「border/ ボーダー/ 枠線」
  • 「margin/ マージン/ 外側の余白」

「ブロック要素」と「インライン要素」

先ほど説明したボックスですが大きくわけて「ブロック要素」と「インライン要素」の大きく2種類に分けれます。HTMLのタグの性質をそれぞれ2つに分けたものです。

この2つを覚える事はCSSを理解する上でとても大事です。それぞれの違い・特徴を見てみましょう。

「ブロック要素」
css-boxmodel2

コンテンツの骨組みとなる要素です。上の図をイメージするとわかりやすいかもしれません。例えば見出し(<h1>,<h2>,<h3>…)、<p>、<table>、<center>、<div>などになります。

  • 縦に積み重なっていくという性質を持つ
  • 要素の前後に改行が入る
  • 上下左右に「margin」・「padding」を指定できる

「インライン要素」

css-boxmodel3
テキスト、またはブロック要素の中に含まれる要素の事です。<strong>、<a>、<b>、<font>、<igm>、<br>などになります。

▼例えば「インライン要素はこのように使います」を下ように記述すると

<strong>インライン要素は</strong><span style="font-size: 23px; color: #ff0000;">このように使います</span>

▼このように表示されます
css-boxmodel4

  • 横へ並んで表示されるという性質を持つ
  • 要素の前後に改行は入らない
  • インライン要素の中にブロック要素は入らない
  • 左右の「margin」は指定できるが、上下の「margin」は指定できない

ボックスの値を指定する

「padding」、「border」、「margin」ともに1～4方向をそれぞれの値で設定する事が出来ます。

「padding」を例にして見てみましょう。

p{
  padding: [1]px;  /* [1]＝上下左右の値を指定 */
  padding: [1]px [2]px;  /* [1]＝上下の値 [2]＝左右の値 */
  padding: [1]px [2]px [3]px;  /* [1]＝上の値 [2]左右の値 [3]＝下の値 */
  padding: [1]px [2]px [3]px [4]px;  /* [1]＝上の値 [2]右の値 [3]＝下の値 [4]＝左の値 */
}

4方向の値を指定する場合時計回りと覚えておくとわかりやすいです。

▼この方法以外に一つの方向を指定するこのような書き方もあります。

p{
  padding-top: ○px;     /* 上の内側の余白を○px指定 */
  padding-right: ○px;   /* 右の内側の余白を○px指定 */
  padding-bottom: ○px;  /* 下の内側の余白を○px指定 */
  padding-left: ○px;    /* 左の内側の余白を○px指定 */
}

「margin」と「auto」

ブロック要素を左寄せ、中央寄せ、右寄せと思ったところに配置したい場合があると思います。そんな時は「margin /外側の余白」に「auto」を指定する事で設定できます。

・「左寄せ」

example1{
  width: ○○px;
  margin-left: auto;
}

・「中央寄せ」

example2{
  width: ○○px;
  margin-left: auto;
  margin-right: auto;
}

・「右寄せ」

example3{
  width: ○○px;
  margin-right: auto;
}

ブロック要素を各場所へ移動させたい場合、このように指定します。width」でブロック要素の幅を忘れずに指定するようにして下さい。この「auto」を指定する事で自動的に余白がコントロールされます。

この記事のまとめ

ブログレイアウトをリニューアルしたかったのでCSSの基本、「ボックスモデル」について書きました。WEBサイトはHTML、CSSを使いこの「四角いボックス」を組み合わせて作っていくというイメージですね。

CSSについては、まだまだ内容が多いので今度何回かに分けてご紹介するかもです。

トップへ戻る