ボックス（領域）を構成する基本的な5つの要素+α【CSS入門】

サイトを構成するための大半のタグに使用することができる基本的な要素、「margin」「padding」「border」「width」「height」と「box-sizing」に関してわかりやすく説明していきたいと思います。

目次

ボックスの構造（ボックスモデル）

各ボックスは↓のような構造になっていて、これをボックスモデルと呼びます。

マージン（margin）

ボーダー（border）

パディング（padding）

コンテンツ

CSSではこのボックスモデルを利用して、各要素、マージン、パディング、ボーダーを追加したり、横幅や高さを調整してレイアウトを決定します。

ボックスに背景を指定した場合、パディングまでの背景が指定される

マージン（margin）

マージンはボックスモデルで一番外側に挿入される余白です。
HTMLタグによってはブラウザ標準で指定されています。

プロパティと調整対象

  • margin
  • 上下左右をまとめて指定する
  • margin-top
  • 上マージン
  • margin-bottom
  • 下マージン
  • margin-left
  • 左マージン
  • margin-right
  • 右マージン

指定できる主な単位

px / % / em / rem / 他

上下、親子マージン重ね合わせ

複数のボックスを並べた場合、または親子のボックスで上下マージンの重ね合わせが行われます。
例えば、上下の要素どちらにもマージン20pxと指定されていた場合、上下の要素間の余白は20px + 20pxで40pxではなく、相殺して20pxとなります。
親子の場合、親要素のtopに20px、子要素のtopに20pxの場合、相殺して20pxとなります。
ただし、親要素にボーダーや、パディングが指定されている場合は重ね合わせは行われません。

例外：フレックス、グリッド、インラインブロック、フロート、絶対もしくは固定で配置された要素にはマージンの重ね合わせは発生しません。

パディング（padding）

パディングはボックスモデルで、ボーダーとコンテンツの間に挿入される余白です。

プロパティと調整対象

  • padding
  • 上下左右をまとめて指定する
  • padding-top
  • 上パディング
  • padding-bottom
  • 下パディング
  • padding-left
  • 左パディング
  • padding-right
  • 右パディング

指定できる主な単位

px / % / em / rem / 他

ボーダー（border）

ボックスモデルのマージンとパディングの間にボーダー（罫線）を挿入します。
ボーダーは「太さ」「色」「スタイル」を上下左右に指定することができます。

プロパティと調整対象

  • border
  • ボーダーの色、スタイル、太さを指定する
    上下左右をまとめて指定する
  • border-style
  • ボーダーのスタイルを指定する
    none・・・表示なし、他の値が優先
    hidden・・・表示なし、この値が優先
    solid・・・1本の実線
    double・・・2本の実線
    groove・・・立体的に窪んだ線
    ridge・・・立体的に隆起した線
    inset・・・全体が窪んだように見える線
    outset・・・全体が隆起したように見える線
    dashed・・・破線
    dotted・・・点線
  • border-width
  • ボーダーの太さを指定する
    px、em、rem など一般的な単位で指定
  • border-color
  • ボーダーの色を指定する
  • border-top
  • ボックス上部を単体で指定する
  • border-right
  • ボックス右サイドを単体で指定する
  • border-left
  • ボックス左サイドを単体で指定する
  • border-bottom
  • ボックス下部を単体で指定する

border-top-color のように組み合わせることも可能です。

指定できる主な単位（太さ）

px / em / rem / 他
thin・・・細い
medium・・・中太
thick・・・太い

横幅（width）と高さ（height）

ボックスの横幅と高さは標準では「auto」（初期値）で処理されます。
「auto」はブラウザの画面や親要素に合わせたサイズ、高さはボックス内のコンテンツに合わせたサイズになります。

プロパティと調整対象

  • width
  • コンテンツの横幅を指定する
  • min-width
  • コンテンツの最小幅を指定する
  • max-width
  • コンテンツの最大幅を指定する
  • height
  • コンテンツの高さを指定する
  • min-height
  • コンテンツの最小の高さを指定する
  • max-height
  • コンテンツの最大の高さを指定する

ブラウザや親要素に合わせた横幅と高さ

親要素やブラウザに合わせたボックスの横幅や高さを、↓のように指定できます。

  • stretch
  • 画面または親要素に合わせたサイズに設定
  • -webkit-fill-available
  • Safari、Chrome用
  • -moz-available
  • Firefox用（ただし高さは機能しない）

ボックス内のコンテンツに合わせる

  • min-content
  • コンテンツの最小幅
    改行できる箇所は全て改行したサイズ
  • max-content
  • コンテンツの最大幅
  • fit-content
  • 画面または親要素に合わせたサイズ
    min-content以下、max-content以上のサイズにはならない

横幅と高さの指定対象（box-sizing）

横幅と高さは、初期ではコンテンツに対して行います。
しかし、box-sizingを指定することでボーダーまでの幅を指定できます。

  • content-box
  • 初期値、コンテンツを対象とします
  • border-box
  • ボーダーの幅を含めたサイズを指定します

border-boxを使用すると見た目から直感的にサイズを指定することがでる

まとめ

ボックスモデルは理解できましたでしょうか？
それぞれの要素の特徴を覚えておくことで、ブログのカスタマイズや、CSSの記述がより簡単に行えるようになります。
簡単なことから少しづつ覚えていきましょう。
ではでは〜

参考：WordPressのカスタマイズ力をつける！【第二回】基礎的なプロパティを変更する【CSS入門】

CSS, HTMLCSS3, コーディング

Posted by アツシオクムラ